DIV CSS 佈局教程網

這篇文章主要介紹了CSS框架sass的簡單一覽,像嵌套屬性和運算符等主要特性都在文中有簡單的介紹,需要的朋友可以參考下

sass結尾的文件有著更嚴格的格式要求，scss文件更貼近原生CSS

比如sass文件

CSS Code復制內容到剪貼板

1. #main
2. color: #fff
3. &-sidebar
4. border: 1px solid

等同於sCSS的

CSS Code復制內容到剪貼板

1. #main {
2. color: black;
3. &-sidebar { border: 1px solid; }
4. }

編譯後為

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

CSS Code復制內容到剪貼板

1. .funky {
2. font: {
3. family: fantasy;
4. size: 30em;
5. weight: bold;
6. }
7. }

編譯為

CSS Code復制內容到剪貼板

1. .funky {
2. font-family: fantasy;
3. font-size: 30em;
4. font-weight: bold; }

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

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

CSS Code復制內容到剪貼板

1. $name: foo;
2. $attr: border;
3. p.#{$name} {
4. #{$attr}-color: blue;
5. }
7. p {
8. $font-size: 12px;
9. $line-height: 30px;
10. font: #{$font-size}/#{$line-height};
11. }

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

CSS Code復制內容到剪貼板

1. p {
2. width: 1in + 8pt;
3. }

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

CSS Code復制內容到剪貼板

1. p {
2. width: 1.111in; }
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 Code復制內容到剪貼板

1. p {
2. font: 10px/8px;
3. width: 500px;
4. height: 250px;
5. margin-left: 9px;
6. }

顏色：

CSS Code復制內容到剪貼板

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通道的疊加
6. color: opacify($translucent-red, 0.3);//控制透明的函數，加強非透明
7. background-color: transparentize($translucent-red, 0.25); //控制透明的函數，加強透明
8. }

默認變量：

CSS Code復制內容到剪貼板

1. $content: "First content";
2. $content: "Second content?" !default;
3. $new_content: "First time reference" !default;
5. #main {
6. content: $content;
7. new-content: $new_content;
8. }

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