Bootstrap ашиглан LESS ашиглах

Bootstrap-ийн CSS-ийг бүтээхэд ашигладаг хувьсагч, холигч болон бусад зүйлсийн давуу талыг ашиглахын тулд Bootstrap-г CSS-ийн урьдчилсан процессор LESS- ээр тохируулж, өргөтгөнө үү.

Яагаад БАГА гэж?

Bootstrap нь бидний сайн найз Алексис Селлиерийн бүтээсэн динамик загварын хэл болох LESS-ээр хийгдсэн . Энэ нь системд суурилсан CSS-ийг илүү хурдан, хялбар, хөгжилтэй болгодог.

Юу багтсан бэ?

CSS-ийн өргөтгөл болох LESS нь хувьсагч, дахин ашиглах боломжтой кодын хэсэгчилсэн хольц, энгийн математикийн үйлдлүүд, үүрлэх, бүр өнгөт функцуудыг агуулдаг.

Илүү их судла

БАГА CSS

Дэлгэрэнгүй мэдээллийг http://lesscss.org/ албан ёсны вэбсайтад зочилно уу .

Хувьсагч

CSS-ийн өнгө, пикселийн утгыг удирдах нь ихэвчлэн хуулж, буулгахад бага зэрэг зовлонтой байдаг. LESS-тэй биш - өнгө эсвэл пикселийн утгыг хувьсагч болгон оноож, нэг удаа өөрчил.

Холимог

Эдгээр гурван хилийн радиусын мэдэгдлийг та ердийн CSS дээр хийх ёстой юу? Одоо тэд хаана ч дахин ашиглах боломжтой кодын хэсэг болох холимогуудын тусламжтайгаар нэг мөр болж байна.

Үйл ажиллагаа

Тооцооллын дагуу үйлдлээр тооцоогоо хийснээр сүлжээгээ, тэргүүлэгч, илүү уян хатан болго. Үржүүлэх, хуваах, нэмэх, хасах замаар CSS-ийн эрүүл ухаанд хүрэх боломжтой.

Шатны шат ба холбоосууд

@bodyBackground @white Хуудасны дэвсгэр өнгө
@textColor @grayDark Үндсэн текстийн үндсэн өнгө, гарчиг гэх мэт
@linkColor #08c Өгөгдмөл холбоосын текстийн өнгө
@linkColorHover darken(@linkColor, 15%) Өгөгдмөл холбоосын текстийг зөөвөрлөх өнгө

Сүлжээний систем

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

Типографи

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Менло, Монако, "Courier New", monospace
@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 #ээээ
@white #fff

Өргөлтийн өнгө

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

Бүрэлдэхүүн хэсгүүд

Товчлуурууд

@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 #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

Navbar

@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-ийн хэсэгчилсэн хэсэг юм. Тэдгээр нь яг CSS анги шиг бичигдсэн бөгөөд хаана ч дуудаж болно.

  1. . элемент {
  2. . тодорхой засах ();
  3. }

Параметрийн холимог

Параметрийн хольц нь үндсэн хольцтой адил боловч нэмэлт өгөгдмөл утгууд бүхий параметрүүдийг (иймээс нэр) хүлээн авдаг.

  1. . элемент {
  2. . хил - радиус ( 4px );
  3. }

Өөрийгөө хялбархан нэмнэ үү

Bootstrap-ийн бараг бүх холимгууд нь mixins.less-д хадгалагддаг бөгөөд энэ нь танд багаж хэрэгслийн .less файлуудын аль нэгэнд mixin ашиглах боломжийг олгодог .less файлын гайхалтай хэрэгсэл юм.

Тиймээс, одоо байгаа зүйлсийг ашиглана уу эсвэл шаардлагатай бол өөрийнхөөрөө нэмж болно.

Холимог агуулсан

Хэрэглээ

Холимог Параметрүүд Хэрэглээ
.clearfix() аль нь ч биш Дотор хөвөгчийг арилгахын тулд дурын эцэг эхэд нэмнэ үү
.tab-focus() аль нь ч биш Webkit фокусын хэв маягийг хэрэглэж, Firefox-ийн тоймыг дугуйл
.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() аль нь ч биш Элементийг сериф үсгийн стек ашиглана
#font > #family > .sans-serif() аль нь ч биш Элементийг sans-serif үсгийн стек ашиглан хийнэ үү
#font > #family > .monospace() аль нь ч биш Элементийг 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 багана ашиглана
.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 Градиент болон бага зэрэг бараан хүрээ оноох товчлууруудад ашигладаг
Жич: Хэрэв та GitHub-д өөрчилсөн CSS-тэй татах хүсэлт илгээж байгаа бол эдгээр аргуудын аль нэгээр дамжуулан CSS-г дахин эмхэтгэх ёстой .

Эмхэтгэх хэрэгслүүд

Makefile бүхий зангилаа

LESS командын мөр хөрвүүлэгч, JSHint, Recess, uglify-js-ийг дэлхий даяар npm ашиглан дараах тушаалыг ажиллуулж суулгаарай.

$ npm суулгах -g бага jshint завса��лага uglify-js

Суулгасны дараа л ажиллуулmake bootstrap лавлахын үндсэн хэсгээс ажиллуулаад бүх зүйл бэлэн болно.

Нэмж хэлэхэд, хэрэв танд watchr суулгасан make watchбол bootstrap lib доторх файлыг засварлах бүртээ bootstrap-ийг автоматаар дахин бүтээхээр ажиллаж болно (энэ нь шаардлагагүй, зүгээр л хялбар арга юм).

Тушаалын мөр

Зангилаагаар дамжуулан LESS командын мөрийн хэрэгслийг суулгаад дараах тушаалыг ажиллуулна уу:

$ lessc ./less/bootstrap.less > bootstrap.css

--compressХэрэв та хэдэн байт хадгалах гэж байгаа бол энэ командыг оруулахаа мартуузай !

Javascript

Хамгийн сүүлийн үеийн Less.js-г татаж аваад түүнд хүрэх замыг (болон Bootstrap) дотор <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

.less файлуудыг дахин эмхэтгэхийн тулд тэдгээрийг хадгалаад хуудсыг дахин ачааллахад л болно. Less.js тэдгээрийг эмхэтгэж, дотоод санах ойд хадгалдаг.

Албан бус Mac програм

Албан бус Mac програм нь .less файлуудын лавлахуудыг үзэж, үзсэн .less файлыг хадгалсны дараа кодыг дотоод файлууд руу хөрвүүлдэг.

Хэрэв та хүсвэл програмын тохиргоог автоматаар жижигрүүлэх, хөрвүүлсэн файлууд аль директорт орохыг өөрчлөх боломжтой.

Бусад Mac програмууд

Шаржигнуур

Crunch бол Adobe Air дээр бүтээгдсэн LESS засварлагч, хөрвүүлэгч юм.

CodeKit

Албан бус Mac программтай нэг залуугийн бүтээсэн CodeKit нь LESS, SASS, Stylus, CoffeeScript-ийг нэгтгэдэг Mac програм юм.

Энгийн

Mac, Linux болон PC-ийн програмууд нь чирж, буулгах горимд БАГА файлуудыг эмхэтгэхэд зориулагдсан. Дээрээс нь эх код нь GitHub дээр байна.