Scss常用语法

Scss作为css的一种预处理器，为css提供一些编程特性，比如变量，函数等， 从而提供代码的复用，进而优化代码。
Sass和Scss的区别：

• 后缀名不同 .sass/.scss
• sass是通过严格的缩进来表示层级， scss是通过{}来表示层级

常用语法

1. 变量使用 通过$开头来定义变量

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

2. 嵌套规则

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

// 编译后

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

3. 父级选择器的标识符&
   当你为链接之类的元素写：hover这种伪类时

article a {
  color: blue;
  &:hover { color: red }
}

// 编译后
article a { color: blue }
article a:hover { color: red }

4. 群组选择器的嵌套

nav, aside {
  a {color: blue}
}

// 编译后

nav a, aside a {color: blue}

5. 子组合选择器和同层组合选择器(>, +, ~)

• 子组合选择器: >

article section { margin: 5px }  // 会选择article下所有的section元素
article > section { border: 1px solid #ccc } // 只会选择article下紧跟着的子元素中命中section选择器的元素

• 同层相邻选择器: +

header + p { font-size: 1.1em } // 选择`header`元素后紧跟的`p`元素

• 同层全体组合选择器: ~

article ~ article { border-top: 1px dashed #ccc } // 选择所有跟在`article`后的同层`article`元素

6. 嵌套属性

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

// 编译后

nav {
    border: 1px solid #ccc;
    border-left:0px;
    border-right: 0px;
}

7. 混合器(@mixin)
   使用混合器可以重用大段相同的代码

@mixin button-base {
    display: inline-block;
    border: 1px solid transparent;
    height: 20px;
    padding: 0px 20px;
    border-radius: 5px;
    background: transparent;
}

// 通过@include来使用
.s-btn {
    @include button-base;
}

// 编译后
.s-btn {
    display: inline-block;
    border: 1px solid transparent;
    height: 20px;
    padding: 0px 20px;
    border-radius: 5px;
    background: transparent;
}

8. 给混合器传参

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

a {
  @include link-colors(blue, red, green);
}

// 编译后：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

9. 选择器继承(@extend)

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 编译后

.seriousError {
    border: 1px solid red;
    background-color: #fdd;
    border-width: 3px;
}