15分钟包会sass终极教程

1. 变量声明;

$highlight-color: #F90;复制代码

2. 变量引用;

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

3. 嵌套CSS 规则;

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

4. 父选择器的标识符&;

错误的写法如下：
article a {
  color: blue;
  :hover { color: red }
}

正确的写法如下：

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

编译后：
article a { color: blue }
article a:hover { color: red }复制代码

5. 群组选择器的嵌套;

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

nav, aside {
  a {color: blue}
}

ps:这样写都能编译复制代码

6. 子组合选择器和同层组合选择器：>、+和~;

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

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

编译后：
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }复制代码

7. 嵌套属性;

在sass中，除了CSS选择器，属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕，但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中，你只需敲写一遍border：


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

编译后：

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



对于属性的缩写形式，你甚至可以像下边这样来嵌套，指明例外规则：
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
这比下边这种同等样式的写法要好：
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}复制代码

8. 默认变量值;

使用sass的!default标签可以实现这个目的。它很像css属性中!important标签的对立面，不同的是!default用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}复制代码

9. 混合器;

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。

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

编译后：

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

10. 给混合器传参;

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。


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

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

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


编译后：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }复制代码

11. 默认参数值;

为了在@include混合器时不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用，如下代码：

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

12. 使用选择器继承来精简CSS;

用sass的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码:


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

在上边的代码中，.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"。相关元素不仅会拥有一个3px宽的边框，而且这个边框将变成红色的，这个元素同时还会有一个浅红色的背景，因为这些都是在.error里边定义的样式。复制代码

转载于:https://juejin.im/post/59e4a68e6fb9a0450406edd8