LESS ምስ Bootstrap ምጥቃም

ንናይ Bootstrap CSS ንምህናጽ ዝጥቀሙሉ ተለዋዋጢ ረቛሒታት፡ ሚክሲንን ካልእን ንምጥቃም ፡ Bootstrap ብ LESS ፡ CSS preprocessor ምምዕርራይን ምዝርጋሕን።

ስለምንታይ LESS?

ቡትስትራፕ ኣብ ሕመረቱ ብ 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

ጅግና ኣሃዱ

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

ብዛዕባ ሚክሲን

መሰረታዊ ሚክሲናት

መሰረታዊ ሚክሲን ብመሰረቱ ንሓደ ቁንጣሮ CSS ዝኸውን include ወይ partial እዩ። ልክዕ ከም ናይ CSS ክፍሊ ዝተጻሕፉ ኮይኖም ኣብ ዝኾነ ቦታ ክጽውዑ ይኽእሉ።

  1. . ባእታ { .
  2. . ንጹር ምእራም ();
  3. } ።

ፓራሜትሪክ ሚክሲናት

ፓራሜትሪክ ሚክሲን ልክዕ ከም መሰረታዊ ሚክሲን እዩ፣ ግን ንኣማራጺ ነባሪ ክብርታት ዘለዎም መለክዒታት (ስለዚ እዩ እቲ ስም) እውን ይቕበል።

  1. . ባእታ { .
  2. . ዶብ - ራድዩስ ( 4px );
  3. } ።

ብቐሊሉ ናትካ ወስኸሉ።

ዳርጋ ኩሎም ናይ Bootstrap mixins ኣብ mixins.less ይኽዘኑ፣ እዚ ድንቂ ዝኾነ ዩቲሊቲ .less ፋይል ኮይኑ ኣብ ዝኾነ ካብቶም ኣብቲ toolkit ዘለዉ .less ፋይላት mixin ክትጥቀም የኽእለካ።

ስለዚ፡ ንቕድሚት ንኺድ እሞ ነተን ዘለዋ ተጠቐመለን ወይ ድማ ከም ዘድልየካ ናትካ ክትውስኽ ናጻ ትኸውን።

ሚክሲን ሓዊሱ ኣሎ።

ዩቲሊቲታት

ሚክሲን ዝበሃል እዩ። መለክዒታት ኣጠቓቕማ
.clearfix() ዋላ ሓደ ኣብ ውሽጢ ተንሳፋፊ ንምጽራይ ናብ ዝኾነ ወላዲ ወስኸሉ።
.tab-focus() ዋላ ሓደ ናይ ዌብኪት ፎኮስ ቅዲን ክቡብ ፋየርፎክስ ኣውታርን ተግባራዊ ግበር
.center-block() ዋላ ሓደ ኣውቶ ማእከል ሓደ ብሎክ-ደረጃ ባእታ ብምጥቃምmargin: auto
.ie7-inline-block() ዋላ ሓደ display: inline-blockIE7 ደገፍ ንምርካብ ብዘይካ ስሩዕ ተጠቐም
.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*

ናይ CSS3 ባህርያት

ሚክሲን ዝበሃል እዩ። መለክዒታት ኣጠቓቕማ
.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 ዓምድታት ከም ዝጥቀም ግበር

ድሕረ ባይታታትን ምዕባለታትን

ሚክሲን ዝበሃል እዩ። መለክዒታት ኣጠቓቕማ
#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 ንመጠወቒታት ንደረጃን ቁሩብ ዝጸ���መተ ዶብን ንምምዳብ ዝውዕል
መተሓሳሰቢ ፡ ብዝተመሓየሸ CSS ናብ GitHub ናይ ስሕበት ሕቶ ትቕርብ እንተኾንካ ፡ ነቲ CSS ብዝኾነ ካብዞም ሜላታት ኣቢልካ ዳግማይ ክትጥርንፎ ኣለካ ።

መሳርሒታት ምጥርናፍ

መስመር ምስ makefile

LESS command line compilerን uglify-jsን ብዓለም ደረጃ ብ npm ነዚ ዝስዕብ ትእዛዝ ብምፍጻም ንጽዓኖ።

$ npm ምትካል -g ውሑድ 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 ኣሎ