Less總結篇-CSS預處理語言
阿新 • • 發佈：2019-01-10
1.瞭解
Less是一門CSS預處理語言，它擴充套件了CSS語言，增加了變數，Mixin，函式等特性，使CSS更易維護和擴充套件。更少可以執行在Node或瀏覽器端。
2.使用方法
方法一：“袋鼠”工具，下載單獨軟體先在本地轉譯，再把生成的.css檔案引入；
方法二：使用less的指令碼進行實時轉譯，如下：
<link rel="stylesheet/less" href="styles.less" /> ... <script src="less.js" type="text/javascript"></script> 注意： 1.link中自己寫的less的rel=“stylesheet/less”； 2.引入less指令碼之前書寫.less自書寫需轉譯的less ；
方法三：使用npm全域性安裝less，然後逐步轉譯less檔案
//安裝
$ npm install -g less
//解析
$ lessc styles.less
//解析完後儲存
$ lessc styles.less > styles.css方法四：在vue中使用less-loader，具體修改如下：
step1：安裝 less 和 less-loader ，在專案目錄下執行如下命令： npm install less less-loader --save-dev step2：webpack.config.js中新增如下程式碼，對字尾為less的檔案進行解析依賴 module: { rules: [ ... { test: /\.less$/, loader: "style-loader!css-loader!less-loader", } ] } step3：頁面中<style>標籤中新增 lang="less" <style scoped lang="less"> ... </style>
3.語法
1、變數：其實本質是常量，因為它是不可變的，只允許定義一次。
@val001 : #5B83AD; //變數為：屬性值
@val002 : color; //變數為：屬性值
@val003 : className; //變數為：類名
@val004 : "../image"; //變數為：url
@val005 : "../../themes"; //變數為：匯入半路徑
@val006 : "content string";
@val007 : "val006"; //變數為：變數名稱
@import "@{val005}/backTheme.less";
div {
@{val002}: @val001;
content: @@val007;
background: url("@{val004}/big/big.png");
}
2、混入(Mixins)：一組屬性在其他樣式中出現。
.redColor{ //輸出的被混入物件
color:red;
}
.noshow(){ //不輸出的被混入物件
padding:10px;
&:hover{ //屬性的混入
color:blue;
}
}
.cont{
font-size:16px;
.redColor() !important; //redColor裡的所有屬性都會帶 !important
.noshow; //有木有小括號都是可以的
}
—————————————————————————————————————————————————————————————————————————————————————————
//輸出
.redColor{
color:red;
}
//.noshow不會輸出
.cont{
font-size:16px;
color:red !important;
padding:10px;
}
.cont:hover{
color:blue;
}
注意：
1.混入時屬性混入可以將（）小括號去掉；
2.可以使用類名，id名進行混入；
3.不想要引用的樣式輸出，可以使用.noshow(){}，加小括號的方式；3、引數混入：可以理解成函式傳遞引數。
.mixin(@x:10px; @y:10px; @z:10px; @color:#aaa) {
width:@x;
height:@y;
padding:@z;
color:@color;
box-shadom:@arguments;
}
.class1 {
.mixin(@color:#ddd; @x:50px);
}
—————————————————————————————————————————————————————————————————————————————————————————
//輸出
.class1 {
width:50px;
height:10px;
padding:10px;
color:#ddd;
box-shadom:10px 10px 10px #ddd;
}
注意：
1.傳參可以對引數名稱進行規定，如：@color
2.傳參可以設定預設的數值，如：@clor:#aaa
3.傳遞引數可以是多個，如：@x:10px; @y:10px; @z:10px; @color:#aaa
4.傳參定義了名稱，其傳遞的實際引數順序無所謂，如：@color:#ddd; @x:50px
[email protected]類似一個偽陣列，可以直接使用，如：box-shadom:@arguments
//特殊：混入作為函式
.mixin2(@x;@y){
@wid:@x;
@hei:@y;
}
.class2{
.maxin2(10px,20px);
width:@wid;
height:@hei;
}
———————————————————————————————————————————————————————————————————————————————————————————
//輸出
.class2 {
width:10px;
height:10px;
}
注意：
1.混入可作為函式，進行呼叫，然後返回對應的變數再賦值，如：.maxin2(10px,20px);width:@wid;//特殊：條件混入
.mixin (@a) when (@a >= 50%) {
background-color: black;
}
.mixin (@a) when (@a < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
——————————————————————————————————————————————————————————————————————————————————————————
//輸出
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}//特殊：迴圈在混入中的使用
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
[email protected]{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%; }4、巢狀：有父子關係的寫在一起，接近於html的寫法。
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
———————————————————————————————————————————————————————————————————————————————————————————
//輸出
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}5、運算：利用+ - * / 進行計算得出最後的值並附上單位，常用的是寬高，百分比，顏色值
@val001:5px+10; 15px
@val002:5px+10px; 15px
@val003:5px+10cm; 15px
@val004:5%*2; 10%
注意：
1.計算中出現多單位，單位以最左邊單位為最終結果；
2.計算中最好將單位標清楚，方便修改和設定；6、格式化：使用“ ~ ”符號，允許任意字串作為屬性或屬性值，並以原樣返回
.weird-element {
content: ~"^//* some horrible but needed css hack";
}
———————————————————————————————————————————————————————————————————————————————————————————
//輸出
.weird-element {
content: ^//* some horrible but needed css hack;
}7、功能：可以轉換顏色，操縱字串和進行數學運算(使用較少，但在效果變更還是很實用的)
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%` //將0.5％轉換為50％
color: saturate(@base, 5%); //將基色的飽和度增加5％
background-color: spin(lighten(@base, 25%), 8); //將背景顏色設定為減輕25％並旋轉8度的顏色
}8、範圍作用域：類似js中區域性和全域性的感覺，不一樣的是區域性的變數可以在後邊定義
@var: red;
#page {
#header {
color: @var; //white
}
@var: white; //引用後邊定義變數
}9、匯入：匯入外部的樣式，可以是less或者css等
@import "foo"; foo.less
@import "foo.less"; foo.less
@import "foo.php"; foo.less
@import "foo.css"; foo.css
@import (optional, reference) "foo.less"; //指令控制匯入檔案
注意：
1.匯入的語句寫在哪裡都無所謂，但是建議寫在最頂端；
2.根據副檔名，有如下規範：
（1）如果檔案有.css副檔名，則將其視為CSS，並將@import語句保留為原樣；
（2）如果它有任何其他副檔名，它將被視為less並匯入；
（3）如果它沒有副檔名，以副檔名.less進行匯入；
[email protected] (keyword) "檔名稱";這才是最全的匯入語法，其中【keyword】代表指令，可進行一些匯入
檔案的控制，並支援多指令控制且用逗號分開，可選指令如下：
reference： 使用Less檔案但不輸出
inline： 在輸出中包含原始檔但不處理它
less： 無論副檔名是什麼，都將檔案視為Less檔案
css： 無論副檔名是什麼，都將檔案視為CSS檔案
once： 只包含一次檔案（預設就是包含一次）
multiple： 多次包含該檔案
optional： 找不到檔案時繼續編譯（預設找不到就停止編譯了）4.常用內建函式
//字串
替換：replace(字串,要替換的文字,替換成文字,正則標誌);
replace("One + one = 4", "one", "2", "gi"); //2+2=4
//列表
長度：length(list的變數名稱);
@listall:1,2,3,4;
n: length(@listall); //n: 4
提取：extract(list的變數名稱,下標數字);
val: extract(@listall,2) //val: 3
//數字
取整：ceil(小數) 向上取整
floor(小數) 向下取整
round(小數,小數位數) 四捨五入（並保留幾位小數）