sass(3):sass常用语法

30 Mar 2015

1.sass编译风格

* nested：嵌套缩进的css代码，它是默认值。

* expanded：没有缩进的、扩展的css代码。

* compact：简洁格式的css代码。

* compressed：压缩后的css代码。

使用：sass --style compressed test.sass test.css。

你也可以让SASS监听某个文件或目录，sass --watch app/sass:public/stylesheets。

2.导入文件，@import命令，用来导入外部文件。

值得注意的几点是：

1.如果导入的是sass文件，可以省略后缀

2.如果导入的是sass文件，编译时会将@import的scss文件合并进来只生成一个CSS文件

3.如果导入的是css文件，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中

4.一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"

3.注释

                    标准的CSS注释 /* comment */ ，会保留到编译后的文件。
                    单行注释 // comment，只保留在SASS源文件中，编译后被省略。
                    /*! 
                    　　　　重要注释！
                    　*/
                    即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
                

4.变量

                    //普通变量
                    $color: red;
                    //特殊变量
                    $add: radius;
                    //默认变量
                    $color: blue !default;

                    只要定义相同属性，不论在color的前后都可以覆盖他，个人觉得他更像是缺省值
                    还有类似数组的多值变量，竟然还有map，用到时再说
                    .text {
                        color: $color;
                        border: solid 1px red;
                        border-#{$add}: 8px;   
                    }
                

5.计算功能

                    .text {
                        padding-left: 14px+6px;
                        margin-top: 2*5%;
                        margin-bottom: (14px/2); //除法加括号 
                    }
                

6.嵌套

                    .text {
                        .inner {
                            color:green;
                        }
                        a{
                            //可以用 & 引用父元素
                            &:hover {
                                color: red;
                            }
                        }
                    }
                

7.代码重用--继承

                    .son {
                        @extend .text;
                    }
                

8.代码重用--Mixin

//可以定义参数和缺省值，在浏览器前缀中很好用 @mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; } //使用 #navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); }

9.颜色函数

                    //color: lighten,grayscale,complement
                    .yans{
                        color: darken(red,40%);
                    }
                

10.条件语句

                    //if  else
                    /*
                    @if可以用来判断：
                    　　p {
                    　　　　@if 1 + 1 == 2 { border: 1px solid; }
                    　　　　@if 5 < 3 { border: 2px dotted; }
                    　　}
                    配套的还有@else命令：
                    　　@if lightness($color) > 30% {
                    　　　　background-color: #000;
                    　　} @else {
                    　　　　background-color: #fff;
                    　　}
                    */
                

11.循环语句

                    /*
                    SASS支持for循环：
                    　　@for $i from 1 to 10 {
                    　　　　.border-#{$i} {
                    　　　　　　border: #{$i}px solid blue;
                    　　　　}
                    　　}
                    也支持while循环：
                    　　$i: 6;
                    　　@while $i > 0 {
                    　　　　.item-#{$i} { width: 2em * $i; }
                    　　　　$i: $i - 2;
                    　　}
                    each命令，作用与for类似：
                    　　@each $member in a, b, c, d {
                    　　　　.#{$member} {
                    　　　　　　background-image: url("/image/#{$member}.jpg");
                    　　　　}
                    　　}
                    */
                

12.自定义函数

                    /*
                    @function double($n) {
                    　　　　@return $n * 2;
                    　　}
                    　　#sidebar {
                    　　　　width: double(5px);
                    　　}
                    */