SCSS: 芜湖起飞~

SCSS:芜湖起飞~

1. 变量使用

1-1. 变量声明

$my-color : yellow;

• 类似于作用域，当变量定义在模块外时，其他模块都可以使用；而当定义在模块里时，就只能在模块中使用。

1-2. 变量引用

$my-color : yellow;
$my-border : 1px solid $my-color;
header {
    $my-width : 100px;
    color : $my-color;
    width : $my-width;
    border : $my-border;
}

//编译后

header {
    color : yellow;
    width : 100px;
    border : 1px solid yellow;
}

1-3. 变量规则补充

• SCSS不限制-或者_的使用，开发者可随意使用，甚至可以在定义时使用-，引用时使用_。

$my-color : yellow;
a {
    color : $my_color;
}

//编译后
a {
    color : yellow;
}

2. CSS嵌套规则

• css中重复写选择器很烦人，SCSS提供了嵌套规则，减少重复字段。

#div{
    #header{
        a{
            color : yellow;
        }
        p{
            color : green;
        }
    }
    #div #header{
        color : red;
    }
}

// 编译后
#div #header a{color : yellow;}
#div #header p{color : green;}
#div #header {color : red;}

2-1. 父选择器的标识符&

#header div{
  color :  red;
  :hover : green;
}

• 原本预期是给div标签加一个hover，当覆盖时改变颜色，但上面的做法会导致div后代的颜色都变色，因此，SCSS提供了&标识符，表示给当前模块的父选择器添加规定内容。

#header div{
  color :  red;
  &:hover : green;
}

//编译后
#header div{
    color : red;
}
#header div:hover{
    color : green;
}

2-2. 群组选择器嵌套

#header,#footer{
    a,p{
        color : red;
    }
}

//编译后
#header a{color:red}
#header p{color:red}
#footer a{color:red}
#footer p{color:red}

2-3. 同层组合选择器

• 当需要选择同层相邻的元素时，可利用+标识符来表示同层的元素

header{
    #h1 + #h2{
        color : red;
    }
}

• 也可以用同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素.

article ~ article { 
    border-top: 1px dashed #ccc
}

2-4. 嵌套属性

• 当需要写大量有前缀的属性名时，可将前缀加：后，后面紧跟一个块写所需属性；

nav { 
    border:{
        style : solid;
        color : red;
        width : 1px;
    }
}

3.导入SASS文件

• 当需要重外部导入scss文件时，可通过关键字@import加上文件路径即可。

@import './index.scss';
@import './index'
@import './style.css'

3-1.局部文件

• 在文件名前加下划线_，表示此文件为局部文件，不需要单独生成scss文件；
• 而引用时，可省略下划线和后缀名，scss同样可以搜寻到该文件；

3-2.默认变量值

• 当重复声明一个变量时，后面的变量值会覆盖前面的变量值，scss提供了关键字!defalult，若变量中添加了该关键字，则后面对该变量的赋值将失效。

$my-color : red !default;
header {
    a{
        color : $my-color;
    }
}

$my-color : blue;	//失效

3-3.嵌套导入

• scss允许在块级中导入局部scss文件。

4.静默注释

• scss提供了“//”的注释方式，这种注释不会出现在生成的css文件中，因此称为静默注释。

5.混合器

• 当网站中有许多样式需要重复使用时，可以通过混合器的方式将这些样式保存起来；
• 混合器使用@mixin标识符定义。当其他地方需要使用时，只需通过@include的方式进行引用即可。

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

content {
    background-color : skyblue;
    border : 1px solid green;
    @include rounded;
}

//编译后
content {
    background-color : skyblue;
    border : 1px solid green;
    border-radius : 10px;
}

5.1 混合器中的css规则

• 混合器中不仅可以包含属性，还可以包含css规则

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
}

//scss可自动继承混合器的css规则

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

5.2 混合器传参及默认值

• 没错，混合器也可以像函数一样设定参数。

@mixin link-color($color,$hcolor: $color){
    color : $color;
    &hover : $hcolor;
}

a {
    @include link-color(red,green);
}
p {
    @include link-color(red);
}

// 编译后

a {
   color : red;
}

a :hover {
    color : green;
}
p {
   color : red; 
}
p:hover{
    color : red;
}

6.选择器继承精简css

• scss提供了@extend语法供选择器实现继承。

.header {
    color : red;
    border : 1px solid green;
}

content {
    @extend .header;
    border-radius : 2px;
}