CSS預處理——LESS

LESS是什麼？

less是一門CSS預處理語言。因爲CSS自己並非程序式語言，不方便維護和擴展，沒有變量、函數、做用域等概念。而LESS在CSS的基礎語法之上，引入了變量、Mixin混入、運算以及函數等功能，大大簡化了CSS的編寫，下降了CSS的維護成本。
本質上，LESS包含一套自定義的語法及一個解析器，寫好的LESS文件會經過解析器編譯生成CSS文件。LESS並無建材CSS原有的特性，更不是用來取代CSS的，而是在現有的語法基礎上，爲CSS加入程序式語言的功能特性。因此，標準的CSS文件直接改爲.less格式，LESS編譯器能夠徹底識別。

使用

1.標籤引入。

link標籤rel屬性值必定要爲stylesheet/less

<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>

2.命令行使用npm安裝

npm install -g less
編譯：
lessc style.less style.css
編譯並壓縮文件：
lessc --clean-css styles.less styles.min.css

3.前端服務熱調試（webpack）

須要配置webpack，webpack會幫你編譯less文件，能夠在js中Import進.less文件，像使用css那樣使用less

4.在js中調用編譯器調試

var less = require('less');
less.render('.myclass { width: (1 + 1) }', function (e, output) {
    console.log(output.css); // 輸出 .myclass {width:2}
});

語法規則

變量

這裏的變量指的是常量，只能定義一次。以@開頭定義，使用時也要鍵入@

1.值變量

@color: #5B83AD;
@bgColor: @color + #111;
@width: 300px;
#wrap {
    color: @color;
    width: @width-20;
    height: @width-20*5;
    margin: (@width-20)*5;
    background: @bgColor;
}

生成後的CSS：

#wrap {
    color: #999;
    width: 50%;
    background: #6c94be;
}

2.選擇器變量

讓選擇器變成動態的變量，使用時必須將變量名用花括號括起來

@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //變量名 必須使用大括號包裹
    color: #999;
    width: 50%;
}
.@{Wrap}{
    color:#ccc;
}
#@{Wrap}{
    color:#666;
}

生成的CSS：

#wrap{
    color: #999;
    width: 50%;
}
.wrap{
    color:#ccc;
}
#wrap{
    color:#666;
}

3.屬性變量

將某CSS屬性名當作變量，與選擇器變量同樣，使用時須要{}

@borderStyle: border-style;
@Solid: solid;
#wrap{
    @{borderStyle}: @Solid;//變量名 必須使用大括號包裹
}

編譯後：

#wrap{
    border-style:solid;
}

4.url變量

@images: "../img";  //須要加引號
body {
    background: url("@{images}/dog.png"); //變量名 必須使用大括號包裹
}

編譯後：

body {
    background: url("../img/dog.png");
}

5.聲明規則集(做用相似於混入)

聲明：@name:{屬性:值};
使用：@name();

@background: {background:red;};
#main{
    @background();
}
@Rules:{
    width: 200px;
    height: 200px;
    border: solid 1px red;
};
#con{
    @Rules();
}

編譯後：

#main{
    background:red;
}
#con{
    width: 200px;
    height: 200px;
    border: solid 1px red;
}

6.變量的做用域

就近原則，與大多數編程語言的原則同樣

@var: @a;
@a: 100%;
#wrap {
    width: @var;
    @a: 9%;
}

編譯後：

#wrap {
    width: 9%;
}

嵌套

&符：表明父選擇器的名字

.boring {
    display: inline-block;
    &::after{
        content:"Hello Less";
    }
    .class {
        width: 100%;
    }
    &>.text{
        height: 10px;
    }
}

編譯後：

.boring{
    display: inline-block;
}
.boring::after{
    content: "Hello Less";
}
.boring .class{
    width: 100%;
}
.boring>.text{
    height: 10px;
}

混入（Mixin）

 混入就是將一組CSS屬性總體包含入另外一個css類中去。提升複用性

1.無參數混入

.bordered {
    &:hover {
        color: red;
    }
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
.card {
    background: #f6f6f6;
    .bordered; // .bordered()兩種寫法等價
}

編譯後：

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
.bordered:hover {
    color: red;
}
.card {
    background: #f6f6f6;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
.card:hover {
    color: red;
}

2.不輸出Mixin

若是隻是想建立一個mixin，並不想單獨輸出，能夠這樣用

.bordered(){
    &:hover {
        color: red;
    }
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
.card {
    background: #f6f6f6;
    .bordered; // .bordered()兩種寫法等價
}

編譯後：

.card {
    background: #f6f6f6;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
.card:hover {
    color: red;
}

3.有參數混入

注意的點：① 默認參數  ② 命名參數  ③ @arguments  ④ @rest

.border-radius(@radius) {
    border-radius: @radius;
}
.border(@a:10px, @b:50px, @c:30px, @color:#000) {
    border:solid 1px @color;
    box-shadow: @arguments; // 指代的是 所有參數
}
.bgColor(@color,@rest...){
    width: @rest; // @rest參數能夠得到後面違背獲取的值。
    background: @color;
}
#main {
    .border(0px,5px,30px,red);
    .border-radius(5px);
}
#main1 {
    .border(@c: 20px,@color: red);
}
#main2 {
    .border(10px);
}
#main3 {
    .border;
}

4.匹配模式

和麪向對象的多態很類似。當調用傳參的時候，會根據參數進行匹配，找到匹配程度更高的，若是匹配程度相同，將所有選擇，並存在樣式覆蓋。

.mixin(@color) {
    color-1: @color;
}
.mixin(@color; @padding: 2) {
    color-2: @color;
    padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
    color-3: @color;
    padding-3: @padding;
    margin: @margin @margin @margin @margin;
}
div {
    .mixin(#008000);
}

編譯後：

div {
    color-1: #008000; // "color-1"這種寫法對CSS來講是不合法的，在這裏只是展現哪些屬性被用上了
    color-2: #008000;
    padding-2: 2;
}

Demo2：

/* Less */
.triangle(top,@width:20px,@color:#000){
    border-color:transparent  transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
    border-color:transparent @color transparent  transparent ;
}

.triangle(bottom,@width:20px,@color:#000){
    border-color:@color transparent  transparent  transparent ;
}
.triangle(left,@width:20px,@color:#000){
    border-color:transparent  transparent  transparent @color;
}
.triangle(@_,@width:20px,@color:#000){ // @_的做用是，不管選擇的是哪一個函數，必定運行此函數
    border-style: solid;
    border-width: @width;
}
#main{
    .triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
    border-color:transparent  transparent  transparent #999;
    border-style: solid;
    border-width: 50px;
}

5.方法的命名空間

不能單獨使用命名空間的方法，必須先引入命名空間，才能使用其中的方法。

#card(){
    background: #723232;
    .d(@w:300px){
        width: @w;

        #a(@h:300px){
            height: @h;//可使用上一層傳進來的方法
            width: @w;
        }
    }
}
#wrap{
    #card > .d > #a(100px); // 父元素不能加 括號
}
#main{
    #card .d();
}
#con{
    //不得單獨使用命名空間的方法
    //.d() 若是前面沒有引入命名空間 #card ，將會報錯

    #card; // 等價於 #card();
    .d(20px); //必須先引入 #card
}

編譯後：

#wrap{
    height:100px;
    width:300px;
}
#main{
    width:300px;
}
#con{
    width:20px;
}

6.條件篩選

沒有邏輯運算符與或非，可是有when not ,（逗號）分別至關於 && ! ||

比較運算符有： > >= = =< <。=表明的是等於。

#card{
    // and 運算符 ，至關於 與運算 &&，必須條件所有符合纔會執行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }
    // not 運算符，至關於 非運算 !，條件爲 不符合纔會執行
    .background(@color) when not (@color>=#222){
        background:@color;
    }
    // , 逗號分隔符：至關於 或運算 ||，只要有一個符合條件就會執行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}

編譯後：

#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}

7.使用!important

.border{
    border: solid 1px red;
    margin: 50px;
}
#main{
    .border() !important;
}

編譯後：

#main {
    border: solid 1px red !important;
    margin: 50px !important;
}

8.循環

less並無提供for循環功能，可是能夠藉助when實現。

.loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));    // next iteration
    width: (10px * @counter); // code for each iteration
}
div {
    .loop(5); // launch the loop
}

編譯後：

div {
    width: 10px;
    width: 20px;
    width: 30px;
    width: 40px;
    width: 50px;
}

使用循環能夠作成CSS網格類的示例：

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
}

編譯後：

.column-1 {
    width: 25%;
}
.column-2 {
    width: 50%;
}
.column-3 {
    width: 75%;
}
.column-4 {
    width: 100%;
}

9.屬性拼接

CSS中有的屬性值是空格隔開，有的是逗號隔開。

①逗號隔開，在LESS中使用 + 

.boxShadow() {
    box-shadow+: inset 0 0 10px #555;
}
.main {
    .boxShadow();
    box-shadow+: 0 0 20px black;
}
/* 生成後的 CSS */
.main {
    box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

②空格隔開，在LESS中使用 +_ 

/* Less */
.Animation() {
    transform+_: scale(2);
}
.main {
    .Animation();
    transform+_: rotate(15deg);
}

/* 生成的 CSS */
.main {
    transform: scale(2) rotate(15deg);
}

繼承

.animation{
    transition: all .3s ease-out;
    .hide{
        transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

 編譯後：

.animation,#main{
    transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

all全局搜索替換

#main{
    width: 200px;
}
#main {
    &:after {
    content:"Less is good!";
    }
}
#wrap:extend(#main all) {}

編譯後：

#main,#wrap{
    width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

函數

1.類型函數

• isnumber 斷定是不是數字
• iscolor　  判斷值是不是顏色
• isurl         判斷是不是url

2.顏色操做

• saturate    增長必定數值的顏色飽和度
• lighteen    增長必定數值的顏色亮度
• darken      下降顏色亮度
• fade          給顏色設置必定數值的透明度

3.數學函數

• ceil           向上取整
• floor         向下取整
• round       四捨五入
• percentage  將浮點數值轉換爲百分比字符串
• abs           計算數值的絕對值
• pow          計算一個數的乘方

更多函數參見官方文檔：

http://lesscss.cn/functions/

其餘

1.註釋

/* CSS註釋，會出如今CSS文件中 */

// LESS註釋，不會被編譯在CSS文件中 

2.避免編譯

在CSS屬性被引號包起來，且前面加上~符號

/* Less */
#main{
    width:~'calc(300px-30px)';
}
/* 生成後的 CSS */
#main{
    width:calc(300px-30px);
}

3.使用JS

/* Less */
@content:`"aaa".toUpperCase()`;
#randomColor{
    @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
}
#wrap{
    width: ~"`Math.round(Math.random() * 100)`px";
    &:after{
        content:@content;
    }
    height: ~"`window.innerHeight`px";
    alert:~"`alert(1)`";
    #randomColor();
    background-color: @randomColor;
}
/* 生成後的 CSS */
#wrap{
    width: 隨機值（0~100）px;
    height: 743px;//由電腦而異
    background: 隨機顏色;
}
#wrap::after{
    content:"AAA";
}

此乃JS in CSS