SCSS快速入门

一.使用变量

你可以把反复使用的css属性值定义成变量,然后通过变量名来引用他们,而无须重复书写这一属性值.
sass使用$符号来标识变量.
当变量定义在css规则块内,那么该变量只能在此规则块内使用.
css生成时,变量会被他们的值所替代,之后,如果你需要一个不同的值,只需要改变这个变量的值,
则所有引用此变量的地方生成的值都会随之改变.

$red: #f00;
$plain-font: Arial, sans-serif;
$basic-border: 1px solid #000;

.demo {
    color: $red;
    font-family: $plain-font;
    border: $basic-border;
    $p100: 100px;
    width: $p100;
    height: $p100;
}

二.嵌套CSS规则

1.一个给定的规则块,既可以像普通的css那样包含属性,又可以嵌套其他规则块.
当你同时要为一个容器元素及其子元素编写特定样式时,这种能力就非常有用了.
2.父选择器的标识符&
当你为链接之类的元素写:hover这种伪类时,你并不希望以后代选择器的方式连接.
3.群组选择器的嵌套
如果你需要在一个特定的容器元素内对这样一个群组选择器进行修饰.
4.属性嵌套
嵌套属性的规则是这样的:把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{}块,把子属性部分写在这个{}块中.

三.导入CSS文件

1.sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来.
这意味着所有相关的样式被归纳到了同一个css文件中,而无需发起额外的下载请求.
2.sass局部文件的文件名以下划线开头,这样,sass就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入.
3.默认变量值
使用css的!default标签,就像css属性中!importtant标签的对立面,不同的是!default用于变量,
如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值.
4.嵌套导入

四.静默注释

sass另外提供了一种不同于css标准注释格式/.../的注释语法,即静默注释,其内容不会出现在生成的css文件中.

五.混合器

1.如果你的整个网站中有几处小小的样式类似,那么使用变量来统一处理这种情况是非常不错的选择.
但当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的的变量就没办法应付这种情况了.
你可以通过sass的混合器实现大段样式的重用.
混合器使用@mixin标识符定义.这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式.
然后你可以在你的样式表中通过@include来使用这个混合器,放在你希望的任何地方.
2.给混合器传参
混合器并不一定总得生成相同的样式,可以通过在@include混合器时给混合器传参,来定制混合器生成的精确样式.

六.使用选择器继承来精简css

基于Nicole Sullivan面向对象的css的理念,选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式,这个通过@extend语法实现.

@import 'coll-base';

$red: #f00;
$plain-font: Arial, sans-serif;
$basic-border: 1px solid #000;

@mixin border-radius($radius) {
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

.demo {
    color: $red;
    font-family: $plain-font;
    border: $basic-border;
    $p100: 100px;
    width: $p100;
    height: $p100;
}

.collections {
    border: $basic-border;
    .demo2 {
        color: #ccc;
    }
    &:hover {
        border-color: #0f0;
    }
    .error, .seriousError {
        background-color: #fdd;
        font-size: $fontSmall;
        @include border-radius(50%);
    }
    .disabled {
        color: #ccc;
        background-color: #fdd;
        font-size: $fontMid;
    }
    .disabled2 {
        @extend .disabled;
        font-size: $fontBig;
    }
}