LESS-ის გამოყენება Bootstrap-ით

დააკონფიგურირეთ და გააფართოვეთ Bootstrap LESS- ით, CSS წინასწარი პროცესორით, რათა ისარგებლოთ Bootstrap-ის CSS-ის შესაქმნელად გამოყენებული ცვლადებით, მიქსინებით და სხვა.

რატომ ნაკლები?

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 60 პიქსელი
@gridGutterWidth 20 პიქსელი
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

ტიპოგრაფია

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily მენლო, მონაკო, "Courier New", მონოსპეისი
@baseFontSize 13 პიქსელი პიქსელი უნდა იყოს
@baseFontFamily @sansFontFamily
@baseLineHeight 18 პიქსელი პიქსელი უნდა იყოს
@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

ნავიბარი

@navbarHeight 40 პიქსელი
@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-blockერთად IE7 მხარდაჭერის მისაღებად
.size() @height @width სწრაფად დააყენეთ სიმაღლე და სიგანე ერთ ხაზზე
.square() @size ეფუძნება .size()სიგანისა და სიმაღლის იმავე მნიშვნელობის დასაყენებლად
.opacity() @opacity დააყენეთ მთლიანი რიცხვებით გამჭვირვალობის პროცენტი (მაგ., "50" ან "75")

ფორმები

შეურიეთ Პარამეტრები გამოყენება
.placeholder() @color: @placeholderText დააყენეთ placeholderტექსტის ფერი შეყვანისთვის

ტიპოგრაფია

შეურიეთ Პარამეტრები გამოყენება
#font > #family > .serif() არცერთი გააკეთეთ ელემენტი 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 დააყენეთ შრიფტის ოჯახი monospace-ზე და აკონტროლეთ ზომა, წონა და წამყვანი

ბადის სისტემა

შეურიეთ Პარამეტრები გამოყენება
.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 რომელიმე ამ მეთოდით.

ინსტრუმენტები შედგენისთვის

კვანძი მაკიაფილით

დააინსტალირეთ LESS ბრძანების ხაზის შემდგენელი, JSHint, Recess და uglify-js გლობალურად npm-ით შემდეგი ბრძანების გაშვებით:

$ npm install -g ნაკლები jshint recess uglify-js

ინსტალაციის შემდეგ უბრალოდ გაუშვით makeთქვენი bootstrap დირექტორიას ძირიდან და ყველაფერი მზად ხართ.

გარდა ამისა, თუ თქვენ დაინსტალირებული გაქვთ watchr , თქვენ შეგიძლიათ აწარმოოთ make watchbootstrap ავტომატურად ხელახლა აშენება ყოველ ჯერზე, როდესაც თქვენ შეცვლით ფაილს bootstrap lib-ში (ეს არ არის საჭირო, უბრალოდ მოსახერხებელი მეთოდია).

ბრძანების ხაზი

დააინსტალირეთ LESS ბრძანების ხაზის ინსტრუმენტი Node-ის მეშვეობით და გაუშვით შემდეგი ბრძანება:

$ 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 არის Mac აპი, რომელიც აგროვებს LESS, SASS, Stylus და CoffeeScript.

უბრალო

Mac-ის, Linux-ისა და PC-ის აპი LESS ფაილების შედგენისთვის გადაიტანეთ და ჩამოაგდეთ. გარდა ამისა, წყაროს კოდი არის GitHub-ზე .