CSS框架sass的简单一览_Div+Css教程--HTML5中文学习网

　　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 如变量被赋值使用之前的赋值，没被赋值，赋值