CSS框架sass的示例分析

這期內容當中小編將會給大家帶來有關CSS框架sass的示例分析，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

sass結尾的文件有著更嚴格的格式要求，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. }  

編譯后為

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

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

這個在一些復雜的css3屬性上用處比較大，比如animate
字符串內插

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

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

單位如果可以轉換，會被自動轉換
編譯為：

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

直接字面量，變量使用，函數，括號，優先級
以上編譯為

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);//控制透明的函數，加強非透明   

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

8. }  

默認變量：

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的示例分析了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。