css-Less

• 介紹
• 語法

介紹

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護,提升開發效率。

但正由於它是預處理語言，所以不能直接被使用，須要進行編譯後才能夠。

less須要 nodejs支持。

安裝： > npm install -g less

查看:    > lessc

編譯

命令編譯： 

> lessc  aaa.less aaa.css

@charset "utf-8";
@bgColor:red;
body{
  background-color:@bgColor;  
}

html頁面引入：

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

或

<style type="text/css" >
	@import url("index.css");
</style>

Koala外部編譯器可編譯Sass和Less文件：

安裝地址：http://koala-app.com/index-zh.html

在內部將less文件放入到一個less文件夾下，同時創建css文件夾，則會自動將less文件轉化爲css文件。

因編譯後的css，若是壓縮，Output Style:Compress, 若是有問題很差跟蹤，所以在設置中創建map地址映射（資源地圖文件）。 》Setting -》Less -》Default Options -》Sourse Map.

這樣就會在頁面css跳出時，直接映射到less文件上。

Webstorm 內置編譯器：

File-》Setting -》 Tools -》 File watcher -》 Add Less（添加Less）

注意：npm已經添加有less命令，同時 注意output路徑中默認是編譯到同級目錄下，所以若是不一樣級注意 ../css/*****

語法：

•  註釋
•  變量
•  混合（mixins）
•  模式匹配
•  顏色函數
• 嵌套
• 運算

 變量

@charset "utf-8";
@bColor: green;
@boderColor: red;
@imgurl: "../img";
body{
    background-color:@bColor;
}
div{
    border: solid 1px @boderColor;
}
div{
    background-image: url("@{imgurl}/01.png");
}

 

 變量使用

》@變量名： 變量值；   在使用的地方 @變量名， 注意變量值應爲css內容。

》@變量名： 拼接字符串；      "@{變量名}拼接內容"  注意 要爲{}括號

註釋

　　// 單行註釋，編譯後不保留，因css自己不支持 //

      /**/ 多行註釋，編譯後保留

混合

    猶如js函數通常，將一部分css，包裹在一個函數中，在使用的地方直接調用便可。

.font(@color: #ffffff, @size: 14px){
　　font-size: @size;
　　color: @color;
}


.error{
.font(#ff0000, 18px);
}
.normal{
　　.font();
}

 

 混合定義： 》.混合(@參數名:默認參數值){****}  

 注意：必須以 點 開頭， 混合中的參數爲形參，可傳可不傳（依據是否有默認值決定），且不能夠有引號，使用如同js方法同樣使用便可。

模式匹配

模式匹配，如同js的switch同樣， 當遇到相同的內容就走對應的代碼段。以建立三角形爲例。

.trangle(@_,@color,@size){
    width:0px;
    height: 0px;
    border:solid @size;
    border-color: transparent;
}
.trangle(right, @color, @size){
    border-right-color: @color;
}
.trangle(left, @color, @size){
    border-left-color: @color;
}
.trangle(top, @color, @size){
    border-right-color: @color;
}
.trangle(bottom, @color, @size){
    border-left-color: @color;
}

.trangle-l{
    .trangle(left, #ff00ff, 18px);
}

 

 @_  爲通配符，至關於switch 中的 default,不論匹配哪一個，此內容都會被執行，所以用於定義共通樣式。

 第一個參數爲string的固定值，至關於case，當傳入的內容匹配此內容時，會執行內部的內容。

注意：模式匹配要求定義的函數名稱要求一致，且入參的內容要注意和模式的匹配要吻合。

顏色函數

 顏色組成： 色相（spin-色輪），明度（dark-light），飽和度（saturate）

函數：   

lighten(@color, @percent)      //percent最高百分之50

darken(@color, @percent)     //percent最高百分之50

spin(@color, @index)                //index 表示色輪指定顏色的偏移量，適合顏色逐漸變化

saturate(@color, @percent)       //飽和度提高百分比

desaturate(@color, @percent)   //減飽和度

mix(@color1, @color2)      //取顏色1和顏色2混合到一塊兒造成的新顏色

/**ul{
    list-style: none;
    li:nth-of-type(1){
        background-color:darken(red, 0%);
    }
    li:nth-child(2){
        background-color:darken(red, 10%);
    }
     li:nth-child(3){
        background-color:darken(red, 20%);
    }
    li:nth-child(4){
        background-color:darken(red, 30%);
    }
    li:nth-child(5){
        background-color:darken(red, 50%);
    }
} **/

ul{
    list-style: none;
    li:nth-of-type(1){
        background-color:lighten(red, 0%);
    }
    li:nth-child(2){
        background-color:lighten(red, 10%);
    }
     li:nth-child(3){
        background-color:lighten(red, 20%);
    }
    li:nth-child(4){
        background-color:lighten(red, 30%);
    }
    li:nth-child(5){
        background-color:lighten(red, 50%);
    }
    
    li:nth-child(6){
        background-color:saturate(red, 100%);
    }
    li:nth-child(7){
        background-color:desaturate(red, 50%);
    }
    li:nth-child(8){
        background-color:spin(red, -20);
    }
    li:nth-child(9){
        background-color:spin(red, 20);
    }
    li:nth-child(10){
        background-color:mix(red, green);
    }
    
} 

 

注意：此處的nth-child也可支持（even，odd）作奇偶不一樣用。

ul{
　　list-style: none; 
　　li:nth-child(odd){
　　　　background-color:lighten(red, 20%);
　　}
　　li:nth-child(even){
　　　　background-color:darken(red, 20%);
　　} 
}

 嵌套：

將子或子子元素的樣式以包含的形式被融入到父樣式中相似

.a .b{****}  =>   .a{ .b{}}  

這樣的好處是，能夠將某一模塊的全部樣式統一在一塊兒，不會那麼零散。

注意：&表示父親， 對鄰居父子同級元素僞類 （+ ~   > :）都要使用&來表示。

.font-btn{
  color: #9A9A9A;
  &:hover{
    color: #926AA3;
    .icon{
      background-color: rgba(146,106,163,.2);
    }
  }
  &:focus{
    color: #480968;
    .icon{
      background-color: rgba(146,106,163,.2);
    }
  }
}

 運算：

運算符分類： 加減乘除。用於角度，顏色，寬度，高度進行計算。

寬度高度

ul{
    list-style: none; 
    li{
        background-color: @bgcommon;
    } 
      
    li:nth-of-type(1){
        width: @w1;
        background-color: @bgcommon + #990000;
    } 
    li:nth-of-type(2){
        width: @w2 + @w1; //注意最好帶空格，變量之間運算能夠不帶空格，和數據計算要帶空格
        background-color: @bgcommon * 5;
    }
    li:nth-of-type(3){
        width: @w1 + 500px; //注意要加空格
    }
}

 

 

 

 

 

 

 

 

 

 

 

 

 

// TODO