LESS ምስ Bootstrap ምጥቃም

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

ስለምንታይ LESS?

ቡትስትራፕ ኣብ ሕመረቱ ብ LESS ዝተሰርሐ ኮይኑ፡ ብጽቡቕ ዓርክና ኣሌክሲስ ሰሊየር ዝተፈጥረ ዳይናሚክ ስታይልሺት ቋንቋ እዩ ። ኣብ ስርዓት ዝተመስረተ CSS ምምዕባል ዝቐልጠፈን ዝቐለለን ዝያዳ ዘዘናግዕን ይገብሮ።

እንታይ ተሓዊስዎ ኣሎ?

ከም መቐጸልታ ናይ CSS፡ LESS ተለዋዋጢ ረቛሒታት፡ ዳግማይ ክጥቀሙ ዝኽእሉ ቁንጣሮ ኮድ ዝኸውን ሚክሲን፡ ንቐሊል ሒሳብ፡ ምድቃል፡ ዋላ’ውን ሕብራዊ ተግባራት ዝኸውን ስርሓት የጠቓልል።

ተወሳኺ ፍለጡ

ንዝያዳ ሓበሬታ ኣብ ወግዓዊ መርበብ ሓበሬታ http://lesscss.org/ ተወከሱ ።

ተለዋዋጢ ረቛሒታት

ኣብ 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`	#c09853 ዝብል ጽሑፍ ኣሎ።
`@warningBackground`	#f3edd2 ዝብል ጽሑፍ ኣሎ።
`@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()`	ዋላ ሓደ	ሓደ ባእታ ከም ዓምዲ ሽቦ ከም ዝንሳፈፍ ግበሮ

ናይ CSS3 ባህርያት

ሚክሲን ዝበሃል እዩ።	መለክዒታት	ኣጠቓቕማ
`.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`	ንመጠወቒታት ንደረጃን ቁሩብ ዝጸልመተ ዶብን ንምምዳብ ዝውዕል

መተሓሳሰቢ ፡ ብዝተመሓየሸ CSS ናብ GitHub ናይ ስሕበት ሕቶ ትቕርብ እንተኾንካ ፡ ነቲ CSS ብዝኾነ ካብዞም ሜላታት ኣቢልካ ዳግማይ ክትጥርንፎ ኣለካ ።

መሳርሒታት ምጥርናፍ

መስመር ምስ makefile

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

$ npm ምትካል -g ውሑድ

ሓንሳብ ምስ ተተኽለ በቃ 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 = "/መንገዲ/ናብ/ውሑድ.js" ></script>

ነቶም .less ፋይላት ዳግማይ ንምጥርናፍ፡ በቃ ንዕቅቦም እሞ ገጽካ ዳግማይ ጽዓኖም። Less.js ኣጠቓሊሉ ኣብ ሎካል ስቶሬጅ ይዕቅቦም።

ዘይወግዓዊ ናይ ማክ ኣፕ

እቲ ዘይወግዓዊ ናይ ማክ ኣፕ ፡ ማህደራት ናይ .less ፋይላት ይከታተልን ድሕሪ ነፍሲ ወከፍ ምዕቃብ ናይ ሓደ ዝተዓዘብናዮ .less ፋይል ነቲ ኮድ ናብ ሎካል ፋይላት የጠቓልሎን።

እንተደሊኻ፡ ኣብቲ ኣፕ ዘሎ ምርጫታት ንኣውቶማቲክ ምጉዳልን እቶም ዝተጠርነፉ ፋይላት ኣብ ኣየናይ ማህደር ከም ዝውድኡን ክትቅይር ትኽእል ኢኻ።

ብ LESS ዝተሃንጸ

ስለምንታይ LESS?

እንታይ ተሓዊስዎ ኣሎ?

ተወሳኺ ፍለጡ

ተለዋዋጢ ረቛሒታት

ሚክሲን ዝበሃሉ ምዃኖም ይፍለጥ

ስርሒታት

ቡትስትራፕ ተለዋዋጢ LESS ተለዋዋጢ ዋጋታት፣ ክብርታቶምን መምርሒታት ኣጠቓቕማን።

ሃይፐርሊንክታት

ስርዓት ሽቦ

ታይፖግራፊ

ግራጭ ሕብርታት

ሕብርታት ላህጃ

ኣካላት

መጠወቒታት

ቅጥዕታት

ናቭባር

ቅጥዒ ግዝኣታትን መጠንቀቕታታትን

ቡትስትራፕ ሚክሲናት

ብዛዕባ ሚክሲን

መሰረታዊ ሚክሲናት

ፓራሜትሪክ ሚክሲናት

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

ሚክሲን ሓዊሱ ኣሎ።

ዩቲሊቲታት

ቅጥዕታት

ታይፖግራፊ

ስርዓት ሽቦ

ናይ CSS3 ባህርያት

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

ቡትስትራፕ ብ LESS ምጥርናፍ

መሳርሒታት ምጥርናፍ

መስመር ምስ makefile

መስመር ትእዛዝ

ጃቫስክሪፕት።

ዘይወግዓዊ ናይ ማክ ኣፕ

ተወሳኺ ናይ ማክ መተግበሪታት

ምጭብባጥ

ኮድኪት ዝበሃል ትካል

ቀሊል ዘይኮነ