這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)CSS框架sass的示例分析，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)建站長期為1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為長壽企業(yè)提供專業(yè)的成都網(wǎng)站制作、網(wǎng)站建設(shè)，長壽網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

sass結(jié)尾的文件有著更嚴(yán)格的格式要求，scss文件更貼近原生css

比如sass文件

CSS 

1. #main    

2.   color: #fff  

3.   &-sidebar   

4.     border: 1px solid  

等同于scss的

CSS 

1. #main {   

2.   color: black;   

3.   &-sidebar { border: 1px solid; }   

4. }  

編譯后為

其中代表父級元素的& 只可出現(xiàn)在頭部，否則解析不出來。
嵌套屬性

CSS 

1. .funky {   

2.   font: {   

3.     family: fantasy;   

4.     size: 30em;   

5.     weight: bold;   

6.   }   

7. }  

編譯為

CSS 

1. .funky {   

2.   font-family: fantasy;   

3.   font-size: 30em;   

4.   font-weight: bold; }  

這個在一些復(fù)雜的css3屬性上用處比較大，比如animate
字符串內(nèi)插

使用#{}作為選擇器變量

CSS 

1. $name: foo;   

2. $attr: border;   

3. p.#{$name} {   

4.   #{$attr}-color: blue;   

5. }   

6.   

7. p {   

8.   $font-size: 12px;   

9.   $line-height: 30px;   

10.   font: #{$font-size}/#{$line-height};   

11. }  

第二個例子如果不用字面量則12除30
運算符

CSS 

1. p {   

2.   width: 1in + 8pt;   

3. }  

單位如果可以轉(zhuǎn)換，會被自動轉(zhuǎn)換
編譯為：

CSS 

1. p {   

2.   width: 1.111in; }   

3.   

4. p {   

5.   font: 10px/8px;             // Plain CSS, no division   

6.   $width: 1000px;   

7.   width: $width/2;            // Uses a variable, does division   

8.   width: round(1.5)/2;        // Uses a function, does division   

9.   height: (500px/2);          // Uses parentheses, does division   

10.   margin-left: 5px + 8px/2px; // Uses +, does division   

11. }  

直接字面量，變量使用，函數(shù)，括號，優(yōu)先級
以上編譯為

CSS 

1. p {   

2.   font: 10px/8px;   

3.   width: 500px;   

4.   height: 250px;   

5.   margin-left: 9px;    

6. }  

顏色：

CSS 

1. p {   

2.   color: #010203 + #040506;//相加 rbg三位分別相加   

3.   color: #010203 * 2;//相乘   

4.   color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);//帶alpha通道的疊加   

5.   

6.   color: opacify($translucent-red, 0.3);//控制透明的函數(shù)，加強非透明   

7.   background-color: transparentize($translucent-red, 0.25);  //控制透明的函數(shù)，加強透明   

8. }  

默認(rèn)變量：

CSS 

1. $content: "First content";   

2. $content: "Second content?" !default;   

3. $new_content: "First time reference" !default;   

4.   

5. #main {   

6.   content: $content;   

7.   new-content: $new_content;   

8. }  

!default 如變量被賦值使用之前的賦值，沒被賦值，賦值

上述就是小編為大家分享的CSS框架sass的示例分析了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。