首頁 > web前端 > css教學 > 主體

使用less(變數,混合,匹配,運算,嵌套)的方法介紹

高洛峰
發布: 2017-03-17 10:30:34
原創
1763 人瀏覽過

如何使用less及一些常用的(變數,混合,匹配,運算,嵌套)

less的介紹及編譯工具

什麼是less

1.LESSCSS是一種動態樣式語言,屬於CSS預處理語言的一種,它使用類似CSS的語法,為CSS的賦予了動態語言的特性,如變數、繼承、運算、函數等,更方便CSS的編寫與維護。
LESSCSS可以在多種語言、環境中使用,包括瀏覽器端、桌面用戶端、服務端。

less的編譯工具

  1. Koala 無尾熊--編譯的時候如果沒有建CSS資料夾Koala會自動給你產生一個
    如何設定語言
    使用less(变量,混合,匹配,运算,嵌套)的方法介绍
    如何編譯
    - 使用less(变量,混合,匹配,运算,嵌套)的方法介绍

  2. 讓webstorm支援less編譯:

  • 安裝node.js --- 這是一個套件管理工具以後還會用到

  • WIN+ R

  • 輸入npm install less

  • #.....

  • less的語法

    Ps:下面的知識點會用到上面的知識點(比如說在混合中會用到變數加深印象^_^)

    1. ##註解

    • // 只在less中顯示


    • /**/ 會在編譯好的css檔案中顯示

  • 變數

    • #less中的寫法

      @ly_width:100px;
      .box {
      width:@ly_width;
      }
      登入後複製
    • 編譯後在css中顯示的是

      .box {
      width:100px;
      }
      登入後複製
    • #定義變數用@

    ##混合
    • 解決border-radius相容
    • .border_radius (@radius: 5px) {
      -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
      -ms-border-radius: @radius;
      -o-border-radius: @radius;
      border-radius: @radius;
      }
      登入後複製

      less中的寫法
    • @ly_width:100px;
      @ly_height:200px;
      @ly_color:green;
      .border(@border_width:3px;) {
      border:@border_width solid red;
      }
      .one {
      width:@ly_width;
      height:@ly_height;
      background-color:@ly_color;
      .border();
      }
      登入後複製

    • 編譯後在css中顯示的是
    • .one {
      width: 100px;
      height: 200px;
      background-color: #008000;
      border: 3px solid #ff0000;
      }
      登入後複製

      #less中的寫法
    • @ly_width:100px;
      @ly_height:200px;
      @ly_color:green;
      .border(@border_width) {
      border:@border_width solid red;
      }
      .one {
      width:@ly_width;
      height:@ly_height;
      background-color:@ly_color;
      .border(1px);
      }
      登入後複製


    • 編譯後在css中顯示的是
    .one {
    width: 100px;
    height: 200px;
    background-color: #008000;
    border: 1px solid #ff0000;
    }
    登入後複製
    • 先上less中的程式碼如果想在.one中應用.border的樣式怎麼辦?
    • @ly_width:100px;
      @ly_height:200px;
      @ly_color:green;
      .border {
      border:1px solid red;
      }
      .one {
      width:@ly_width;
      height:@ly_height;
      background-color:@ly_color;
      }
      登入後複製

    • 寫成下面的樣子
    • @ly_width:100px;
      @ly_height:200px;
      @ly_color:green;
      .border {
      border:1px solid red;
      }
      .one {
      width:@ly_width;
      height:@ly_height;
      background-color:@ly_color;
      .border;
      }
      登入後複製

    • #編譯後在css中顯示的是
    • .border { border:1px solid red ; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

    • #不帶參數的混合
  • 帶參數的混合---不帶預設值(可以傳多個參數,以逗號或分號隔開,推薦用分號下面以一個參數為例)

    • 帶參數的混合---帶預設值(可以傳多個參數下面以一個參數為例)

    • 在解決css3相容性時候常用到

    ##less中的寫法
    //定义上,下,左,右边框的样式
    .border(top;@border_width:5px;@border_color:red){
    border-top:@border_width solid @border_color;
    }
    .border(bottom;@border_width:5px;@border_color:red){
    border-bottom:@border_width solid @border_color;
    }
    .border(left;@border_width:5px;@border_color:red){
    border-left:@border_width solid @border_color;
    }
    .border(right;@border_width:5px;@border_color:red){
    border-right:@border_width solid @border_color;
    }
    //如果想写通用的样式 可以在下面的代码中写 格式是固定的 
    .border(@_,@border_width:5px;@border_color:red){
    border-color:yellow;
    }
    .border_use1 {
    //选择和if差不多 如果是left就调用上面对应的
    .border(left);
    }
    .border_use2 {
    //选择和if差不多 如果是right就调用上面对应的
    .border(right);
    }
    登入後複製
    ## #######編譯後在css中顯示的是###
    .border_use1 {
    border-left:5px solid #ff0000;
    border-color:yellow;
    }
    .border_use2 {
    border-right:5px solid #ff0000;
    border-color:yellow;
    }
    登入後複製
    ################可以理解成if 和上面的混合有些相似###### #########運算###############less中的寫法###
    @ly_width:100px;
    .one {
    width:@ly_widht + 100;
    }
    登入後複製
    #########編譯後在css中顯示的是###
    .one {
    width:200px;
    }
    登入後複製
    ###############運算提供了加,減,乘,除操作,還可以做屬性值和顏色的運算...####### ########巢狀###############html結構###
    <p class="one">
    <p class="two"></p>
    </p>
    登入後複製
    #########less中的寫法###
    @ly_width:100px;
    @ly_height:200px;
    @ly_color:red;
    .one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .two {
        background-color: green;
    }
    }
    登入後複製
    ## #######編譯後在css中顯示的是###
    .one {
    width: 100px;
    height: 200px;
    background-color: #ff0000;
    }
    .one .two {
      background-color: green;
    }
    登入後複製
    ################可以在一個選擇器中嵌套另一個選擇器,程式碼看起來層次分明,提高程式碼可維護性###############@arguments變數###############less中的寫法###
    //和前面提到的混合一起举个栗子  
    .border(@border_width;@border_style;@border_color){
    border:@arguments;
    }
    .one {
    .border(1px;solid;red);
    }
    登入後複製
    # ########編譯後在css中顯示的是###
    .one {
    border:1px solid #ff0000;
    }
    登入後複製
    ################可以包含所有的變數,將變數一起處理##### #######

    以上是使用less(變數,混合,匹配,運算,嵌套)的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!