CSS預處理框架：less，scss

CSS預處理器：less和sass：CSS 預處理器是一種語言用來爲 CSS 增長一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在 CSS 中使用 變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可讓你的 CSS 更 見簡潔，適應性更強，代碼更直觀等諸多好處。

less框架的應用：
less一門標記性語言，HTML文件仍是連接生成的css文件
註釋：
單行註釋：//編譯後不會出如今同名的css文件中
多行註釋：/* */編譯後會出如今同名的css文件中

1.新建less文件
2.在編輯器中編譯，會看見自動生成一個同名的css文件

變量：
less文件中
@border—color（@變量名）:white（變量值）
table（選擇器）{
border（屬性）:1px solid @border-color
}

less中的變量和其餘編程語言同樣，能夠實現值的複用，並且也有生命週期，也就是變量範圍，簡單講就是局部變量仍是 全局變量的概念，查找變量的順序是先在局部定義中找，若是找不到，則查找上級定義，直至全局。

Mixins(混入)
它是多重繼承的一種實現，在less中，混入是指在一個class中引入另一個已經定義的class，就像在當前class中增長 一個屬性同樣。文本樣式會被繼承

.border{border:solid 5px black} //聲明一個樣式
.box{width:100px;height:100px;.border}

 Sass框架的應用：

Sass,是以.sass爲擴展名，語法是縮進式，沒有分號，大括號，不方便使用，以後改良爲Scss
Scss是Sass以.scss爲擴展名，是Sass的改進：
Scss語法：
變量：
用$+變量名
編譯後會出現一個map結尾的文件，沒用，同時生成一個同名的css文件，HTML中一樣連接css文件默認變量和普通變量：默認後在值的後面有！default

混合宏：當單獨的屬性須要統一處理，
@mixin是用來聲明混合宏的關鍵字，@include調用混合宏@mixin 變量名{}

@include 變量名
帶參就在變量名後面加（）
@extend 關鍵詞用來繼承已存在的類樣式快
%placeholder佔位符，當調用的時候纔在css文件中出現，不調用時在css中不會出現 聲明：%變量名{。。。}，而基類 .
變量名{}一旦編譯，一直都存在css文件中

 

總結：

何時該用混合宏@mixin、何時該用繼承@extend、何時該用佔位符%呢？

混合宏的使用：它不會自動合併相同的樣式代碼，若是在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗餘。不過他並非一無事處，他能夠傳參數。若是你的代碼塊中涉及到變量，建議使用混合宏來建立相同的代碼塊。
繼承：使用繼承後，編譯出來的 CSS 會將使用繼承的代碼塊合併到一塊兒，經過組合選擇器的方式展示，這樣編譯出來的代碼相對於混合宏來講要乾淨易讀。可是它不能傳變量參數。若是你的代碼塊不須要傳任何變量參數，並且有一個基類已在文件中存在，那麼建議使用繼承。

 

less:
//單行註釋，你猜我會不會被編譯
/*多行註釋，你猜我會不會被編譯*/
@yhColor:green;
@yhWidth:100px;
@yhHeight:200px;
.yhRad{
border-radius: 10px;
}
//括號裏叫作參數
.yhRad2(@canshu){
border-radius: @canshu;
}

 

.p1,.p2,.p3,.p4{
color: @yhColor;
}
.box1{
width: @yhWidth;
height: @yhWidth;
//.yhRad;
.yhRad2(10px);
background: @yhColor;
}

//嵌套寫法，嵌套規則與HTML相同

// &表明上一層選擇器
a {
color: red;
text-decoration: none;
&:hover {
color: black;
text-decoration: underline;
}
}

.box2{
width: @yhHeight + 50;
height: @yhHeight;
background: red;
}

 

 

-------------------------------------------------------

 

 

scss:
$yhColor:red;
@mixin yhBr{
border-radius: 10px;
}
@mixin yhBr2($wanwan){
border-radius: $wanwan;
}
.moren{
outline: none;
padding: 5px 10px;
}
%beitai{
font-family: "Microsoft Yahei";
}

 

.p1{
color: $yhColor;
}
.box1{
border:{
top:2px solid #ccc;
right: 2px dashed #58a;
bottom: 6px double #faa;
left: 2px dotted pink;
}
}
.box2{
width: 200px;
height: 200px;
@include yhBr;
}
.box3{
width: 100px;
height: 100px;
@include yhBr2(50%);
}
.btn1{
@extend .moren;
background: #fff;
color: #000;
}
.btn2{
@extend .moren;
font-size: 30px;
@extend %beitai;
}