大前端學習筆記整理【四】LESS基礎

時間 2019-11-12

標籤前端學習筆記整理基礎简体版

原文原文鏈接

第一次接觸CSS預編譯，而後對比後發現其實less的上手容易度確實比sass高很多，再加上公司項目也是使用的less。因此想一想仍是根據網上的各類教程，整理出來了一些比較基礎的、並且比較能讓咱們這種初學者快速上手的例子。javascript

菜雞一隻，代碼要是有錯或者表達不清的地方，請各位批評指正！css

那麼，如今咱們就開始正文部分了。html

 
 1.什麼是less 

  LESS是一種動態的樣式語言。Less擴展了CSS的動態行爲，好比說，設置變量（Variables）、混合書寫模式（mixins）、操做 

  （operations）和功能（functions）等等，最棒的是，Less使用了現有的CSS語法，也就是說，你能夠直接把你現成的樣式文 

  件「style.css」直接改爲「style.less」，他也能正常工做。如： 
  
  <link rel="stylesheet/less" href="less/style.less" />

  Less如今能夠在客戶端（如：IE+,Webkit,Firefox）和服務器（如node.js）上運行。前面也說過Less是CSS的一種擴展，他不但 

  向後兼容，並且在現有的CSS語法基礎上增長許多額外的功能。 

 
 1.1 如何使用less 

  要成功的使用Less，須要一個腳本的支持，這個腳本咱們把他叫作less.js。而後在頁面中引用便可 

 
  <link rel="stylesheet/less" type="text/css" href="less/styles.less">
　　<script src="js/less.js" type="text/javascript"></script>

 
 2.LESS包含了什麼？ 

  Less具體有哪些東東呢？Less要CSS語法的基礎上進行了擴展，主要包含： Variables(變量)， 

  Mixins(混入)、Nested Rules(嵌套規則)、Functions & Operations(函數與動做)等等 

  而後，須要解釋下一些在LESS中經常使用的內容： 

 
 2.一、變量——Variables 

  Less中的變量充許你在樣式中的某個地方對經常使用的值進行定義，而後應用到樣式中，這樣只要改變你定義的變量參數值就能夠了 

 
  
/*======== 定義變量===========*/
@color: #4d926f;
/*======== 應用到元素中 ========*/
#header {
    color: @color;
}
h2 {
    color: @color;
}
 
 

  編譯爲CSS後： 
  
  
/*======= Less 編譯成 css ======*/
#header {
    color: #4d926f;
}
h2 {
    color: #4d926f;
}
 
 

  Less中的變量還具備計算功能，如： 

 
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111;
#header {
    color: @light-blue;
}

  編譯爲CSS後： 
  
  #header {color: #6c94be;}

  須要注意的是，less的變量實際上應該爲 
 常量，不存在二次賦值的狀況，以下所示　　 
  
  @color: #253636;
@highlight: "color";
@color: #ff3636;
#header {color: @highlight;}
 
 

  可是編譯後發現：　　 
 
  #header{color:#ff3636}
 
 　　代碼中能夠看出，最後一次定義的@color覆蓋了前面的內容

 
 2.2 混入——Mixins 

  混入其實就是一種嵌套，它充許你將一個類嵌入到另外一個類中，而被嵌入的這個類也稱爲是一個變量。換句話說，你能夠用一個 

  類定義CSS，而後把整個爲看成一個變量來使用，嵌入到另外一人類中看成他的屬性；另外混入也像一個帶有參數的functions，如 

  下面的例子： 
 
 
  
/*========= 定義一個類 ===========*/
.roundedCorners(@radius:5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}
/*＝＝＝＝＝＝＝＝＝＝ 定義的類應用到另個一個類中 ＝＝＝＝＝＝＝＝＝＝＝*/
＃header {
    .roundedCorners;
}
#footer {
    .roundedCorners(10px);
}
 
 

  編譯後的CSS以下： 
 
 
  #header {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
}
#footer {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
}
 
 

  須要注意一點：這樣任何CSS的類或ID下的樣式均可以看成 
 變量，使用混入模式用來看成另外一個元素的屬性值。 

  混入(Mixin)有一個名詞叫「混入參數（Parametric Mixins）」，上面也說過。Less具備一個特殊類型的規則集，那就是 
 一個類 

 
 能夠看成另外一個元素的屬生值，而且還能夠接受其本身的參數，咱們來看一個典型的實例： 

 
  /*========== 定義一個規則，而且不設置默認參數值 ============*/
.borderRadius(@radius){
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}
/*============ 應用到元素中 ============*/
#header {
    .borderRadius(10px); /*把10px傳給變量@radius*/
}
.btn {
    .borderRadius(3px);/*把3px傳給變量@radius*/
}
 
 

  編譯後CSS代碼以下： 

 
  #header {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.btn {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
 
 

  咱們還能夠給Mixins的參數定義一人默認值，如 

 
  .borderRadius(@radius:5px){
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}
.btn {
    .borderRadius;
}
 
 

  編譯後的CSS以下： 

 
  .btn {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
 
 

  還有一種方法就是給Mixins不定我任何參數，特別是在你想隱藏輸出的CSS規則，但又想在別的規則中包含他的屬性，使用這種 

  不帶參數的Mixins將很是有用的，咱們來看一段代碼： 

 
  .wrap(){
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}
pre {
    .wrap;
}
 
 
編譯後的CSS以下：前端
 
  pre {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}
 
 
Mixins還有一個重要的變量：@arguments。@arguments在Mixins中具是一個很特別的參數，當Mixins引用這個參數時，他java

  將表示全部的變量，當你不想處理個別的參數時，這個將頗有用，咱們來看一個陰影的實例： 

 
  .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}
#header {
    .boxShadow(2px,2px,3px,#f36);
}
 
 

  再看下編譯後的CSS： 

 
  #header {
    -moz-box-shadow: 2px 2px 3px #FF36;
    -webkit-box-shadow: 2px 2px 3px #FF36;
    box-shadow: 2px 2px 3px #FF36;
}
 
 

 
 三、嵌套規則——Nested Rules 

  嵌套規則主要是針對一多層元素的樣式規則寫法，之前咱們在多層元素中寫樣式，要麼從頭選下來，要麼另外給這個元素加上類 

  名或id名，但在Less中咱們不須要這樣操做了，咱們只要使用他的嵌套規則就能夠完成，咱們來看一個簡單的實例： 

  簡單的頁面結構以下： 

 
  <div id="header">
<h1><a href="">W3cplus</a></h1>
<p>記述前端那些事——引領Web前沿</p>
</div>

  而後接下來看看less部分： 

 
  #header {
    display: inline;
    float: left;
    h1 {
        font-size: 26px;
        font-weight: bold;
    a {
        text-decoration: none;
        color: #f36;
        &:hover {
            text-decoration: underline;
            color: #63f;
           }
        }
    }
    p {
        font-size: 12px;
    }
}                    
 
 

  來看看編譯以後的代碼： 

 
  #header {
    display: inline;
    float: left;
}
#header h1 {
    font-size: 26px;
    font-weight: bold;
}
#header h1 a {
    color: #FF3366;
    text-decoration: none;
}
#header h1 a:hover {
    color: #6633FF;
    text-decoration: underline;
}
#header p {
    font-size: 12px;
}
 
 

  使用Less的嵌套規則讓你的CSS代碼更簡潔，由於它的寫法就是模仿HTML的DOM結構來寫的。 

  從上在的實例代碼中，都很清楚的瞭解到，嵌套規則可讓咱們寫樣式時能像DOM樹形那樣有結構的去寫代碼，從而減了選 

  擇器的層級關係，更主要的是這樣使用咱們的代碼更簡潔，更具備閱讀性，這種嵌套規則對咱們操做僞元素更爲方便和重要， 

  如:hover，:link,:focus等，看下實例： 

 
  a {
    color: red;
    text-decoration: none;
    &:hover {
        color: blue;
        text-decoration: underline;
    }
}
 
 

  編譯後的CSS以下： 

 
  a {
    color: red;
    text-decoration: none;
}
a:hover {
    color: blue;
    text-decoration: underline;
}
 
 

  注意了，這裏的&很重要，在Less中嵌套書寫中有沒有&區別是徹底不同的效果，有&時解析的是同一個元素或此元素的 

  僞類，沒有&解析是後代元素： 

 
  #header {
    &.fl{
        float: left;
    }
    .mln {
        margin-left: 0;
    }
}
 
 

  而後看下編譯後的CSS： 

 
  #header.fl{float: left;}
#header .mln {margin-left: 0;}

 
 四、Functions & Operations 

  其實這個部分的內容我尚未徹底理解透，可是在項目有不少地方都在使用而且不少博文中也有說起到，因此我以爲雖然暫時沒法理解，可是仍是要做好記錄。書讀百遍，其義自見，代碼和理論這種東西也不例外。作好記錄而且時常複習下，再結合工做中的使用，這種問題就會慢慢的由本身的答案 

  這兩個功能頗有意思的。在咱們平時的樣式中，有不少元素的屬性都具備必定的比例或倍數。那麼這兩個恰好能夠幫咱們實現這 

  方面的功能，首先來看Operations（直譯「動做」）他可讓你對元素的屬性值，顏色進行四則運算：加、減、乘、除。而 

  Function就像javascript中的function同樣可讓你進行你想要的值的操做。下面咱們先來看一個簡單的實例： 

 
  @the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
    color: @base-color *3;
    border: 1px solid desaturate(@red,100%);
    border-width: @the-border @the-border*2 @the-border*3 @the-border;
    border-color:desaturate(@red,100%) @red lighten(@red, 10%) darken(@red, 30%);
}
 
 

  來看下編譯後的CSS: 

 
  #header {
    color: #333;
    border: 1px solid #4a4a4a;
    border-width: 1px 2px 3px 1px;
    border-color: #4A4A4A #842210 #B12E16 #000000;
}
 
 

  這裏提出一點，Less中的Operations主要是針對任何數字、顏色、變量的操做，能夠對其是行加、減、、乘、除或者更復雜的 

  綜合運算；而Functions主要是針對Color funtions，Less提供了多種變換顏色的功能，下面多們來俱體看一下這兩個功能的 

  使用。 

  先來看Operation的使用 

 
  @base: 5%;
@filler: @base*2;
@other: @base + @filler;
#header {
    color: #888 / 4;
    height: 100% / 2 + @filler;
}
 
 

  編譯後的CSS： 

 
  #header {
    color: #222222;
    height: 60%;
}

  上面是一些簡單的四則運算，它們都是在同一單位下進行操做，如今咱們一塊兒來看一個不一樣單位的操做 

 
  @var: 1px + 5;
#header {
    border: @var solid red;
}

  編譯後的CSS以下： 

 
  #header {border: 6px solid red;}

  上面的代碼直接反應出了，「@var: 1px + 5」，Less最終解析的值是「6px」。在Less中咱們一樣能夠像作小學算術同樣，使用 

  括號「（）」來改變其運算的前後順序，如： 

 
  @var: 20px;
#header {
    width: @var + 5 * 2;
    height: (@var + 5 ) * 2;
}
 
 

  看一下編譯後的結果： 

 
  #header {
    height: 50px;
    width: 30px;
}

  從結果中咱們很明顯的得出他們的區別 

  @var: 20px; 

  #header { 

  width: @var + 5 * 2;/* 先計算了5 * 2 = 10 而後在計算了 @var + 10 = 30px,其實就是"@var+(5*2)"*/ 

  height: (@var + 5 ) * 2;/*先計算了(@var + 5) = 25px,而後在計算了25*2=50px，由於括號更具備優先權，小學數學題*/ 

}

  Less中還提供了一個Color Functions，他具備多種變換顏色的功能，先把顏色轉換成HSL色，而後在此基礎上進行操做，具體包 

  括如下幾種： 

  lighten(@color, 10%); // return a color which is 10% *lighter* than @color 

  darken(@color, 10%); // return a color which is 10% *darker* than @color 

  saturate(@color, 10%); // return a color 10% *more* saturated than @color 

  desaturate(@color, 10%); // return a color 10% *less* saturated than @color 

  fadein(@color, 10%); // return a color 10% *less* transparent than @color 

  fadeout(@color, 10%); // return a color 10% *more* transparent than @color 

  spin(@color, 10); // return a color with a 10 degree larger in hue than @color 

  spin(@color, -10); // return a color with a 10 degree smaller hue than @color 

  使用這種functions方法很簡單： 

 
  @base: #f04615;
#header {
color: @base; 
    h1 {
        color: lighten(@base,20%);
            a {
                color: darken(@base,50%);
                &:hover {
                    color: saturate(@base,30%);
                }
            }
        }
    p {
        color: desaturate(@base,60%);
    }
}        
 
 

  來看下編譯後的CSS: 

 
  #header {
    color: #F04615;
}
#header h1 { 
    color: #F69275;
}
#header h1 a { 
    color: #060200;
}
#header h1 a:hover { 
    color: #FF3E06;
}
#header p {
    color: #A56F60;
}
 
 

  你們還能夠經過這樣的方式提取顏色值 

  hue(@color); // returns the `hue` channel of @color 

  saturation(@color); // returns the `saturation` channel of @color 

  lightness(@color); // returns the 'lightness' channel of @color 

  下面咱們來看一下如何取得他的顏色 

 
  @color: #f36;
#header {
 　　background-color: hsl(hue(@color),45%,90%);
}

  編譯後的代碼以下： 

 
  #header {background-color: #F1DAE0;}
 
ps.這裏其實我須要給本身寫一個相似於書籤之類的標註吧...畢竟這塊對於顏色的控制確實不算搞的太明白，因此仍是換成紅色文字提醒下本身，多看幾遍，多寫兩行代碼。node

 
 五、命名空間——Namespaces 

  有時候你想把一些變量或mixins組織起來，並將他封裝，想用的時候就把要關的一部分取出來，那麼咱們將在前面的mixins基礎 

  上將其功能擴展，好比說咱們有一個這樣的庫： 

 
  #bundle {
    .button () {
        display: block;
        border: 1px solid black;
        &:hover { background-color: white }
    }
    .tab { ... }
    .citation { ... }
}        
 
 

  如今在實際操做中，咱們header中的a樣式和.button同樣，那麼咱們就能夠這樣操做： 

 
  #header a {
    color: orange;
    #bundle > .button;
}

  換過一種思惟來講，若是頁面上有幾個部分的樣是徹底同樣的，或者只是部分不一樣，咱們就能夠這樣來寫，就如上面的代碼， 

  #bundle但是以web頁面中已存在的元素，而後#header中的a元素和#bundle中的.button樣式是同樣的，那麼咱們就能夠把 

  #bundle中 .button的全部樣式引用到#header中的a元素上。 

 
 六、變量範圍——Scope 

  Less中的變量和別的程序語言同樣，他的變量也有一個範圍概念，這個概念就有點像局部變量和全局變量同樣，只是在Less中採 

  取的是就近原則，換句話說，元素先找自己有沒有這個變量存在，若是自己存在，就取自己中的變量，若是自己不存在，就尋找 

  父元素，依此類推，直到尋找到相對應的變量，咱們來看個簡單的實例： 

 
  @var: red;
#page {
    @var: white;
    #header {
    color: @var; // white
    }
}
#footer {
    color: @var; // red
}
 
 
 

 
 七、Less的註解——Comments 

  Less中的註解有兩種方式，單行註解很像js中的，如： 

  // Hi, I'm a silent comment, I won't show up in your CSS 

  .class { color: white } 

  Less中的多行註解和使用css中的同樣： 

  /* Hello, I'm a 

  CSS-style comment 

*/

  .class { color: black } 

  固然單行註解也可使用css的方式註解，本人更強調使用css中的註解方式： 

  /* Hello, I'm a CSS-style comment */ 

  .class { color: black } 

 
 八、客戶端的使用——Client-side usage 

  客戶端的使用其實好簡單，咱們最開始引用的就是客戶端的使用方法，使用這種方法前提條件是須要一個less.js的腳本支持，大 

  家能夠先到點擊下載less.js而後把他引用到頁面的head中，以下所示： 

  <script src="less.js" type="text/javascript"></script> }}} 

  其中src所指定的路徑是你項目中的相對路徑，固然你也能夠把這個js放到你認爲安全可用的服務器上，換成絕對路徑也是能夠的。接着咱們就 

  須要把less文件引進到項目中，這個引入的方式和css方式是同樣的，只是有一點點不一樣，css中的是「rel="stylesheet"」而less的倒是「rel="s 

  tylesheet/less"」,請看下面的代碼： 

  {{{class="prettyprint" 

  <link rel="stylesheet/less" type="text/css" href="styles.less"> 

  特別強調一點，客戶端使用Less,必定要注意，「Less樣式文件必定要放在less腳本文件以前」。 

  正確的引入方式： 

  <link rel="stylesheet/less" type="text/css" href="styles.less"> 

  <script src="less.js" type="text/javascript"></script> 

  錯誤的引入方式： 

  <script src="less.js" type="text/javascript"></script>中 

  <link rel="stylesheet/less" type="text/css" href="styles.less"> 

  　　 
 總結一下 

 
 　　　　less的基礎用法大概就有這些，理解了這些東西，也足夠咱們在工做中的使用與源碼閱讀。能夠感受出來，其實less在學習成本以及學習難易度上確實不是很難。若是在之後的工做中用到SASS的話，我會再作一次學習與總結。還有就是須要作與LESS作下　　　　對比學習 

 
 　　文章代碼以及部份內容來自 http://www.w3cplus.com/css/less 

 
 　　感謝原文博主的總結！ 

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。