ንናይ Bootstrap CSS ንምህናጽ ዝጥቀሙሉ ተለዋዋጢ ረቛሒታት፡ ሚክሲንን ካልእን ንምጥቃም ፡ Bootstrap ብ LESS ፡ CSS preprocessor ምምዕርራይን ምዝርጋሕን።
ቡትስትራፕ ኣብ ሕመረቱ ብ LESS ዝተሰርሐ ኮይኑ፡ ብጽቡቕ ዓርክና ኣሌክሲስ ሰሊየር ዝተፈጥረ ዳይናሚክ ስታይልሺት ቋንቋ እዩ ። ኣብ ስርዓት ዝተመስረተ CSS ምምዕባል ዝቐልጠፈን ዝቐለለን ዝያዳ ዘዘናግዕን ይገብሮ።
ከም መቐጸልታ ናይ CSS፡ LESS ተለዋዋጢ ረቛሒታት፡ ዳግማይ ክጥቀሙ ዝኽእሉ ቁንጣሮ ኮድ ዝኸውን ሚክሲን፡ ንቐሊል ሒሳብ፡ ምድቃል፡ ዋላ’ውን ሕብራዊ ተግባራት ዝኸውን ስርሓት የጠቓልል።
ኣብ CSS ሕብርታትን ፒክሰል ክብርታትን ምምሕዳር ቁሩብ ቃንዛ ክኸውን ይኽእል እዩ፣ መብዛሕትኡ ግዜ ቅዳሕን ምልጣፍን ዝመልኦ እዩ። ብ LESS ግን ኣይኮነን-ሕብርታት ወይ ፒክሰል ክብርታት ከም ተለዋዋጢ ምምዳብን ሓንሳብ ምቕያርን።
እተን ሰለስተ ዶብ-ራድዩስ ኣዋጃት ኣብ ስሩዕ ol' CSS ክትገብሮም ዘለካ? ሕጂ ብሓገዝ ሚክሲን፡ ኣብ ዝኾነ ቦታ ዳግማይ ክትጥቀመሎም እትኽእል ቁንጣሮ ኮድ ናብ ሓደ መስመር ወሪዶም ኣለዉ።
ናትካ ግሪድ፣ መሪሕ፣ ከምኡውን ዝያዳ ሱፐር ተዓጻጻፊ ግበሮ ሒሳብ ኣብ በረራ ምስ ስርሒታት ብምግባር። መንገድኻ ናብ CSS sanity ኣባዝሕ፣ ምክፍፋል፣ ምውሳኽን ምጉዳልን።
@bodyBackground |
@white |
ገጽ ድሕረ ባይታ ሕብሪ | |
@textColor |
@grayDark |
ንመላእ ኣካል፡ ኣርእስታትን ካልእን ዝኸውን ነባሪ ሕብሪ ጽሑፍ | |
@linkColor |
#08c |
ነባሪ ሕብሪ ጽሑፍ መላግቦ | |
@linkColorHover |
darken(@linkColor, 15%) |
ነባሪ መላግቦ ጽሑፍ ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት |
@gridColumns |
12. |
@gridColumnWidth |
60px ዝብል እዩ። |
@gridGutterWidth |
20px ዝብል እዩ። |
@fluidGridColumnWidth |
6.382978723% ዝኾነ |
@fluidGridGutterWidth |
2.127659574% ዝኾነ |
@sansFontFamily |
"ሄልቨቲካ ኖው"፡ ሄልቨቲካ፡ ኣርያል፡ sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
መንሎ፡ ሞናኮ፡ "መልእኽተኛ ሓድሽ"፡ ሞኖስፔስ | |
@baseFontSize |
13px ዝብል እዩ። | ፒክሰል ክኸውን ኣለዎ። |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px ዝብል እዩ። | ፒክሰል ክኸውን ኣለዎ። |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
@black |
#000 ዝብል እዩ። | |
@grayDarker |
#222 | |
@grayDark |
#333 ዝብል ጽሑፍ ኣሎ። | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff ዝብል ጽሑፍ ኣሎ። |
@blue |
#049ሲዲቢ | |
@green |
#46ሀ546 | |
@red |
#9መ261መ | |
@yellow |
#ffc40d ዝብል ጽሑፍ ኣሎ። | |
@orange |
#f89406 ዝብል ጽሑፍ ኣሎ። | |
@pink |
#c3325ረ | |
@purple |
#7ሀ43ለ6 |
@btnBackground |
@white |
|
@btnBackgroundHighlight |
darken(@white, 10%) |
|
@btnBorder |
darken(@white, 20%) |
|
@btnPrimaryBackground |
@linkColor |
|
@btnPrimaryBackgroundHighlight |
spin(@btnPrimaryBackground, 15%) |
|
@btnInfoBackground |
#5bc0de |
|
@btnInfoBackgroundHighlight |
#2f96b4 |
|
@btnSuccessBackground |
#62c462 |
|
@btnSuccessBackgroundHighlight |
51a351 |
|
@btnWarningBackground |
lighten(@orange, 15%) |
|
@btnWarningBackgroundHighlight |
@orange |
|
@btnDangerBackground |
#ee5f5b |
|
@btnDangerBackgroundHighlight |
#bd362f |
|
@btnInverseBackground |
@gray |
|
@btnInverseBackgroundHighlight |
@grayDarker |
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
@warningText |
#c09853 ዝብል ጽሑፍ ኣሎ። | |
@warningBackground |
#f3edd2 ዝብል ጽሑፍ ኣሎ። | |
@errorText |
#ብ94ሀ48 | |
@errorBackground |
#ፍ2ደደ | |
@successText |
#468847 ዝብል ጽሑፍ ኣሎ። | |
@successBackground |
#dff0d8 ዝብል ጽሑፍ ኣሎ። | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 ዝብል ጽሑፍ ኣሎ። |
@navbarHeight |
40px ዝብል እዩ። | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
|
@navbarLinkColorActive |
@navbarLinkColorHover |
|
@navbarLinkBackgroundHover |
transparent |
|
@navbarLinkBackgroundActive |
@navbarBackground |
|
@navbarSearchBackground |
lighten(@navbarBackground, 25%) |
|
@navbarSearchBackgroundFocus |
@white |
|
@navbarSearchBorder |
darken(@navbarSearchBackground, 30%) |
|
@navbarSearchPlaceholderColor |
#ccc |
|
@navbarBrandColor |
@navbarLinkColor |
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
መሰረታዊ ሚክሲን ብመሰረቱ ንሓደ ቁንጣሮ CSS ዝኸውን include ወይ partial እዩ። ልክዕ ከም ናይ CSS ክፍሊ ዝተጻሕፉ ኮይኖም ኣብ ዝኾነ ቦታ ክጽውዑ ይኽእሉ።
- . ባእታ { .
- . ንጹር ምእራም ();
- } ።
ፓራሜትሪክ ሚክሲን ልክዕ ከም መሰረታዊ ሚክሲን እዩ፣ ግን ንኣማራጺ ነባሪ ክብርታት ዘለዎም መለክዒታት (ስለዚ እዩ እቲ ስም) እውን ይቕበል።
- . ባእታ { .
- . ዶብ - ራድዩስ ( 4px );
- } ።
ዳርጋ ኩሎም ናይ Bootstrap mixins ኣብ mixins.less ይኽዘኑ፣ እዚ ድንቂ ዝኾነ ዩቲሊቲ .less ፋይል ኮይኑ ኣብ ዝኾነ ካብቶም ኣብቲ toolkit ዘለዉ .less ፋይላት mixin ክትጥቀም የኽእለካ።
ስለዚ፡ ንቕድሚት ንኺድ እሞ ነተን ዘለዋ ተጠቐመለን ወይ ድማ ከም ዘድልየካ ናትካ ክትውስኽ ናጻ ትኸውን።
ሚክሲን ዝበሃል እዩ። | መለክዒታት | ኣጠቓቕማ |
---|---|---|
.clearfix() |
ዋላ ሓደ | ኣብ ውሽጢ ተንሳፋፊ ንምጽራይ ናብ ዝኾነ ወላዲ ወስኸሉ። |
.tab-focus() |
ዋላ ሓደ | ናይ ዌብኪት ፎኮስ ቅዲን ክቡብ ፋየርፎክስ ኣውታርን ተግባራዊ ግበር |
.center-block() |
ዋላ ሓደ | ኣውቶ ማእከል ሓደ ብሎክ-ደረጃ ባእታ ብምጥቃምmargin: auto |
.ie7-inline-block() |
ዋላ ሓደ | display: inline-block IE7 ደገፍ ንምርካብ ብዘይካ ስሩዕ ተጠቐም |
.size() |
@height @width |
ቁመትን ስፍሓትን ብቕልጡፍ ኣብ ሓደ መስመር ኣቐምጦ |
.square() |
@size |
.size() ስፍሓትን ቁመትን ከም ሓደ ዓይነት ዋጋ ንምቕማጥ ይሃንጽ |
.opacity() |
@opacity |
ብሙሉእ ቁጽርታት፡ ናይ ዘይንጹርነት ሚእታዊት ኣቐምጥ (ንኣብነት፡ "50" ወይ "75") |
ሚክሲን ዝበሃል እዩ። | መለክዒታት | ኣጠቓቕማ |
---|---|---|
.placeholder() |
@color: @placeholderText |
placeholder ንኣእትዎታት ዝኸውን ሕብሪ ጽሑፍ ኣቐምጥ |
ሚክሲን ዝበሃል እዩ። | መለክዒታት | ኣጠቓቕማ |
---|---|---|
#font > #family > .serif() |
ዋላ ሓደ | ሓደ ባእታ serif font stack ከም ዝጥቀም ግበር |
#font > #family > .sans-serif() |
ዋላ ሓደ | ሓደ ባእታ sans-serif font stack ከም ዝጥቀም ግበር |
#font > #family > .monospace() |
ዋላ ሓደ | ሓደ ባእታ ሞኖስፔስ ቅርጺ ፊደል ስታክ ከም ዝጥቀም ግበር |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ብቐሊሉ ዓቐን ቅርጺ ፊደል፣ ክብደትን መሪሕነትን ኣቐምጥ |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ስድራቤት ቅርጺ ናብ serif ኣቐምጦ፣ ንዓቐን፣ ክብደትን መሪሕነትን ድማ ምቁጽጻር |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ስድራቤት ቅርጺ ናብ sans-serif ኣቐምጦ፣ ዓቐን፣ ክብደትን መሪሕነትን ድማ ምቁጽጻር |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ስድራቤት ቅርጺ ናብ ሞኖስፔስ ኣቐምጦ፣ ዓቐን፣ ክብደትን መሪሕነትን ድማ ምቁጽጻር |
ሚክሲን ዝበሃል እዩ። | መለክዒታት | ኣጠቓቕማ |
---|---|---|
.container-fixed() |
ዋላ ሓደ | ትሕዝቶኻ ንምሓዝ ብኣግማድ ማእከል ዝገበረ መትሓዚ ፍጠር |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
n ዓምድታትን x ፒክሰል ስፍሓት ዘለዎ ጓተርን ዘለዎ ናይ ፒክሰል ሽቦ ስርዓት (መትሓዚ፣ መስርዕን ዓምድታትን) ምፍጣር |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
n ዓምድታትን x % ገፊሕ ጐዳጉዲን ዘለዎ ናይ ሚእታዊት ስርዓተ ሽቦ ምፍጣር |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
ንባእታታት ዝኸውን ስርዓት ፒክሰል ግሪድ ምፍጣር input ፣ ንመሸፈኒን ዶባትን ምሕሳብ |
.makeColumn |
@columns: 1, @offset: 0 |
ዝኾነ ብዘይ ክፍልታት div ናብ ሽቦ ዓምዲ ቀይሮ.span* |
ሚክሲን ዝበሃል እዩ። | መለክዒታት | ኣጠቓቕማ |
---|---|---|
.border-radius() |
@radius |
ኩርናዓት ናይ ሓደ ባእታ ምኽባብ። ሓደ ዋጋ ወይ ኣርባዕተ ብቦታ ዝተፈላለዩ ክብርታት ክኸውን ይኽእል። |
.box-shadow() |
@shadow |
ኣብ ሓደ ባእታ ንጣብ ጽላሎት ምውሳኽ |
.transition() |
@transition |
CSS3 ናይ ምስግጋር ውጽኢት ምውሳኽ (ንኣብነት፣ all .2s linear ) |
.rotate() |
@degrees |
ንሓደ ባእታ n ዲግሪ ምዝዋር |
.scale() |
@ratio |
ንሓደ ባእታ ናብ n ዕጽፊ ናይቲ መበቆላዊ ዓቐኑ ስኬል ግበሮ |
.translate() |
@x, @y |
ኣብ xን yን ነፈርቲ ንሓደ ባእታ ኣንቀሳቕሶ |
.background-clip() |
@clip |
ድሕረ ባይታ ናይ ሓደ ባእታ ምቑራጽ (ን ጠቓሚ border-radius ) . |
.background-size() |
@size |
ንዓቐን ናይ ድሕረ ባይታ ምስልታት ብመንገዲ CSS3 ምቁጽጻር |
.box-sizing() |
@boxmodel |
ንሓደ ባእታ ዝኸውን ሞዴል ሳጹን ምቕያር (ንኣብነት border-box ፡ ንሓደ ምሉእ ስፍሓት input ) |
.user-select() |
@select |
ኣብ ሓደ ገጽ ናይ ጽሑፍ ምምራጽ መመልከቲ ምቁጽጻር |
.backface-visibility() |
@visibility: visible |
CSS 3D ትራንስፎርም ኣብ እትጥቀመሉ እዋን ትሕዝቶ ምብራዝ ምክልኻል |
.resizable() |
@direction: both |
ዝኾነ ባእታ ብየማንን ታሕተዋይን ዓቐኑ ዝቕየር ግበሮ |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
ትሕዝቶ ዝኾነ ባእታ CSS3 ዓምድታት ከም ዝጥቀም ግበር |
.hyphens() |
@mode: auto |
CSS3 ኣብ ዝደለኻዮ እዋን ምልክት ምልክት (ዘጠቓልል word-wrap: break-word ) |
ሚክሲን ዝበሃል እዩ። | መለክዒታት | ኣጠቓቕማ |
---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
ንሓደ ባእታ ፍርቂ ብርሃን ዝህብ ሕብሪ ድሕረ ባይታ ሃቦ |
#translucent > .border() |
@color: @white, @alpha: 1 |
ንሓደ ባእታ ፍርቂ ብርሃን ዝህብ ናይ ዶብ ሕብሪ ሃቦ |
#gradient > .vertical() |
@startColor, @endColor |
መስቀላዊ-ብራውዘር ቀጥታዊ ድሕረ ባይታ ምዕባለ ምፍጣር |
#gradient > .horizontal() |
@startColor, @endColor |
መስቀላዊ-ብራውዘር ኣግማድ ድሕረ ባይታ ምዕባለ ምፍጣር |
#gradient > .directional() |
@startColor, @endColor, @deg |
መስቀላዊ-ብራውዘር ኣንፈታዊ ድሕረ ባይታ ምዕባለ ምፍጣር |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
መስቀላዊ-ብራውዘር ሰለስተ ሕብሪ ዘለዎ ድሕረ ባይታ ምዕባለ ምፍጣር |
#gradient > .radial() |
@innerColor, @outerColor |
መስቀላዊ-ብራውዘር ራድያላዊ ድሕረ ባይታ ምዕባለ ምፍጣር |
#gradient > .striped() |
@color, @angle |
መስቀላዊ-ብራውዘር መስመር ዘለዎ ድሕረ ባይታ ምዕባለ ምፍጣር |
#gradientBar() |
@primaryColor, @secondaryColor |
ንመጠወቒታት ንደረጃን ቁሩብ ዝጸልመተ ዶብን ንምምዳብ ዝውዕል |
LESS command line compiler, JSHint, Recess, and uglify-js ብዓለም ደረጃ ብ npm ነዚ ዝስዕብ ትእዛዝ ብምፍጻም ንጽዓኖ።
$ npm ምትካል -g ውሑድ jshint ዕረፍቲ uglify-js
ሓንሳብ ምስ ተተኽለ በቃ make
ካብ ሱር ናይ bootstrap directory ናትካ ምዝዋር ኩሉ ድማ ተዳልዩ ኣለኻ።
ብተወሳኺ watchr ተተኺሉ እንተሃልዩካ፡ ኣብ bootstrap lib ንሓደ ፋይል ኣብ እትእርመሉ ኩሉ ግዜ፡ bootstrap ብኣውቶማቲክ ዳግማይ ክህነጽ ክትጎዪ ትኽእል make watch
ኢኻ (እዚ ኣድላዪ ኣይኮነን፡ ምቹእነት ጥራይ እዩ)።
መሳርሒ መስመር ትእዛዝ LESS ብመንገዲ Node ንጽዓኖ እሞ ነዚ ዝስዕብ ትእዛዝ ኣካይድ፤
$ lessc ./less/bootstrap.less > ቡትስትራፕ.ሲኤስ
--compress
ገለ ባይት ክትዕቅብ እንተፈቲንካ ኣብቲ ትእዛዝ ምእታውካ ኣረጋግጽ !
ነቲ ዝሓለፈ Less.js ኣውሪድካ ናብኡ ዝወስድ መንገዲ (ከምኡ’ውን Bootstrap) ኣብቲ <head>
.
<link rel = "ቅዲ ጽሑፍ/ውሑድ" href = "/መንገዲ/ናብ/ቦትስትራፕ.ውሑድ" > <script src = "/መንገዲ/ናብ/ውሑድ.js" ></script>
ነቶም .less ፋይላት ዳግማይ ንምጥርናፍ፡ በቃ ንዕቅቦም እሞ ገጽካ ዳግማይ ጽዓኖም። Less.js ኣኪቡ ኣብ ሎካል ስቶሬጅ ይዕቅቦም።
እቲ ዘይወግዓዊ ናይ ማክ ኣፕ ፡ ማህደራት ናይ .less ፋይላት ይከታተልን ድሕሪ ነፍሲ ወከፍ ምዕቃብ ናይ ሓደ ዝተዓዘብናዮ .less ፋይል ነቲ ኮድ ናብ ሎካል ፋይላት የጠቓልልን።
እንተደሊኻ፡ ኣብቲ ኣፕ ዘሎ ምርጫታት ንኣውቶማቲክ ምጉዳልን እቶም ዝተጠርነፉ ፋይላት ኣብ ኣየናይ ማህደር ከም ዝውድኡን ክትቅይር ትኽእል ኢኻ።
Crunch ኣብ Adobe Air ዝተሃንጸ ብሉጽ ትርኢት ዘለዎ LESS editorን compilerን እዩ።
ብሓደ ወዲ ምስቲ ዘይወግዓዊ ማክ ኣፕ ዝተፈጥረ ኮድኪት LESS, SASS, Stylus, ከምኡ ውን CoffeeScript ዘጠቓልል ናይ Mac ኣፕ እዩ።
Mac, Linux, ከምኡ ውን PC app ንናይ LESS ፋይላት ስሓብን ምውራድን ንምጥርናፍ ዝሕግዝ። ተወሳኺ፡ እቲ ምንጪ ኮድ ኣብ GitHub ኣሎ ።