CSS預先處理語言——less與sass的使用

標籤：需要   through   運算   智能   類型   選擇   ace   for迴圈   手動   

我們一般所使用的Less跟Sass一般是將其編譯成我們所熟悉的CSS再匯入使用，當然不經編譯，直接在瀏覽器使用

我是習慣用Koala來進行編譯，簡單智能方便，Hbuilder也內建編譯功能，不過要手動，比較麻煩

首先我們來說一下Less。

【Less中的變數】1.聲明變數使用 @變數名：變數值；2.使用變數 @變數名>>less中的變數類型：①數字類 1 10px ②字串：無引號字串 red 和有引號字串"gdak"③顏色類 red #000000 rgb()④值清單類型，用逗號或空格分隔>>變數使用原則 ：多次頻繁出現的值、需要修改的值設為變數  3.混合（MiXins）①無參混和聲明 ：.name{} 調用：選取器中調用②帶參混合無預設值聲明： .name(@param){} 調用：.name(parValue); parValue不可以省略有預設值聲明： .name(param:value()){} 調用：name(parValue)； parValue可以省略>>無參混合會在CSS中編譯同名的class選取器；有參的不會 4.Less的匹配模式使用混合進行匹配，類似於if結構：聲明.name(條件一，參數){}.name(條件二，參數){}.name(@_，參數){}調用： .name(條件值，參數值)；匹配規則：根據調用時提供的條件值，去尋找與之匹配的miXin執行,其中@_表示永遠需要執行的部分 5.Less中的運算*+-/可帶單位可不帶顏色運算時，紅綠藍分三組計算，組內可進位，組間互不干涉。 6.Less中的嵌套：保留HTML中的代碼結構，嵌套預設後代選取器，如果需要子代選取器，則在子代前面加>&表示上一層，&：hover 表示上一層的hover事件   

section p {  color: red;  background-color: blue;  text-align: center;}section ul {  padding: 0px;  list-style: none;}section ul li {  float: left;  margin: 10px;  width: 100px;  text-align: center;  border: 1px solid #000000;}section ul li:hover {  background-color: yellowgreen;}

當然，我們最看好less的一點可能就是它的嵌套了就像上邊要寫這麼長的代碼，使用less來寫就如以下代碼所示，是不是看著舒服了很多，用編譯器編譯完就可以顯示為上邊代碼的樣子了

section{    p{        color: red;        background-color: blue;        text-align: center;    }    ul{        padding: 0px;        list-style: none;        li{            float: left;            margin: 10px;            width: 100px;            text-align: center;            border: @bod;            &:hover{                background-color: yellowgreen;            }        }    }}

下邊來說與一下Sass

1. SASS中的變數使用 $變數名：變數值 聲明變數如果變數名需要在字串中嵌套，則需使用#加大括弧包裹： 2.sass中的運算會將單位也進行運算，使用時需注意最終單位：例：10px*10px=100px*px 3.sass中的嵌套： 選取器的嵌套 屬性嵌套 偽類嵌套選取器的嵌套 ul{li{}}後代ul{>li{}}子代&表示上一層 div{ul{li{&=-=div ul li}}}屬性嵌套 :屬性名稱與大括弧之間必須有： 例如boder:{color:red;}偽類嵌套: ul{li{&:hover{"ul li :hover"}}} 4. 混合宏、繼承、預留位置①混合宏：聲明@mixin name($param:value){}調用：@include name(value)》》聲明時，可以有參可以無參；可帶預設值，但調用必須符合生命規範>>優點：可以傳參，不會產生同名class>>缺點：會將混合宏的代碼copy到對於那個的選取器中②繼承： 聲明： .class{} 調用： @extend .class>>優點：繼承的相同代碼會提取到並集選取器中，減少冗餘代碼，>>缺點：無法進行傳參，會在CSS中產生一個同名class③預留位置：聲明：%class{} 調用： @extend %class>>優點：繼承相同代碼，會提到並集選取器，不會產生同名的class選取器；>>缺點：無法進行傳參 綜上所述：當要傳遞參數時用混合宏，當有現成class時用繼承，不須參數不需class時候用預留位置 5.if條件結構：@if 條件{}@else 條件{} 6.for迴圈結構@for $i from 1 to 10{} 不含十；@for $i from 1 through 10{} 含十； 7.while迴圈結構$j:1;@while $j<10{.while井{$j}{boder:井{$j}px solid red;}$j:$j+1;} 8.each迴圈遍曆@each item in a,b,c,d{//item 表示每一項} 9、函數：@function func($length){$length: $length*5;@return $length;}調用：func(10px); 

相信都能看出sass與less的不同了，定義變數Less用的是@符，Sass用的是$符當然，sass可以用if條件結構，迴圈結構，定義函數比less高大上了許多。所以一般還是用sass來寫，以備以後不時之需

 

CSS預先處理語言——less與sass的使用