Sass学习与理解

一前言 Sass 和 SCSS 区别

最开始，Sass 是Haml的一部分，Haml 是一种预处理器，由 Ruby 开发者设计和开发。因为这样，Sass 使用类似 Ruby的语法，没有花括号，没有分号，具有严格的缩进,严格的缩进是用来区别语义范围的,由于有严格的缩进
所以写起不很是很方便.所以后来他们也开发了SCSS,更贴近CSS的语法,使用了符号 { }代替了严格缩进,使学习起来几乎为零学习曲线,更易于阅读,融合了Sass的语法,使用起来更强大.

Sass,一种缩进语法预处理器
SCSS(Sassy CSS),一种 CSS-like 语法预处理器

二 Sass特性

变量

使用 $ 定义变量,例如:

$highlight-color: #F90;

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

//编译后

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

变量不区分中划线或者下划线

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

嵌套CSS 规则

css中重复写选择器是繁复的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID父类很多次来定义样式于是:

#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 }

使用伪类嵌套时需要使用 $ 来连接父类

#content aside {
  color: red;
  body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

嵌套属性

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

静默注释

sass另外提供了一种不同于css标准注释格式/ … /的注释语法，即静默注释，其内容不会出现在生成的css文件中。静默注释的语法跟JavaScript``Java等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合器mixin

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

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。

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

//sass最终生成：

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

量的重用混合器可能会导致生成的样式表过大，导致加载缓慢。要注意使用混合器的场合.

选择器继承

混合器主要用于展示性样式的重用
类名继承主要用于语义化样式的重用

选择器继承使用环境:

样式表同一地方重复样式可以使用,选择器组.
分散在样式表不同地方,可以使用混合器.
分散在样式表各处时,你需要更清晰地表达这种关系,应该使用@extend 继承.

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

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

注意:不要用后代选择器去继承

参考文章

Sass用法指南阮一峰 http://www.ruanyifeng.com/blog/2012/06/sass.html
Sass基础教程 http://www.sasschina.com/guide/

一 前言 Sass 和 SCSS 区别