Less與Sass是css的預處理技術
而CoffeeScript、TypeScript則是javascript的預處理技術。
一、Less
Less是一種動態樣式語言，是一門css預處理語言，擴充套件了css語言，增加了變數，運算，巢狀等一系列功能
1.1 變數
語法:@變數名:變數值;
存在作用域:區域性作用域>全域性作用域
以@開頭，後面輸入變數名.
例項:
@color:red;
@size:18px;
.div{
background-color:@color;
font-size:@size;
...
}
//翻譯後
.div{
background-color:red;
font-size:@size;
...
}
1.2 混入
定義一個函式，寫入引數值，可呼叫
內建變數@arguments代表所有引數(執行時)的值
相當於一個模板，將模板引入，再寫入引數即可使用
如:
.circle(@width:100px,@color:red,@height:100px){
width:@width;
color:red;
height:100px;
font-size:18px;
}
.c1{
.circle(); //不帶引數引入
.circle(200px,blue)//帶兩個引數
.circle
...
}
//翻譯後
.c1{
width:100px;
//帶引數為: width:200px;
color:red;
//帶引數為: color:blue;
height:100px;
font-size:18px;
}
1.3 巢狀
允許將多個選擇器巢狀在一起,
&表示當前選擇器的父選擇器
例：
.cor{
color:red;
.ten{font-size:12px;}
&#sub{width:100px;}
}
//翻譯後
.cor{
color:red;
}
.cor .ten{
font-size:12px;
}
.cor#sub{
width:100px;
}
1.4 運算
less擁有強大的運算能力，針對數字，顏色，變數的操作，支援加、減、乘、除或更復雜的綜合運算！
例:
@file:5%;
@base-color:lightblue;
.cor{
width:@file * 10; //50%
background-color: @base-color + #111;
}
1.5 繼承
讓一個樣式繼承另一個樣式
例:
.cor{
width:100px;
color:red;
}
.cor2{
&:extend(.cor);
font-size:15px;
}
.cor3{
&:extend(.cor);
}
//翻譯後
.cor,
.cor2,
.cor3{
width:100px;
color:red;
}
.cor2{
font-size:15px;
}
1.6 作用域
區域性作用域>全域性作用域
同一級變數，後者會覆蓋前者
例:
@name:30px;
.cor{
@name:20px;
font-size:@name; //20px
}
@name:18px
.cor2{
font-size:@name; //18px
}
1.7 迴圈
在Less中，可以呼叫本身
例:
.cor(@name) when (@name > 0){
.cor((@name - 1))
width:(@name * 10px);
}
.ten{
.cor(3);
}
//翻譯後
.ten{
width:10px;
width:20px;
width:30px;
}
二、Sass
2.1 變數
使用符號:$識別符號
<!--定義變數-->
$width:1000px;
$height:500px;
.box{
width:$width;
height:$height;
}
2.2 巢狀
略，與less相同
2.3 匯入
@import
reset.scss 檔案
$width:900px;
$color:blue;
*{
background-color:$color;
width:$width;
}
scss程式碼
@import "reset"
.box{
width:200px;
}
<!--翻譯後-->
*{
background-color:$color;
width:$width;
}
.box{
width:200px;
}
2.4 mixin 混入
sass中用mixin定義一些程式碼段，可傳引數，
定義時用@mixin
呼叫時用@include
例:
@mixin cir($size:100px,$color:red,$px:14px){
width:$size;
background-color:$color;
font-size:$px;
}
.cls{
@include cir();<!--呼叫-->
@include cir(150px);
@include cir(150px,blue,20px);
}
翻譯後
.cls{
width:100px;
background-color:red;
font-size:14px;
------------------------
width:150px;
background-color:red;
font-size:14px;
------------------------
width:150px;
background-color:blue;
font-size:20px;
}
2.5 繼承/擴充套件
通過@extend來實現程式碼組合
例:
.state{
background-color:red;
}
.state2{
@extend .state
background-color:blue;
font-size:12px;
}
翻譯後
.state,.state2{
background-color:red;
}
.state2{
background-color:blue;
font-size:12px;
}
2.6 sass運算
sass可以進行復雜的運算
2.7 函式
sass集成了大量的顏色函式,讓變換顏色更加簡單
例:
$pcolor:#999ccc;
.cls:hover{
darken:黑暗
background-color:darken($pcolor,15%);
<!--變暗15%-->
lighten:照亮
background-color:lighten($pcolor,15%);
<!--變亮15%-->
}
2.8 流程控制
sass中擁有流程控制語句，如:if,for,while,each等
例:
/*如果i是3的倍數，則下劃線*/
@if $i%3==0 {
text-decoration: underline;
}