ንናይ Bootstrap CSS ንምህናጽ ዝጥቀሙሉ ተለዋዋጢ ረቛሒታት፡ ሚክሲንን ካልእን ንምጥቃም ፡ Bootstrap ብ LESS ፡ CSS preprocessor ምምዕርራይን ምዝርጋሕን።
Bootstrap ብ LESS at it's core ዝተሰርሐ ኮይኑ፡ ብጽቡቕ ዓርክና ፡ Alexis Sellier ዝተፈጥረ ዳይናሚክ ስታይልሺት ቋንቋ እዩ ። ኣብ ስርዓት ዝተመስረተ CSS ምምዕባል ዝቐልጠፈን ዝቐለለን ዝያዳ ዘዘናግዕን ይገብሮ።
ከም መቐጸልታ ናይ CSS፡ LESS ተለዋዋጢ ረቛሒታት፡ ዳግማይ ክጥቀሙ ዝኽእሉ ቁንጣሮ ኮድ ዝኸውን ሚክሲን፡ ንቐሊል ሒሳብ፡ ምድቃል፡ ዋላ’ውን ሕብራዊ ተግባራት ዝኸውን ስርሓት የጠቓልል።
ኣብ CSS ሕብርታትን ፒክሰል ክብርታትን ምምሕዳር ቁሩብ ቃንዛ ክኸውን ይኽእል እዩ፣ መብዛሕትኡ ግዜ ቅዳሕን ምልጣፍን ዝመልኦ እዩ። ብ LESS ግን ኣይኮነን-ሕብርታት ወይ ፒክሰል ክብርታት ከም ተለዋዋጢ ምምዳብን ሓንሳብ ምቕያርን።
እተን ሰለስተ ዶብ-ራድዩስ ኣዋጃት ኣብ ስሩዕ ol' CSS ክትገብሮም ዘለካ? ሕጂ ብሓገዝ ሚክሲን፡ ኣብ ዝኾነ ቦታ ዳግማይ ክትጥቀመሎም እትኽእል ቁንጣሮ ኮድ ናብ ሓደ መስመር ወሪዶም ኣለዉ።
ናትካ ግሪድ፣ መሪሕ፣ ከምኡውን ዝያዳ ሱፐር ተዓጻጻፊ ግበሮ ሒሳብ ኣብ በረራ ምስ ስርሒታት ብምግባር። መንገድኻ ናብ CSS sanity ኣባዝሕ፣ ምክፍፋል፣ ምውሳኽን ምጉዳልን።
@linkColor |
#08ሐ | ነባሪ ሕብሪ ጽሑፍ መላግቦ | |
@linkColorHover |
darken(@linkColor, 15%) |
ነባሪ መላግቦ ጽሑፍ ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት ምልክት |
@gridColumns |
12. |
@gridColumnWidth |
60px ዝብል እዩ። |
@gridGutterWidth |
20px ዝብል እዩ። |
@fluidGridColumnWidth |
6.382978723% ዝኾነ |
@fluidGridGutterWidth |
2.127659574% ዝኾነ |
@baseFontSize |
13px ዝብል እዩ። | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px ዝብል እዩ። |
@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 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px ዝብል እዩ። | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#f3edd2 ዝብል ጽሑፍ ኣሎ። | |
@warningBackground |
#c09853 ዝብል ጽሑፍ ኣሎ። | |
@errorText |
#ብ94ሀ48 | |
@errorBackground |
#ፍ2ደደ | |
@successText |
#468847 ዝብል ጽሑፍ ኣሎ። | |
@successBackground |
#dff0d8 ዝብል ጽሑፍ ኣሎ። | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 ዝብል ጽሑፍ ኣሎ። |
መሰረታዊ ሚክሲን ብመሰረቱ ንሓደ ቁንጣሮ 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: 5px, @width: 5px |
ቁመትን ስፍሓትን ብቕልጡፍ ኣብ ሓደ መስመር ኣቐምጦ |
.square() |
@size: 5px |
.size() ስፍሓትን ቁመትን ከም ሓደ ዓይነት ዋጋ ንምቕማጥ ይሃንጽ |
.opacity() |
@opacity: 100 |
ብሙሉእ ቁጽርታት፡ ናይ ዘይንጹርነት ሚእታዊት ኣቐምጥ (ንኣብነት፡ "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() |
ዋላ ሓደ | ትሕዝቶኻ ንምሓዝ ውሱን ስፍሓት ዘለዎ (ምስ @siteWidth ) መትሓዚ ኣቕርብ |
.columns() |
@columns: 1 |
ዝኾነ ቁጽሪ ዓምድታት ዝሽፍን ዓምዲ ሽቦ ምህናጽ (ነባሪ ናብ 1 ዓምዲ) |
.offset() |
@columns: 1 |
ዝኾነ ቁጽሪ ዓምድታት ዝሽፍን ጸጋማይ ወሰን ዘለዎ ናይ ሽቦ ዓምዲ ምትዕርራይ |
.gridColumn() |
ዋላ ሓደ | ሓደ ባእታ ከም ዓምዲ ሽቦ ከም ዝንሳፈፍ ግበሮ |
ሚክሲን ዝበሃል እዩ። | መለክዒታት | ኣጠቓቕማ |
---|---|---|
.border-radius() |
@radius: 5px |
ኩርናዓት ናይ ሓደ ባእታ ምኽባብ። ሓደ ዋጋ ወይ ኣርባዕተ ብቦታ ዝተፈላለዩ ክብርታት ክኸውን ይኽእል። |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
ኣብ ሓደ ባእታ ንጣብ ጽላሎት ምውሳኽ |
.transition() |
@transition |
CSS3 ናይ ምስግጋር ውጽኢት ምውሳኽ (ንኣብነት፣ all .2s linear ) |
.rotate() |
@degrees |
ንሓደ ባእታ n ዲግሪ ምዝዋር |
.scale() |
@ratio |
ንሓደ ባእታ ናብ n ዕጽፊ ናይቲ መበቆላዊ ዓቐኑ ስኬል ግበሮ |
.translate() |
@x: 0, @y: 0 |
ኣብ xን yን ነፈርቲ ንሓደ ባእታ ኣንቀሳቕሶ |
.background-clip() |
@clip |
ድሕረ ባይታ ናይ ሓደ ባእታ ምቑራጽ (ን ጠቓሚ border-radius ) . |
.background-size() |
@size |
ንዓቐን ናይ ድሕረ ባይታ ምስልታት ብመንገዲ CSS3 ምቁጽጻር |
.box-sizing() |
@boxmodel |
ንሓደ ባእታ ዝኸውን ሞዴል ሳጹን ምቕያር (ንኣብነት border-box ፡ ንሓደ ምሉእ ስፍሓት input ) |
.user-select() |
@select |
ኣብ ሓደ ገጽ ናይ ጽሑፍ ምምራጽ መመልከቲ ምቁጽጻር |
.resizable() |
@direction: both |
ዝኾነ ባእታ ብየማንን ታሕተዋይን ዓቐኑ ዝቕየር ግበሮ |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
ትሕዝቶ ዝኾነ ባእታ CSS3 ዓምድታት ከም ዝጥቀም ግበር |
ሚክሲን ዝበሃል እዩ። | መለክዒታት | ኣጠቓቕማ |
---|---|---|
.#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 ዝብል ናይ ትእዛዝ መስመር ኣከባቢርካ ብ npm ንጽዓኖ።
$ npm ውሑድ ምትካል
ሓንሳብ ምስ ተተኽለ በቃ make
ካብ ሱር ናይ bootstrap directory ናትካ ምዝዋር ኩሉ ድማ ተዳልዩ ኣለኻ።
ብተወሳኺ watchr ተተኺሉ እንተሃልዩካ፡ ኣብ bootstrap lib ንሓደ ፋይል ኣብ እትእርመሉ ኩሉ ግዜ፡ bootstrap ብኣውቶማቲክ ዳግማይ ክህነጽ ክትጎዪ ትኽእል make watch
ኢኻ (እዚ ኣድላዪ ኣይኮነን፡ ምቹእነት ጥራይ እዩ)።
መሳርሒ መስመር ትእዛዝ LESS ብመንገዲ Node ንጽዓኖ እሞ ነዚ ዝስዕብ ትእዛዝ ኣካይድ፤
$ lessc ./lib/bootstrap.less > ቡትስትራፕ.ሲኤስ
--compress
ገለ ባይት ክትዕቅብ እንተፈቲንካ ኣብቲ ትእዛዝ ምእታውካ ኣረጋግጽ !
ነቲ ዝሓለፈ Less.js ኣውሪድካ ናብኡ ዝወስድ መንገዲ (ከምኡ’ውን Bootstrap) ኣብቲ <head>
.
<link rel="ቅዲ/ውሑድ" href="/መንገዲ/ናብ/ቦትስትራፕ.ውሑድ"> <script src="/መንገዲ/ናብ/less.js"></script> ዝብል ጽሑፍ ኣሎ።
ነቶም .less ፋይላት ዳግማይ ንምጥርናፍ፡ በቃ ንዕቅቦም እሞ ገጽካ ዳግማይ ጽዓኖም። Less.js ኣኪቡ ኣብ ሎካል ስቶሬጅ ይዕቅቦም።
እቲ ዘይወግዓዊ ናይ ማክ ኣፕ ፡ ማህደራት ናይ .less ፋይላት ይከታተልን ድሕሪ ነፍሲ ወከፍ ምዕቃብ ናይ ሓደ ዝተዓዘብናዮ .less ፋይል ነቲ ኮድ ናብ ሎካል ፋይላት የጠቓልልን።
እንተደሊኻ፡ ኣብቲ ኣፕ ዘሎ ምርጫታት ንኣውቶማቲክ ምጉዳልን እቶም ዝተጠርነፉ ፋይላት ኣብ ኣየናይ ማህደር ከም ዝውድኡን ክትቅይር ትኽእል ኢኻ።
Crunch ኣብ Adobe Air ዝተሃንጸ ብሉጽ ትርኢት ዘለዎ LESS editorን compilerን እዩ።
ብሓደ ወዲ ምስቲ ዘይወግዓዊ ማክ ኣፕ ዝተፈጥረ ኮድኪት LESS, SASS, Stylus, ከምኡ ውን CoffeeScript ዘጠቓልል ናይ Mac ኣፕ እዩ።
Mac, Linux, ከምኡ ውን PC app ንናይ LESS ፋይላት ስሓብን ምውራድን ንምጥርናፍ ዝሕግዝ። ተወሳኺ፡ እቲ ምንጪ ኮድ ኣብ GitHub ኣሎ ።