Sass入门

关于Sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

安装sass

1. 下载并安装Ruby，安装时勾选Add Ruby executables to your PATH。（mac不需要安装）

2. 更换gem源：
1.删除原gem源

gem sources --remove https://rubygems.org/

2.添加国内淘宝源

gem sources -a https://ruby.taobao.org/

3.打印是否替换成功

gem sources -l

4.更换成功后打印如下

https://ruby.taobao.org/

3. 安装Sass和Compass

gem install sass
gem install compass

编译Sass

由于使用WebStorm进行前端开发，在此只记录在WebStorm下的编辑。

打开设置界面（Ctrl+Alt+S），找到Tools -> File Watcher，点击右侧“+”进行添加。如下图：

Sass最新的文件后缀为scss，所以文件类型选择scss：

之后，在项目中创建的scss文件，保存后会自动进行编译，自动创建了一个css文件和一个map文件：

快速入门

1、 变量

sass用$标识变量，可以在规则块内定义，也可以在规则块外定义。

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

在声明变量时，变量值也可以引用其他变量：

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

//编译后

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

2、 嵌套

css中有时需要重复写选择器，如果使用sass，可以进行简化，可读性更高。一个规则块内，既可以像普通css那样包含样式属性，也可以嵌套其他规则块。

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

 /* 编译后 */
#content { background-color: #f5f5f5; }
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

2-1 父选择器的标识符”&”

一般情况下，sass在解开一个嵌套规则时就会把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside）。这种在CSS里边被称为后代选择器，因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。

最常见的一种情况是当你为链接之类的元素写：hover 这种伪类时，你并不希望以后代选择器的方式连接。比如说，下面这种情况sass就无法正常工作：

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

这意味着color: red这条规则将会被应用到选择器article a :hover，article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的！你想把这条规则应用到超链接自身，而后代选择器的方式无法帮你实现。

解决之道为使用一个特殊的sass选择器，即父选择器。在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且可以放在任何一个选择器可出现的地方：

article a {
  color: blue;
  &:hover { color: red }
  body.ie & { color: green }
}
/* 编译后 */
article a { color: blue }
article a:hover { color: red }
body.ie aside a { color: green }

2-2 群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}
/* 编译后 */
.container h1, .container h2, .container h3 { margin-bottom: .8em }

nav, aside {
  a {color: blue}
}
/* 编译后 */
nav a, aside a {color: blue}

2-3 组合选择器

子组合选择器">"：选择一个元素的直接子元素。
同层相邻组合选择器"+"：选择A元素后紧跟的B元素。
同层全体组合选择器"~"：选择所有跟在A后的同层B元素，不管它们之间隔了多少其他元素。

这些组合选择器可以毫不费力地应用到sass的规则嵌套中：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
/* 编译后 */
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 }

2-4 嵌套属性

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
/* 编译后 */
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3、导入

css可以使用@import，将一些的css文件引入到另一个css文件中。但是只有执行到@import时，浏览器才会加载其他css文件，这样会导致页面加载很慢。
而sass的@import规则，则是在生成css文件时，就将引入的css文件导入进来。例如a.scss引入了b.scss，在a.scss编译时，会将a.scss的内容和b.scss的内容共同编译，生成一个a.css文件。

注1：如果sass文件只包括一些公共的基础样式，只会被其他文件引入，不会单独编译为css文件。那么文件名用下划线(_)开头即可。
注2：后声明的变量会覆盖前面声明的变量，如果不希望后面的变量值覆盖前面的变量值，需要用!default进行声明，如：$fancybox-width: 400px !default;

跟原生的css不同，sass允许@import命令写在css规则内。这种导入方式下，生成对应的css文件时，局部文件会被直接插入到css规则内导入它的地方。举例说明，有一个名为_blue-theme.scss的局部文件，内容如下：

aside {
  background: blue;
  color: white;
}

然后把它导入到一个CSS规则内，如下所示：
.blue-theme {@import “blue-theme”}

生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

由于sass兼容原生的css，所以它也支持原生的CSS@import。在下列三种情况下会生成原生的CSS@import：

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字体API提供的相应服务；
• 被导入文件的名字是CSS的url()值。

4、混合器mixin

sass中可用mixin 定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

2-1混合器中的CSS规则

@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;
}
/* 编译后 */
ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

2-2 混合器传参

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。参数默认值使用$name: default-value的声明形式。

@mixin link-colors($normal, $hover: $normal, $visited: $normal){
  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; }

5、 扩展/继承

sass可通过@extend来实现代码组合声明，使代码更加优越简洁。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}
/* 编译后 */
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

@extend背后最基本的想法是，如果.seriousError @extend .error， 那么样式表中的任何一处.error都用.error.seriousError这一选择器组进行替换。这就意味着相关样式会如预期那样应用到.error和.seriousError。

6、运算

sass可进行简单的加减乘除运算等

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

/* 编译后 */
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

7、 颜色

sass中集成了大量的颜色函数，让变换颜色更加简单。

$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}

/* 编译后 */
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

8、注释

sass提供两种注释，/* … */和//，注释不会出现在生成的css中