Baara kɛ ni LESS ye ni Bootstrap ye

Bootstrap bɛrɛbɛrɛ ani k’a janya ni LESS ye, n’o ye CSS preprocessor ye, walasa ka nafa sɔrɔ fɛn caman na, mixins ani fɛn wɛrɛw minnu bɛ kɛ ka Bootstrap ka CSS jɔ.

Mun na LESS?

Bootstrap dilannen don ni LESS ye a kɔnɔko la, n’o ye kan ye min bɛ se ka kɛ cogo la min bɛ se ka wuli ka bɔ a nɔ na, ​​n’o ye an teri ɲuman ye, n’o ye Alexis Sellier ye . A bɛ CSS min sinsinnen bɛ sistɛmuw kan, o yiriwali teliya, ka nɔgɔya, ani ka diya.

Mun de bɛ o la?

I n’a fɔ CSS ka farankan, LESS bɛ fɛn caman sɛmɛntiya, mixins minnu bɛ se ka baara kɛ kokura ni kodew ye, baarakɛcogo minnu bɛ kɛ jatebɔ nɔgɔmanw kama, nesting, ani hali kulɛri baarakɛcogo.

Aw ye kunnafoni wɛrɛw sɔrɔ

CSS ka dɔgɔ

Aw ye taa siti ofisiyali la http://lesscss.org/ walasa ka kunnafoni wɛrɛw sɔrɔ.

Yɛlɛma-yɛlɛmaw

Kulɛriw ni pixel nafaw ɲɛnabɔli CSS kɔnɔ bɛ se ka kɛ dimi ye dɔɔnin, a ka c’a la, a falen bɛ kopi ni nɔrɔ la. A tɛ kɛ ni LESS ye hali ni o ye a sɔrɔ—aw bɛ kulɛriw walima pixel nafaw di i n’a fɔ fɛn caman bɛrɛbɛrɛ ani k’u Changer siɲɛ kelen.

Mixinw (Mixins).

O dankan-radius declarations saba i ka kan ka kɛ regular ol' CSS kɔnɔ? Sisan u bɛ jigin ka se zana kelen ma ni mixins dɛmɛ ye, kode snippets i bɛ se ka baara kɛ ni minnu ye kokura yɔrɔ o yɔrɔ.

Baarakɛcogo minnu bɛ kɛ

Aw ye aw ka grid, leading, ani super flexible kɛ ka jatebɔ kɛ on the fly ni operations. I ka sira caya, ka tila, ka fara a kan, ka bɔ a la ka taa CSS hakili la.

Scaffolding ani ɲɔgɔndanw

@bodyBackground @white Page kɔkanna kulɛri
@textColor @grayDark Sɛbɛnni kulɛri dafalen farikolo bɛɛ, kuncɛw ani fɛn wɛrɛw kama
@linkColor #08c Default link sɛbɛnni kulɛri
@linkColorHover darken(@linkColor, 15%) Default link sɛbɛnni hover kulɛri

Grid sitɛmu

@gridColumns 12 ye
@gridColumnWidth 60px ye
@gridGutterWidth 20px ye
@fluidGridColumnWidth 6,382978723% ye .
@fluidGridGutterWidth 2,127659574% ye .

Typografi (Typografi) (Typographie).

@sansFontFamily "Hɛlvetika Neue", Hɛlvetika, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monako, "Courier Nouveau", yɔrɔ kelen
@baseFontSize 13px ye A ka kan ka kɛ pixelw ye
@baseFontFamily @sansFontFamily
@baseLineHeight 18px ye A ka kan ka kɛ pixelw ye
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Tabali minnu bɛ yen

@tableBackground transparent
@tableBackgroundAccent #f9f9f9
@tableBackgroundHover #f5f5f5
@tableBorder ddd

Kulɛriw ye gris ye

@black #000 ye
@grayDarker #222
@grayDark #333 ye
@gray #555 ye
@grayLight #999 ye
@grayLighter #eee ye
@white #fff ye

Accent kulɛriw

@blue #049cdb ye
@green #46a546 ye
@red #9d261d ye
@yellow #ffc40d ye
@orange #f89406 ye
@pink #c3325f ye
@purple #7a43b6 ye

A yɔrɔw

Butɔnw

@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

Sɛbɛnw

@placeholderText @grayLight
@inputBackground @white
@inputBorder #ccc
@inputBorderRadius 3px
@inputDisabledBackground @grayLighter
@formActionsBackground #f5f5f5

Foroko jamanaw ni lasɔminiw

@warningText #c09853 ye
@warningBackground #f3edd2 ye
@errorText #b94a48 ye
@errorBackground #f2dede ye
@successText #468847 ye
@successBackground #dff0d8 ye
@infoText #3a87ad ye
@infoBackground #d9edf7 ye

Navbar ye

@navbarHeight 40px ye
@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

Dropdowns (Donkiliw).

@dropdownBackground @white
@dropdownBorder rgba(0,0,0,.2)
@dropdownLinkColor @grayDark
@dropdownLinkColorHover @white
@dropdownLinkBackgroundHover @linkColor
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Unité de héros

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Mixinw ko la

Mixin basigilenw

Mixin basigilen ye a jɔyɔrɔba ye include walima partial ye CSS yɔrɔ dɔ la. U sɛbɛnnen bɛ i n’a fɔ CSS kalansen ani u bɛ se ka wele yɔrɔ o yɔrɔ.

  1. . eleman { ye .
  2. . ɲɛfɔli jɛlen ();
  3. } ye .

Paramɛtiriw ka mixinw

Paramɛtiri mixin bɛ i n’a fɔ mixin basigilen dɔrɔn, nka a bɛ sɔn paramɛtiriw fana ma (o de y’a to a tɔgɔ in) ni nafa dafalenw ye minnu bɛ se ka sugandi.

  1. . eleman { ye .
  2. . dankan - radiyali ( 4px );
  3. } ye .

Aw bɛ aw yɛrɛ ta fara a kan nɔgɔya la

Bootstrap ka mixinw bɛɛ bɛ Se ka Lakodɔn mixins.less kɔnɔ, o ye .less file nafamaba ye min b’a To i bɛ se ka mixin dɔ Kɛ .less filew dɔ la kelen na baarakɛminɛnw kɔnɔ.

O la, taa ɲɛ ka baara kɛ ni minnu bɛ yen walima aw kana siga ka aw yɛrɛ ta fara a kan i mago bɛ cogo min na.

Mixinw bɛ sɔrɔ a kɔnɔ

Nafamafɛnw

Mixin (Mixin) ye Paramɛtɛrɛw Baarakɛcogo
.clearfix() foɲisi Aw bɛ fara bangebaga o bangebaga kan walasa ka flotw jɛya a kɔnɔ
.tab-focus() foɲisi Webkit focus style ani Firefox outline lamininenw waleya
.center-block() foɲisi Auto center a bloki-nivo element baaramargin: auto
.ie7-inline-block() foɲisi Baara kɛ ka fara a kan tuma bɛɛ display: inline-blockwalasa ka IE7 dɛmɛ sɔrɔ
.size() @height @width Aw bɛ teliya ka a janya ni a bonya sigi tigɛli kelen kan
.square() @size A bɛ jɔ .size()ka bonya ni janya sigi i n’a fɔ nafa kelen
.opacity() @opacity Aw bɛ, jateden dafalenw na, opacity kɛmɛsarada la (misali la, "50" walima "75") sigi.

Sɛbɛnw

Mixin (Mixin) ye Paramɛtɛrɛw Baarakɛcogo
.placeholder() @color: @placeholderText Sɛbɛnni kulɛri sigi sen placeholderkan dontaw kama

Typografi (Typografi) (Typographie).

Mixin (Mixin) ye Paramɛtɛrɛw Baarakɛcogo
#font > #family > .serif() foɲisi Aw bɛ element dɔ kɛ ni serif font stack ye
#font > #family > .sans-serif() foɲisi A’ ye element dɔ Kɛ ni sans-serif font stack ye
#font > #family > .monospace() foɲisi Aw bɛ fɛn dɔ Kɛ ni monospace font stack ye
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Aw bɛ sɛbɛnnibolo hakɛ, a girinya ani a ɲɛminɛcogo sigi nɔgɔya la
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Aw bɛ sɛbɛnni denbaya sigi serif la, ani ka bonya, girinya ani ɲɛmɔgɔya kɔlɔsi
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Sɛbɛnni denbaya sigi sans-serif la, ani ka bonya, girinya ani ɲɛmɔgɔya kɔlɔsi
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Sɛbɛnni denbaya sigi yɔrɔ kelen na, ani ka bonya, girinya ani ɲɛmɔgɔya kɔlɔsi

Grid sitɛmu

Mixin (Mixin) ye Paramɛtɛrɛw Baarakɛcogo
.container-fixed() foɲisi Aw bɛ minɛn dɔ dilan min bɛ cɛmancɛ la tilennen na walasa k’aw ka kɔnɔkow minɛ
#grid > .core() @gridColumnWidth, @gridGutterWidth Pixel grid system (minɛn, jiri, ani kuluw) labɛn ni kulu n ye ani x pixel wide gutter
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Aw bɛ kɛmɛsarada la grid system (jatebɔlan) dɔ labɛn ni n kolomaw ye ani x % jibolisiraw bonya
#grid > .input() @gridColumnWidth, @gridGutterWidth Pixel grid system (pixel grid system) labɛn inputfɛnw kama, jatebɔ kɛli padding ani dancɛw kan
.makeColumn @columns: 1, @offset: 0 Aw bɛ fɛn o fɛn divtigɛli kɛ ka kɛ jatebɔlan ye ni .span*kalanw tɛ

CSS3 ka nafolomafɛnw

Mixin (Mixin) ye Paramɛtɛrɛw Baarakɛcogo
.border-radius() @radius Aw bɛ fɛn dɔ nɔngɔnw lamini. A bɛ se ka kɛ nafa kelen ye walima nafa naani minnu bɛ danfara la yɔrɔ la
.box-shadow() @shadow Aw bɛ drop shadow dɔ fara element dɔ kan
.transition() @transition CSS3 wulicogo nɔ fara a kan (misali la, all .2s linear) .
.rotate() @degrees Aw bɛ fɛn dɔ wuli ni degere n ye
.scale() @ratio Aw bɛ fɛn dɔ sɛgɛsɛgɛ ka se a bonya fɔlɔ siɲɛ n ma
.translate() @x, @y Aw bɛ fɛn dɔ lamaga x ni y planw kan
.background-clip() @clip Fɛn dɔ kɔkanna tigɛ (nafa bɛ min na border-radius) .
.background-size() @size Ja minnu bɛ kɔfɛ, olu bonya kɔlɔsi CSS3 fɛ
.box-sizing() @boxmodel Aw bɛ kɛsu modɛli Changer ka ɲɛsin element dɔ ma (misali la, border-boxka ɲɛsin full-width inputma ) .
.user-select() @select Sɛbɛnni minnu bɛ ɲɛ dɔ kan, olu sugandili ni cursor ye
.backface-visibility() @visibility: visible Aw bɛ kɔnɔkow flickering bali ni aw bɛ baara kɛ ni CSS 3D fɛn caman tigɛli ye
.resizable() @direction: both Aw bɛ fɛn o fɛn kɛ a bonya bɛ se ka wuli kinin fɛ ani duguma
.content-columns() @columnCount, @columnGap: @gridGutterWidth Aw bɛ fɛn o fɛn kɔnɔkow kɛ ka baara kɛ ni CSS3 kuluw ye
.hyphens() @mode: auto CSS3 hyphenation waati min na i b'a fɛ (a bɛ sɔrɔ a kɔnɔ word-wrap: break-word) .

Backgrounds ani gradients

Mixin (Mixin) ye Paramɛtɛrɛw Baarakɛcogo
#translucent > .background() @color: @white, @alpha: 1 Aw bɛ fɛn dɔ di ni kɔkanna kulɛri ye min bɛ yeelen bɔ
#translucent > .border() @color: @white, @alpha: 1 Aw bɛ danyɔrɔ kulɛri translucide di element dɔ ma
#gradient > .vertical() @startColor, @endColor A’ ye cross-browser vertical background gradient dɔ dabɔ
#gradient > .horizontal() @startColor, @endColor A’ ye cross-browser horizontal background gradient dɔ dabɔ
#gradient > .directional() @startColor, @endColor, @deg A’ ye cross-browser ɲɛminɛcogo kɔkanna sɛgɛsɛgɛli dɔ da
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Aw bɛ cross-browser dɔ dabɔ min ɲɛ saba ye kɔkanna gradient ye
#gradient > .radial() @innerColor, @outerColor Aw bɛ cross-browser radial kɔkanna gradient dɔ da
#gradient > .striped() @color, @angle A’ ye cross-browser striped background gradient dɔ dabɔ
#gradientBar() @primaryColor, @secondaryColor A bɛ baara kɛ ni butɔni ye walasa ka dancɛ dɔ di min bɛ se ka wuli ka bɔ a nɔ na ani min ka di dɔɔnin
Kɔlɔsili: N’i bɛ samali ɲinini dɔ ci GitHub ma ni CSS sɛmɛntiyalen ye, i ka kan ka CSS lajɛ kokura nin fɛɛrɛ ninnu dɔ la kelen fɛ.

Baarakɛminɛn minnu bɛ kɛ ka fɛnw lajɛ ɲɔgɔn fɛ

Node ni makefile ye

LESS cikan-sɛbɛnni-minɛn, JSHint, Recess, ani uglify-js sigi diɲɛ kɔnɔ ni npm ye ni nin cikan in kɛli ye:

$ npm install -g ka dɔgɔ jshint recess uglify-js

Ni a sigilen don dɔrɔn i bɛ boli makeka bɔ i ka bootstrap directory ju la ani i bɛɛ bɛ labɛn.

O tɛmɛnen 'kɔ, n'i ye watchr Sìgi sen kan, i bɛ Se ka boli make watchka bootstrap jɔ kokura a yɛrɛma tuma o tuma n'i ye dosiye dɔ Labɛn bootstrap lib kɔnɔ (o tɛ wajibi ye, nɔgɔya fɛɛrɛ dɔrɔn de ye).

Cikan sɛrɛkili

LESS cikan-sɛbɛnni baarakɛminɛn in sigi Node fɛ ani ka nin cikan in kɛ:

$ lessc ./less/bootstrap.less > kafoɲɔgɔnya.css

Aw ye aw jija ka don --compresso cikan kɔnɔ ni aw b’a ɲini ka bayt dɔw mara!

Javascript ye

Less.js labanw telesarse ani ka sira don a la (ani Bootstrap) <head>.

<link rel = "stylesheet/less" href = "/sira/ka taa/bootstrap.less" > <script src = "/sira/ka taa/ka dɔgɔ.js" </script>  
 

Walasa ka .less filew lajɛ kokura, i k’u mara dɔrɔn k’i ka ɲɛ in doni kokura. Less.js b’u Lajɛ k’u Lakodɔn sigida marayɔrɔ la.

Mac app min tɛ ofisi ye

Mac app min tɛ ofisi ye, o bɛ .less filew ka ɲɛbilasɛbɛnw lajɛ ani ka kode lajɛ ka kɛ sigida filew ye .less file kɔlɔsilen maralen kɔfɛ.

N’i ​​b’a fɛ, i bɛ se ka fɛɛrɛw tigɛli kɛ appli kɔnɔ walasa ka automatique minifying ani directory min kɔnɔ, files compilés bɛ laban ka kɛ.

Mac porogaramu wɛrɛw

Crunch (kɛrɛnkɛrɛnnenya la).

Crunch ye LESS editor ani compiler ye min ɲɛ ka ɲi kosɛbɛ min jɔlen bɛ Adobe Air kan.

KodeKit ye

A dabɔra cɛ kelen fɛ ni Mac app min tɛ ofisi ye, CodeKit ye ​​Mac app ye min bɛ LESS, SASS, Stylus, ani CoffeeScript lajɛ.

Simple tɛ min na

Mac, Linux ani PC app min bɛ kɛ ka LESS filew lajɛ ani ka u fili. Ka fara o kan, source code bɛ GitHub kan .