Sass高效编写css

群组选择器的嵌套

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

//css
nav a, aside a {color: blue}
//sass
nav, aside {
  a {color: blue}
}

'>'子组合选择器

article > section { border: 1px solid #ccc }
//选择一个元素的直接子元素，只在紧跟着的子元素中检索

属性的嵌套

//css完全体
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
//sass简化体
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

导入Sass文件

当你在一个sass文件中声明了一个属性（比如一个背景色被声明在color.scss中），你又想在另一个sass文件中使用这个属性，就需要用到@import导入它。

//目标sass文件
@import "color";
body{
  background-color: $primary-color;
}
//引入“color”之后，color中所声明的所有属性都可以在该文件中直接使用

值得一提的是，sass语法完全兼容css，因此可以使用@import直接导入css文件，不过这里导入的css只会在浏览器读取到前面的@import时才会下载该文件，正因如此，原生引入css会造成页面加载缓慢。为了解决这个问题，可以将css文件后缀直接改为scss，最后sass生成一个css文件，浏览器无需下载其他文件。

混合器

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

这是一个简单的兼容不同浏览器的圆角样式，假如我们的页面中有很多这样的样式，我们就要写很多相同的语句来定义这种样式，不过sass为我们提供了混合器直接调用。
就像上面的代码一样，@mixin+变量名+{……}
调用方法也很简单：@include+变量名即可。

notice {
  @include rounded-corners;
}

一边学习一边总结，今天先更新到这里。

  之前挖的坑，现在才来填。上次说一遍学习一边总结，但事实是我再也没有把这篇博客更新下去，今天忽然想起来，一是来陪个罪，二是来分享分享之前学sass的感受
  其实我在上次写这篇博客的时候自己也没有觉得sass很牛，只是学习路线上有这个东西，自己就学习了。真正让我认识到sass的强大是在我在写完这篇博客之后不几天接到的一个项目，那是一个官网的项目，当时我的任务是写一个主页出来。由于刚学习了sass，所以索性直接在那次项目上直接用了。不用不知道，一用吓一跳，这么说吧，主页一天我就把它写完了，并且是PC端+移动端两个任务一下子全部解决了。
  后来我也思考过为什么sass能让我的编写效率提升的这么大，我觉得这一切，都要归功于sass清晰的代码格式，sass的代码格式，你能一眼看出谁和谁的关系，而不再需要自己再去页面上点半天，找这块元素的父元素，找那个元素的子元素，也就是这个清晰的代码布局，让我的编写效率提升了至少三倍。