• QQ咨詢:4001806960
  • 咨詢熱線:400-180-6960

通過LESS的基礎語法的學習,提高web前端開發的效果

作者:zhouxiaotian日期:2016-07-22 20:58:47 點擊:18695 LESS

LESS基礎語法

我們一起來學習一下LESS的基礎語法,LESS的基礎語法基本上分爲以下幾個方面:變量、混合(Mixins)、嵌套規則、運算、函數、作用域等。這些基礎語法需要我們先牢牢的掌握住,然後才可以靈活的在項目中進行實戰。

變量

和JS中的變量一樣,只是LESS的變量定義不是使用VAR而是使用@。


    //->LESS代碼
    @link-color: #428bca;
    @link-color-hover: darken(@link-color, 10%);

    a {
        color: @link-color;
        &:hover {
            color: @link-color-hover;
        }
    }

    .box {
        color: @link-color;
    }

    //->編譯爲CSS的結果
    a {
        color: #428bca;
    }

    a:hover {
        color: #3071a9;
    }

    .box {
        color: #428bca;
    }

除了上述用變量存儲公用的屬性值,我們還可以用變量存儲公用的URL、選擇器等等


    //->LESS代碼
    [email protected]{selector} {
        width: 100px;
        height: 100px;
        @{property}: #000;
        background: url("@{bgImg}/test.png");

        &:after {
            display: block;
            content: @@var;
        }
    }
    @selector: box;
    @bgImg: "../img";
    @property: color;
    @name: "珠峰培訓";
    @var: "name";

    //->編譯爲CSS的結果
    .box {
        width: 100px;
        height: 100px;
        color: #000;
        background: url("../img/test.png");
    }

    .box:after {
        display: block;
        content: "珠峰培訓";
    }

在上述的代碼中我們發現,變量存儲的值可以作爲選擇器,也可以作爲樣式屬性名,同樣也可以像類似于JS中字符串拼接的方式把變量值的和另外一個字符串進行拼接,而且@@var是把var變量存儲的值作爲另外一個變量的名從而獲取對應的值。還有一點值的我們注意的是,變量可以定在使用代碼的下面,這個有點類似于JS中的預解釋,不管寫在上面還是下面,都是相當于全局的變量,並且都可以把存儲值獲取到(但是建議大家把變量都統一在最上面定義)。

Mixin混合

1、基本使用

從字面意思上理解,所謂的混合其實應該是把很多的樣式混合在一起,這樣理解不准確,個人的理解,所謂的混合其實是把某個選擇器中的樣式拿過來使用,我們看下面的代碼。


    //->LESS代碼
    .public {
        width: 100px;
        height: 100px;
    }

    nav ul {
        .public;
        list-style: none;
    }

    //->編譯爲CSS的結果
    .public {
        width: 100px;
        height: 100px;
    }

    nav ul {
        width: 100px;
        height: 100px;
        list-style: none;
    }

觀察上述的代碼,我們發現其實nav ul是把public中設定的樣式屬性值copy了一份到自己的樣式中。如果你想在編譯完成的結果中不輸出public這個樣式的結果,只需要按照下述的代碼編寫即可:


    //->LESS代碼
    .public() {//->在選擇器後面加上()就可以不編譯這個樣式了
        width: 100px;
        height: 100px;
    }

    nav ul {
        .public;
        list-style: none;
    }

    //->編譯爲CSS的結果
    nav ul {
        width: 100px;
        height: 100px;
        list-style: none;
    }

2、Extend

雖然在上述的案例中,nav ul把public中的樣式繼承了過來,但是原理卻是把代碼copy一份過來,這樣編譯後的CSS中依然會存留大量的冗余CSS代碼,爲了避免這一點,我們可以使用extend僞類來實現樣式的繼承使用。


    //->LESS代碼
    .public {
        width: 100px;
        height: 100px;
    }

    nav ul {
        &:extend(.public);
        list-style: none;
    }

    //->編譯爲CSS的結果
    .public, nav ul {
        width: 100px;
        height: 100px;
    }

    nav ul {
        list-style: none;
    }

或者:


    //->LESS代碼
    .public {
        width: 100px;
        height: 100px;
    }

    nav ul:extend(.public) {
        list-style: none;
    }

    //->編譯爲CSS的結果和第一種寫法一樣

3、命名空間和作用域

在LESS的語法中,我們可以指定命名空間,實現在一個盒子中層級嵌套式的編寫。下面案例中,.box就是命名空間,裏面的img、.gray都是這個空間下的樣式,調取的話需要.box > .gray。


    //->LESS代碼
    .box {
        width: 100px;
        height: 100px;
        img {
            width: 100%;
            height: 100%;
        }
        .gray {
            color: #eee;
        }
        &:hover {
            background: green;
        }
    }

    #nav {
        .box;
    }

    #header {
        .box > .gray;
    }

    //->編譯爲CSS的結果
    .box {
        width: 100px;
        height: 100px;
    }

    .box img {
        width: 100%;
        height: 100%;
    }

    .box .gray {
        color: #eee;
    }

    .box:hover {
        background: green;
    }

    #nav {
        width: 100px;
        height: 100px;
    }

    #nav img {
        width: 100%;
        height: 100%;
    }

    #nav .gray {
        color: #eee;
    }

    #nav:hover {
        background: green;
    }

    #header {
        color: #eee;
    }

在LESS中定義了命名空間就創建了一個私有的作用域,在這個私有作用域中使用的變量都是先看一下自己作用域中有沒有,沒有的話,在向上一級查找(類似于JS的作用域鏈)。


    //->LESS代碼
    @color: #ccc;
    .box {
        @color: #eee;
        .gray {
            color: @color;
        }
    }

    .box2 {
        .gray {
            color: @color;
        }
    }

    //->編譯爲CSS的結果
    .box .gray {
        color: #eee;
    }

    .box2 .gray {
        color: #ccc;
    }

4、!important

在調用的混合集後面追加 !important 關鍵字,可以使混合集裏面的所有屬性都繼承 !important:


    //->LESS代碼
    @color: #ccc;
    .box {
      @color: #eee;
      .gray {
        color: @color;
      }
    }

    nav ul {
      .box !important;
    }

    //->編譯爲CSS的結果
    .box .gray {
        color: #eee;
    }

    nav ul .gray {
        color: #eee !important;
    }

5、Parametric Mixins

如同JS一樣,LESS也可以向函數一樣設定形參數,這個技巧在我們的項目中會被經常的使用到,例如:處理CSS3的兼容問題


    //->LESS代碼
    .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
      -webkit-transition: @property @duration @function @delay;
      -moz-transition: @property @duration @function @delay;
      -ms-transition: @property @duration @function @delay;
      -o-transition: @property @duration @function @delay;
      transition: @property @duration @function @delay;
    }

    .box1 {
      .transition;
    }

    .box2 {
      .transition(@duration: 2s);
    }

    .box3 {
      .transition(@duration: 2s; @property: width;);
    }

    //->編譯爲CSS的結果
    .box1 {
        -webkit-transition: all 1s linear 0s;
        -moz-transition: all 1s linear 0s;
        -ms-transition: all 1s linear 0s;
        -o-transition: all 1s linear 0s;
        transition: all 1s linear 0s;
    }

    .box2 {
        -webkit-transition: all 2s linear 0s;
        -moz-transition: all 2s linear 0s;
        -ms-transition: all 2s linear 0s;
        -o-transition: all 2s linear 0s;
        transition: all 2s linear 0s;
    }

    .box3 {
        -webkit-transition: width 2s linear 0s;
        -moz-transition: width 2s linear 0s;
        -ms-transition: width 2s linear 0s;
        -o-transition: width 2s linear 0s;
        transition: width 2s linear 0s;
    }

此外我們需要值得注意的是,LESS中也有arguments。


    //->LESS代碼
    .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
      -webkit-transition: @arguments;
      transition: @arguments;
    }

    .box1 {
      .transition;
    }

    //->編譯爲CSS的結果
    .box1 {
        -webkit-transition: all 1s linear 0s;
        transition: all 1s linear 0s;
    }

我們還可以把我們的變量像JS的函數一樣操作,不僅僅有參數,還有返回值。


    //->LESS代碼
    .average(@x, @y) {
      @result: ((@x + @y) / 2);
    }

    div {
      .average(16px, 50px); //"call" the mixin
      padding: @result; //use its "return" value
    }

    //->編譯爲CSS的結果
    div {
        padding: 33px;
    }

6、Mixin Guards

我們可以在mixin中設置條件;常用的條件運算符:>、>=、<、<=、=;我們設定的條件還可以使用IS函數:iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...


    //->LESS代碼
    .mixin (@a) when (lightness(@a) >= 50%) {
      background-color: black;
    }

    .mixin (@a) when (lightness(@a) < 50%) {
      background-color: white;
    }

    .box1{
      .mixin(#ddd);
    }

    .box2{
      .mixin(#555);
    }

    //->編譯爲CSS的結果
    .box1 {
        background-color: black;
    }

    .box2 {
        background-color: white;
    }

when是在設置條件,除了像上面的寫法外,我們還可以通過when設置多個條件,而且條件中可以使用is函數。


    //->LESS代碼:使用IS函數
    .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a; @b: black) when (iscolor(@b)) { ... }

    //->LESS代碼:多條件,可以使用and或者逗號間隔
    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
    .mixin (@a) when (isnumber(@a)) , (@a > 0) { ... }

我們還可以通過與&特性結合實現'if'類型的語句。


    //->LESS代碼:這裏的意思是如果爲true,.box的文字顔色才是白色
    @my-option: true;
    & when (@my-option = true) {
      .box {
        color: white;
      }
    }

Loops

在Less中,混合可以調用它自身。這樣,當一個混合遞歸調用自己,再結合Guard條件表達式,就可以寫出循環結構。使用遞歸循環最常見的情況就是生成柵格系統的CSS:


    //->LESS代碼
    .generate-columns(4);
    .generate-columns(@n, @i: 1) when (@i <= @n) {
      [email protected]{i} {
        width: (@i * 100% / @n);
      }
      .generate-columns(@n, (@i + 1));
    }

    //->輸出的CSS
    .column-1 {
        width: 25%;
    }

    .column-2 {
        width: 50%;
    }

    .column-3 {
        width: 75%;
    }

    .column-4 {
        width: 100%;
    }

Merge

Merge特性可以從多個屬性中將值,集合到某一個樣式屬性的列表中(也就是多樣式效果)。在編寫的時候,+代表以逗號分隔,+_代表多個之前以空格分隔。


    //->LESS代碼
    .mixin() {
      box-shadow+: inset 0 0 10px #555;
    }

    .myclass {
      .mixin;
      box-shadow+: 0 0 20px black;
    }

    .mixin2() {
      transform+_: scale(2);
    }

    .myclass2 {
      .mixin2;
      transform+_: rotate(45deg);
    }

    //->輸出的CSS
    .myclass {
        box-shadow: inset 0 0 10px #555, 0 0 20px black;
    }

    .myclass2 {
        transform: scale(2) rotate(45deg);
    }

Parent Selectors

&運算符其實就是讓當前的選擇器和父級選擇器按照特定的規則進行連接,看下面的案例:


    //->LESS代碼
    .box {
      color: blue;
      &:hover {
        color: green;
      }

      &-top {
        height: 30px;
      }

      &-center {
        height: 500px;
      }

      //->多個&&
      & + &-top {
        color: red;
      }

      & &-top {
        color: grey;
      }

      &&-top {
        color: black;
      }

      &, &-top {
        color: orange;
      }
    }

    //->輸出的CSS
    .box {
        color: blue;
    }

    .box:hover {
        color: green;
    }

    .box-top {
        height: 30px;
    }

    .box-center {
        height: 500px;
    }

    .box + .box-top {
        color: red;
    }

    .box .box-top {
        color: grey;
    }

    .box.box-top {
        color: black;
    }

    .box, .box-top {
        color: orange;
    }

改變選擇器順序,下面的案例中,選擇器.no-border-radius &會前置插入它的父選擇器.header .menu,最後變成.no-border-radius .header .menu形式輸出:


    //->LESS代碼
    .header {
      .menu {
        border-radius: 5px;
        .no-border-radius & {
          background-image: url('images/button-background.png');
        }
      }
    }

    //->輸出的CSS
    .header .menu {
        border-radius: 5px;
    }

    .no-border-radius .header .menu {
        background-image: url('images/button-background.png');
    }

Import Directives

從其他樣式表中導入樣式。


    //->LESS代碼
    @import "public.less";

    .box {
      &:after {
        .clear;
      }
    }

    //->輸出的CSS:會把public中的樣式也輸出
    .clear {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

    .box:after {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

我們發現上述的操作雖然實現了調取使用,但是會把public中的less也編譯到了自己的這個css中,如果不想編譯的話,我們需要配置一些參數:


    //->LESS代碼
    @import (reference) "public.less";

    .box {
      &:after {
        .clear;
      }
    }

    //->輸出的CSS:
    .box:after {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

除了reference以外我們還可以配置一些其他的參數值: inline:在輸出中包含源文件但不加工它 less:將文件作爲Less文件對象,無論是什麽文件擴展名 css:將文件作爲CSS文件對象,無論是什麽文件擴展名 once:只包含文件一次(默認行爲) multiple:包含文件多次

上一篇: 讓你快速進行web前端開發的途徑-LESS學習:了解LESS和編譯LESS

下一篇: html5開發培訓系列之Flexbox深入理解

X-POWER-BY FNC V0.5.2 FROM ZZ42