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;
}

 

CSS預先處理架構：less，scss