ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ LESS ବ୍ୟବହାର କରିବା |

ବୁଟଷ୍ଟ୍ରାପ୍ ର CSS ନିର୍ମାଣ ପାଇଁ ଭେରିଏବଲ୍, ମିକ୍ସିନ୍ ଏବଂ ଅଧିକ ବ୍ୟବହାର କରାଯାଉଥିବା LESS , CSS ପ୍ରିପ୍ରୋସେସର୍ ସହିତ ବୁଟଷ୍ଟ୍ରାପ୍ କଷ୍ଟୋମାଇଜ୍ ଏବଂ ବିସ୍ତାର କର |

କାହିଁକି କମ?

ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଏହାର ମୂଳରେ LESS ସହିତ ନିର୍ମିତ, ଏକ ଗତିଶୀଳ ଷ୍ଟାଇଲ୍ ଶୀଟ୍ ଭାଷା ଆମର ଭଲ ବନ୍ଧୁ ଆଲେକ୍ସସ୍ ସେଲିଅର୍ ଦ୍ୱାରା ସୃଷ୍ଟି | ଏହା ସିଷ୍ଟମ-ଆଧାରିତ CSS କୁ ଶୀଘ୍ର, ସହଜ ଏବଂ ଅଧିକ ମଜାଳିଆ କରିଥାଏ |

କ’ଣ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି?

CSS ର ଏକ ବିସ୍ତାର ଭାବରେ, LESS ରେ ଭେରିଏବଲ୍, କୋଡ୍ ର ପୁନ us ବ୍ୟବହାର ଯୋଗ୍ୟ ସ୍ନିପେଟ୍ ପାଇଁ ମିକ୍ସନ୍ସ, ସରଳ ଗଣିତ ପାଇଁ କାର୍ଯ୍ୟ, ବସା, ଏବଂ ରଙ୍ଗ କାର୍ଯ୍ୟ ମଧ୍ୟ ଅନ୍ତର୍ଭୁକ୍ତ |

ଅଧିକ ସିଖନ୍ତୁ

କମ CSS |

ଅଧିକ ଜାଣିବା ପାଇଁ http://lesscss.org/ ରେ ଅଫିସିଆଲ୍ ୱେବସାଇଟ୍ ପରିଦର୍ଶନ କରନ୍ତୁ |

ଭେରିଏବଲ୍ |

CSS ରେ ରଙ୍ଗ ଏବଂ ପିକ୍ସେଲ ମୂଲ୍ୟ ପରିଚାଳନା କରିବା ଟିକିଏ ଯନ୍ତ୍ରଣା ହୋଇପାରେ, ସାଧାରଣତ copy କପି ଏବଂ ପେଷ୍ଟରେ ପରିପୂର୍ଣ୍ଣ | ଯଦିଓ LESS ସହିତ ନୁହେଁ - ରଙ୍ଗ କିମ୍ବା ପିକ୍ସେଲ ମୂଲ୍ୟକୁ ଭେରିଏବଲ୍ ଭାବରେ ନ୍ୟସ୍ତ କରନ୍ତୁ ଏବଂ ଥରେ ପରିବର୍ତ୍ତନ କରନ୍ତୁ |

ମିକ୍ସନ୍ସ |

ସେହି ତିନୋଟି ସୀମା-ରେଡିଓ ଘୋଷଣା ତୁମେ ନିୟମିତ ol 'CSS ରେ କରିବା ଆବଶ୍ୟକ? ବର୍ତ୍ତମାନ ସେମାନେ ମିଶ୍ରଣ, କୋଡ୍ ର ସ୍ନିପେଟ୍ ସାହାଯ୍ୟରେ ଗୋଟିଏ ଧାଡିରେ ଅଛନ୍ତି ଯାହାକୁ ଆପଣ ଯେକ anywhere ଣସି ସ୍ଥାନରେ ପୁନ use ବ୍ୟବହାର କରିପାରିବେ |

ଅପରେସନ୍ସ

ଅପରେସନ୍ ସହିତ ଫ୍ଲାଇରେ ଗଣିତ କରି ଆପଣଙ୍କର ଗ୍ରୀଡ୍, ଅଗ୍ରଣୀ ଏବଂ ଅଧିକ ସୁପର ଫ୍ଲେକ୍ସିବଲ୍ କରନ୍ତୁ | CSS ପରିମଳ ପାଇଁ ତୁମର ପଥକୁ ବହୁଗୁଣ, ବିଭାଜନ, ଯୋଡ, ଏବଂ ବିସ୍ତାର କର |

ସ୍କାଫୋଲ୍ଡିଂ ଏବଂ ଲିଙ୍କ୍ |

@bodyBackground @white ପୃଷ୍ଠା ପୃଷ୍ଠଭୂମି ରଙ୍ଗ |
@textColor @grayDark ସମଗ୍ର ଶରୀର, ହେଡିଙ୍ଗ୍ ଏବଂ ଅଧିକ ପାଇଁ ଡିଫଲ୍ଟ ପାଠ୍ୟ ରଙ୍ଗ |
@linkColor #08c ଡିଫଲ୍ଟ ଲିଙ୍କ୍ ପାଠ୍ୟ ରଙ୍ଗ |
@linkColorHover darken(@linkColor, 15%) ଡିଫଲ୍ଟ ଲିଙ୍କ୍ ଟେକ୍ସଟ୍ ହୋଭର ରଙ୍ଗ |

ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ |

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

ଟାଇପୋଗ୍ରାଫି |

@sansFontFamily "ହେଲଭେଟିକା ନେଉ", ହେଲଭେଟିକା, ଆରିଆଲ୍, ସାନ୍ସ-ସେରିଫ୍ |
@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 # 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 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

ମିଶ୍ରଣ ବିଷୟରେ |

ମ Basic ଳିକ ମିଶ୍ରଣ |

ଏକ ମ basic ଳିକ ମିଶ୍ରଣ ହେଉଛି CSS ର ଏକ ସ୍ନିପେଟ୍ ପାଇଁ ଏକ ଅନ୍ତର୍ଭୂକ୍ତ କିମ୍ବା ଆଂଶିକ | ସେଗୁଡିକ ଏକ CSS ଶ୍ରେଣୀ ପରି ଲେଖା ହୋଇଛି ଏବଂ ଯେକ anywhere ଣସି ସ୍ଥାନକୁ ଡକାଯାଇପାରିବ |

  1. ଉପାଦାନ {
  2. clearfix ();
  3. }

ପାରାମେଟ୍ରିକ୍ ମିଶ୍ରଣ |

ଏକ ପାରାମେଟ୍ରିକ୍ ମିକ୍ସିନ୍ ଏକ ମ basic ଳିକ ମିଶ୍ରଣ ପରି, କିନ୍ତୁ ଏହା ଇଚ୍ଛାଧୀନ ଡିଫଲ୍ଟ ମୂଲ୍ୟ ସହିତ ପାରାମିଟରଗୁଡିକ (ତେଣୁ ନାମ) ମଧ୍ୟ ଗ୍ରହଣ କରେ |

  1. ଉପାଦାନ {
  2. ସୀମା - ବ୍ୟାସାର୍ଦ୍ଧ ( 4px );
  3. }

ସହଜରେ ଆପଣଙ୍କର ନିଜର ଯୋଗ କରନ୍ତୁ |

ପ୍ରାୟ ସମସ୍ତ ବୁଟଷ୍ଟ୍ରାପ୍ ର ମିଶ୍ରଣଗୁଡିକ mixins.less ରେ ଗଚ୍ଛିତ ହୋଇଛି, ଏକ ଚମତ୍କାର ଉପଯୋଗୀତା।

ତେଣୁ, ଆଗକୁ ଯାଆନ୍ତୁ ଏବଂ ବିଦ୍ୟମାନଗୁଡିକୁ ବ୍ୟବହାର କରନ୍ତୁ କିମ୍ବା ଆପଣ ଆବଶ୍ୟକ କରୁଥିବା ପରି ନିଜର ଯୋଗ କରିବାକୁ ମୁକ୍ତ ମନେ କରନ୍ତୁ |

ମିଶ୍ରିତ ମିଶ୍ରଣ ଅନ୍ତର୍ଭୁକ୍ତ |

ଉପଯୋଗିତା

ମିକ୍ସିନ୍ | ପାରାମିଟରଗୁଡିକ ବ୍ୟବହାର
.clearfix() କିଛି ନୁହେଁ | ଭିତରର ଭାସମାନ ସଫା କରିବାକୁ ଯେକ any ଣସି ପିତାମାତାଙ୍କୁ ଯୋଡନ୍ତୁ |
.tab-focus() କିଛି ନୁହେଁ | ୱେବକାଇଟ୍ ଫୋକସ୍ ଶ style ଳୀ ଏବଂ ଫାୟାରଫକ୍ସ ବାହ୍ୟରେଖା ପ୍ରୟୋଗ କରନ୍ତୁ |
.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() କିଛି ନୁହେଁ | ଏକ ଉପାଦାନକୁ ଏକ ସାନ୍ସ-ସରିଫ୍ ଫଣ୍ଟ୍ ଷ୍ଟାକ ବ୍ୟବହାର କରନ୍ତୁ |
#font > #family > .monospace() କିଛି ନୁହେଁ | ଏକ ଉପାଦାନକୁ ଏକ ମୋନୋସ୍ପେସ୍ ଫଣ୍ଟ୍ ଷ୍ଟାକ ବ୍ୟବହାର କରନ୍ତୁ |
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight ଫଣ୍ଟ ଆକାର, ଓଜନ ଏବଂ ଅଗ୍ରଣୀକୁ ସହଜରେ ସେଟ୍ କରନ୍ତୁ |
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight ଫଣ୍ଟ୍ ପରିବାରକୁ ସେରିଫ୍ ସେଟ୍ କରନ୍ତୁ, ଏବଂ ଆକାର, ଓଜନ, ଏବଂ ଅଗ୍ରଣୀ ନିୟନ୍ତ୍ରଣ କରନ୍ତୁ |
#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 କ୍ଲାସ୍ ବିନା ଯେକ any ଣସି 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 ଟ୍ରାନ୍ସଫର୍ମ ବ୍ୟବହାର କରିବା ସମୟରେ ବିଷୟବସ୍ତୁର ick ଲକକୁ ରୋକନ୍ତୁ |
.resizable() @direction: both ଡାହାଣ ଏବଂ ତଳ ଭାଗରେ ଯେକ element ଣସି ଉପାଦାନକୁ ଆକାର ପରିବର୍ତ୍ତନ କରନ୍ତୁ |
.content-columns() @columnCount, @columnGap: @gridGutterWidth ଯେକ any ଣସି ଉପାଦାନର ବିଷୟବସ୍ତୁ 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 ଏକ ଗ୍ରେଡିଏଣ୍ଟ୍ ଏବଂ ସାମାନ୍ୟ ଗା dark ଼ ସୀମା ନ୍ୟସ୍ତ କରିବାକୁ ବଟନ୍ ପାଇଁ ବ୍ୟବହୃତ ହୁଏ |
ଟିପନ୍ତୁ: ଯଦି ଆପଣ ପରିବର୍ତ୍ତିତ CSS ସହିତ GitHub କୁ ଏକ ଟାଣ ଅନୁରୋଧ ଦାଖଲ କରୁଛନ୍ତି, ତେବେ ଆପଣଙ୍କୁ ଏହି ପଦ୍ଧତିଗୁଡ଼ିକ ମଧ୍ୟରୁ କ through ଣସିଟି ମାଧ୍ୟମରେ CSS କୁ ପୁନ omp ସଂକଳନ କରିବାକୁ ପଡିବ |

ସଂକଳନ ପାଇଁ ଉପକରଣଗୁଡ଼ିକ |

ମେକ୍ଫାଇଲ୍ ସହିତ ନୋଡ୍ |

ନିମ୍ନଲିଖିତ ନିର୍ଦ୍ଦେଶକୁ ଚଲାଇ npm ସହିତ LESS କମାଣ୍ଡ୍ ଲାଇନ୍ କମ୍ପାଇଲର୍, JSHint, Recess, ଏବଂ uglify-js ସଂସ୍ଥାପନ କରନ୍ତୁ:

$ npm ଇନଷ୍ଟଲ୍ -g କମ୍ jshint recess uglify-js |

ଥରେ ଇନଷ୍ଟଲ୍ ହୋଇଗଲେ କେବଳ makeଆପଣଙ୍କର ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଡିରେକ୍ଟୋରୀର ମୂଳରୁ ଚଲାନ୍ତୁ ଏବଂ ଆପଣ ସମସ୍ତେ ସେଟ୍ ହୋଇସାରିଛନ୍ତି |

ଅତିରିକ୍ତ ଭାବରେ, ଯଦି ଆପଣଙ୍କର ୱାଚର୍ ସଂସ୍ଥାପିତ ହୋଇଛି, ଆପଣ make watchପ୍ରତ୍ୟେକ ଥର ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ଲିବରେ ଏକ ଫାଇଲ୍ ଏଡିଟ୍ କରିବା ସମୟରେ ବୁଟ୍ ଷ୍ଟ୍ରାପ୍ ସ୍ୱୟଂଚାଳିତ ଭାବରେ ପୁନ bu ନିର୍ମାଣ କରିବାକୁ ଚଲାଇପାରନ୍ତି (ଏହା ଆବଶ୍ୟକ ନୁହେଁ, କେବଳ ଏକ ସୁବିଧା ପଦ୍ଧତି) |

ନିର୍ଦ୍ଦେଶନାମା |

ନୋଡ୍ ମାଧ୍ୟମରେ LESS କମାଣ୍ଡ୍ ଲାଇନ୍ ଟୁଲ୍ ସଂସ୍ଥାପନ କରନ୍ତୁ ଏବଂ ନିମ୍ନଲିଖିତ ନିର୍ଦ୍ଦେଶକୁ ଚଲାନ୍ତୁ:

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

--compressଯଦି ଆପଣ କିଛି ବାଇଟ୍ ସଞ୍ଚୟ କରିବାକୁ ଚେଷ୍ଟା କରୁଛନ୍ତି ତେବେ ସେହି ନିର୍ଦ୍ଦେଶରେ ଅନ୍ତର୍ଭୂକ୍ତ କରିବାକୁ ନିଶ୍ଚିତ ହୁଅନ୍ତୁ !

ଜାଭାସ୍କ୍ରିପ୍ଟ

ସର୍ବଶେଷ Less.js ଡାଉନଲୋଡ୍ କରନ୍ତୁ ଏବଂ ଏଥିରେ ଥିବା ପଥ (ଏବଂ ବୁଟଷ୍ଟ୍ରାପ୍) ଅନ୍ତର୍ଭୂକ୍ତ କରନ୍ତୁ <head>|

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

.ହୀନ ଫାଇଲଗୁଡିକର ପୁନ omp ସଂକଳନ କରିବାକୁ, କେବଳ ସେଭ୍ କରନ୍ତୁ ଏବଂ ଆପଣଙ୍କର ପୃଷ୍ଠା ପୁନ o ଲୋଡ୍ କରନ୍ତୁ | Less.js ସେଗୁଡ଼ିକୁ ସଂକଳନ କରେ ଏବଂ ସ୍ଥାନୀୟ ଷ୍ଟୋରେଜ୍ ରେ ଷ୍ଟୋର୍ କରେ |

ଅନ of ପଚାରିକ ମ୍ୟାକ୍ ଆପ୍ |

ଅଣଅନୁଷ୍ଠାନିକ ମ୍ୟାକ୍ ଆପ୍ .less ଫାଇଲଗୁଡିକର ଡିରେକ୍ଟୋରୀଗୁଡିକ ଦେଖେ ଏବଂ ଏକ ଦେଖାଯାଇଥିବା .less ଫାଇଲ୍ ର ପ୍ରତ୍ୟେକ ସେଭ୍ ପରେ କୋଡ୍ କୁ ସ୍ଥାନୀୟ ଫାଇଲ୍ ରେ କମ୍ପାଇଲ୍ କରେ |

ଯଦି ଆପଣ ପସନ୍ଦ କରନ୍ତି, ଆପଣ ସ୍ୱୟଂଚାଳିତ ମାଇନିଫିକେସନ୍ ପାଇଁ ଆପରେ ଥିବା ପସନ୍ଦଗୁଡ଼ିକୁ ଟୋଗଲ୍ କରିପାରିବେ ଏବଂ ସଙ୍କଳିତ ଫାଇଲଗୁଡିକ କେଉଁ ଡିରେକ୍ଟୋରୀରେ ଶେଷ ହୁଏ |

ଅଧିକ ମ୍ୟାକ୍ ଆପ୍ |

କ୍ରଞ୍ଚ |

କ୍ରଞ୍ଚ ହେଉଛି ଆଡୋବ ଏୟାରରେ ନିର୍ମିତ ଏକ ସୁନ୍ଦର ଦେଖାଯାଉଥିବା LESS ଏଡିଟର୍ ଏବଂ କମ୍ପାଇଲର୍ |

CodeKit

ଅଣଅନୁଷ୍ଠାନିକ ମ୍ୟାକ୍ ଆପ୍ ସହିତ ସମାନ ବ୍ୟକ୍ତିଙ୍କ ଦ୍ ated ାରା ସୃଷ୍ଟି, କୋଡକିଟ୍ ହେଉଛି ଏକ ମ୍ୟାକ୍ ଆପ୍ ଯାହା LESS, SASS, Stylus, ଏବଂ CoffeeScript ସଂକଳନ କରେ |

ସରଳ

LESS ଫାଇଲଗୁଡିକର ଡ୍ରାଗ୍ ଏବଂ ଡ୍ରପ୍ ସଙ୍କଳନ ପାଇଁ ମ୍ୟାକ୍, ଲିନକ୍ସ, ଏବଂ PC ଆପ୍ | ଏହା ସହିତ, ଉତ୍ସ କୋଡ୍ GitHub ରେ ଅଛି |