CSS框架sass的簡單一覽

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

　　比如sass文件

　　CSS Code復制內容到剪貼板

　　#main

　　color: #fff

　　&-sidebar

　　border: 1px solid

　　等同於scss的

　　CSS Code復制內容到剪貼板

　　#main {

　　color: black;

　　&-sidebar { border: 1px solid; }

　　}

　　編譯後為

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

　　嵌套屬性

　　CSS Code復制內容到剪貼板

　　.funky {

　　font: {

　　family: fantasy;

　　size: 30em;

　　weight: bold;

　　}

　　}

　　編譯為

　　CSS Code復制內容到剪貼板

　　.funky {

　　font-family: fantasy;

　　font-size: 30em;

　　font-weight: bold; }

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

　　字符串內插

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

　　CSS Code復制內容到剪貼板

　　$name: foo;

　　$attr: border;

　　p.#{$name} {

　　#{$attr}-color: blue;

　　}

　　p {

　　$font-size: 12px;

　　$line-height: 30px;

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

　　}

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

　　運算符

　　CSS Code復制內容到剪貼板

　　p {

　　width: 1in + 8pt;

　　}

　　單位如果可以轉換，會被自動轉換

　　編譯為：

　　CSS Code復制內容到剪貼板

　　p {

　　width: 1.111in; }

　　p {

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

　　$width: 1000px;

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

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

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

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

　　}

　　直接字面量，變量使用，函數，括號，優先級

　　以上編譯為

　　CSS Code復制內容到剪貼板

　　p {

　　font: 10px/8px;

　　width: 500px;

　　height: 250px;

　　margin-left: 9px;

　　}

　　顏色：

　　CSS Code復制內容到剪貼板

　　p {

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

　　color: #010203 * 2;//相乘

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

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

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

　　}

　　默認變量：

　　CSS Code復制內容到剪貼板

　　$content: "First content";

　　$content: "Second content?" !default;

　　$new_content: "First time reference" !default;

　　#main {

　　content: $content;

　　new-content: $new_content;

　　}

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