**編譯風格
需要先安裝nodejs（因為sass/less都是基於js開發的。node -v 檢查是否安裝成功）
全域性安裝less命令：npm i less -g（許可權不夠：sudo npm install less -g 最高許可權安裝。vscode不用裝，直接用外掛程式）
vscode安裝less：直接加乙個easy less外掛程式
vscode使用less：直接新建乙個.css和.less檔案，html中引入.css或.less檔案
webstorm使用less：新建stylesheet–less file ，新建的less裡面自帶css
可使用css語法
巢狀 ------------後代直接寫在裡面，不超過三層
父選擇器-----&符號-----可以解決巢狀不超過三層的問題
變數 ----------@定義變數，後代用@名字取值
作用域：只能在同乙個{}
變數在字串中需要用{}包起來：比如"@01.png"
混合 -----------引用其他類的樣式，直接寫其他類
有參混合：無引數，比如：.box;或.box();或.box()
無參混合：有引數，比如：.box(引數值); 缺點：有多個引數時，引用傳值需要一一對應
@arguments ：所有引數按順序填寫時可用@arguments代替
運算 ----------基本運算或運算函式。比如round、ceil取整等等
繼承 ----------:extend 偽類選擇器，結果與混合一樣的。但是繼承不能有引數
可匯入其他檔案@import
//全域性變數---區域性變數朝具體類中寫
@width
:200px;
@url
:'../img/'
;.box1
01.png");}
//無參混合
.box2
//有參混合---不能直接生成css，需要引入到其他地方
.box3
(@width
:1px;
@style
:solid;
@color
:red)
.box3_last
//運算
.box4
//繼承
//與無參混合一樣的效果
.box5:extend(.box1)
//判斷
.box6(@w
)when
(@w>0)
//基礎判斷
.box6(@w
)when
(@w>0) and when(@w
<50)
//與.box6(@w
)when
(@w>0),when
(@w>10)
//或.box6(@w
)when(@w
<10) not when
(@w>100)
//非.box7
vscode安裝sass：直接加乙個live sass compiler外掛程式。重啟點右下角 watching
vscode使用sass：直接新建乙個.css和.sass檔案，html中引入.css或.sass檔案
與less大多相同。
sass宣告變數用符號,使用
也用
, 使用也用
,使用也
用(sass變數在字串中用#,less用@{})
sass用混合前面加上@mixin ，呼叫加上@include
控制指令 判斷@if 、迴圈@for @each @while
函式更強大：比如random()等，更可以自定義函式@function(){}
可匯入其他檔案@import
$width
:200px;
@url
:'../img/'
;@mixin box1
01.png")
}//無參混合
.box2
// 判斷 @if
.box3
}//迴圈 @for
//from to 從1到5，不包括5
//from through 從1到5，包括5
@for $num from 1 through 5
.item:nth-child(#
)width
: $num * 1px;}}
// 迴圈 @each （遍歷列表）
@each $color in red,blue,green,yellow,pink.#}
// 迴圈 @while
$numb
: 0;
@while $numb < 5
$numb
: $numb + 1;
}// 函式
.box1
//自定義函式
@function
add($a,$b)
.myhanshu
expanded：不縮排
compact：壓縮至，乙個選擇器整體佔一行
compressed：究極壓縮，到沒得空格
css預處理器（less，sass）
body content less和sass對於巢狀的處理方法類似，都可以將如上型別的檔案處理成普通的css檔案 直接看 less 中變數前加 sass中是 fontsize 12px bgcolor red body content 解決了css中復用的問題 less中只需要 box name 就...
css預處理器
css預處理定義了一種新的語言，其思想是一種專門的程式語言，為css增加了一些程式設計的特性。將css作為目標生成檔案。開發者可以使用這種語言進行編碼工作。css預處理器是一種專門的程式語言，進行web頁面樣式設計，然後再編譯成正常的css檔案，以供專案使用。css預處理器為css增加了一些程式設計...
CSS預處理器
什麼是css預處器？css 預處理器用一種專門的程式語言，進行 web 頁面樣式設計，然後再編譯成正常的 css 檔案，以供專案使用。css 預處理器為 css 增加一些程式設計的特性，無需考慮瀏覽器的相容性問題 sass sass 是採用 ruby 語言編寫的一款 css 預處理語言，它誕生於20...