# Scss基本知识点

# 变量

任何可以用作css属性值的赋值都可以用作scss的变量值，甚至是以空格分割的多个属性值。

比如：

$color:#f90;
$myBorder:1px solid red;
$font:"Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial;

变量作用域：

scss变量可以理解为{...}作用域。定义在css规则块内，该变量就只在该规则块内有效。

变量必须先声明，后使用。

变量值也可以引用其他变量。

$color:red;
$border:1px solid $color;

变量命名规则：

变量可以是驼峰式($myBorder)，也可以是中划线($my-border)或下划线($my_border)连接的格式。中划线和下划线分割是等效的。比如：$link-color和$link_color其实指向的是同一个变量。

默认变量值：

!default标签标注变量默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

# 嵌套规则

选择器嵌套：

&在嵌套规则中代表父选择器。这对:hover等伪类非常有用。

#content a{
    color:red;
    &：hover{
        color:blue;
    }
}

/*编译后*/
#content a{
    color:red;
}
#content a:hover{
    color:blue;
}

父选择器标识符(&)之前可以添加额外的选择器。

#content aside{
    color:red;
    #mian &{
        color: blue;
    }
}

/*编译后*/
#content aside{
    color:red;
}
#main #content aside{
    color:blue;
}

scss嵌套规则非常智能，可以在实际使用中多做尝试。

属性嵌套：

嵌套属性的规则是这样的：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。

div{
    border:{
        width:1px;
        style:solid;
        color:#ccc;
    }
}

/*编译后*/
div{
    border-width:1px;
    border-style:solid;
    bordr-color:#ccc;
}

# @import规则

css的@import规则特别不常用，原因是：只有执行到@import规则时，浏览器才会去下载指定的css文件，导致页面加载速度变慢。而scss的@import在文件生成时就导入相关的文件。

使用scss的@import规则可以不指明导入文件的后缀。比如：

@import "colors";  /*相当于 @import "colors.scss"*/

scss局部文件：

局部文件以下划线开头，这样scss文件在编译时就不会单独为该文件输出css文件，而只把这个文件用作导入。

# 混合器 `@mixin`

混合器的目的是实现大段样式代码的重用。

定义混合器： @mixin

最简单的定义：

@mixin rounded-corners{
      -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

使用混合器： @include

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

混合器的使用场景：

判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-corners``fancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。

有参混合器：

定义有参混合器：

@mixin has-params($normal,$hover,$visited){
    color:$normal;
    &:hover{
        color:$hover
    }
    &:visited{
        color:$visited
    }
}

使用有参混合器：

a{
    @include has-params(blue,#ccc,green);
}
/*或者：*/
a{
    @include has-params($normal:blue,$hover:#ccc,$visited:green);
}
/*这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可*/

/*编译结果*/
a{color:blue;}
a:hover{color:#ccc;}
a:visited{color:green;}

# 继承 `@extend`

区分继承和混合器的区别很重要。混合器是实现css规则的重用，而继承是实现选择器的重用。

看懂这篇博客

# 备注

Scss是目前最为强大的css预编译语言，它的SassScript语法接近编程语言：有条件判断、循环等控制语句特性，有函数特性。在实际使用时要多猜想scss能实现你的效果。

← iframe classnames →