变量

变量定义

$变量名: 变量值;

$color: red;

变量使用

$变量名

$变量名不能使用在CSS选择器和属性名中

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

嵌套规则

普通嵌套

• 类似于大盒套小盒 大盒可以同时装小盒和东西
  • 大盒相当于父级
  • 小盒相当于子级
  • 东西相当于父级本身的属性
• 父级的属性会单独生成CSS样式

SCSS源码

@charset "UTF-8";

#content {
  background: red;
  article {
    font-size: 12px;
    h1 {
      font-size:24px;
    }
    p {
      line-height:24px;
    }
  }
  aside {
    background: green;
  }
}

CSS源码

#content {
  background: red; }
  #content article {
    font-size: 12px; }
    #content article h1 {
      font-size: 24px; }
    #content article p {
      line-height: 24px; }
  #content aside {
    background: green; }

父选择器嵌套 &

• 伪类选择器

  SCSS源码

  @charset "UTF-8";
  
  #content {
    background: red;
    article {
      a {
        color:white;
      }
      &:hover {
        text-decoration:underline;
      }
    }
  }
  

  CSS源码

  #content {
    background: red; }
    #content article a {
      color: white; }
    #content article:hover {
      text-decoration: underline; }
  
  

  ​

• 后置 & 父选择器之前添加选择器

  SCSS源码

  @charset "UTF-8";
  
  #content {
    background: red;
    article {
      color:green;
    }
    body & {
      font-size: 12px;
    }
  }
  

  CSS源码

  #content {
    background: red; }
    #content article {
      color: green; }
    body #content {
      font-size: 12px; }
  

群组选择器嵌套

SCSS源码

@charset "UTF-8";

nav, aside {
  a {
    color: blue
  }
}

CSS源码

nav a, aside a {
  color: blue; }

组合选择器嵌套

• > 子选择器
• + 同层相邻组合选择器
• ~ 同层全体组合选择器

属性嵌套

SCSS源码

@charset "UTF-8";

nav {
  //属性嵌套
  border: {
    style: solid;
    width: 1px;
    radius: 8px;
  };
  //指明例外规则
  margin:0 {
    bottom: 0;
  };
}

CSS源码

nav {
  border-style: solid;
  border-width: 1px;
  border-radius: 8px;
  margin: 0;
    margin-bottom: 0; }

导入SASS文件

@import

SCSS源码

@import "路径";

默认变量值

• $变量名: 变量值 !default;

SCSS源码

@charset "UTF-8";

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

CSS源码

.box {
  width: 400px; }

嵌套导入

SCSS源码

//width.scss

$box-width: 400px !default;

//theme.scss
aside {
  background: blue;
  color: white;
}


@charset "UTF-8";

@import "width";
.box {
  @import "theme";
  width: $box-width;
}

CSS源码

.box {
  width: 400px; }
  .box aside {
    background: blue;
    color: white; }

以上是两种导入方式

原生CSS导入

• CSS@import

注释

// 这种注释内容不会出现在生成的css文件中

/* 这种注释内容会出现在生成的css文件中 */

混合器

• 混合器实际大段样式重用
• 混合器类似函数
• 混合器主要用于样式展示层的重用

混合器定义@mixin

SCSS源码

@mixin 混合器名称 {
    ......
}

混合器的使用@include

SCSS源码

@charset "UTF-8";

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

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

CSS源码

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; }

使用混合器的场景

利用混合器，可以很容易地在样式表的不同地方共享样式。如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。

混合器中的CSS规则

SCSS源码

@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;
}

CSS源码

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

混合器传参

SCSS源码

@charset "UTF-8";

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

//必须按顺序调用
a {
  @include link-colors(blue, red, green);
}

//不必按顺序调用
a {
  @include link-colors(
  $normal: blue,
  $visited: green,
  $hover: red
  );
}

CSS源码

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

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

混合器参数默认值

SCSS源码

@charset "UTF-8";

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

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

CSS源码

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

继承 @extend

继承占位符 %

混合器/继承/占位符区别

1040067-20161019114010342-630734152.jpg