小课堂【武汉第123期】

如何使用sass?

1.背景介绍

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

2.知识剖析

2.1如何安装sass？

 window下安装SASS首先需要安装Ruby，先从官网下载Ruby并安装。 安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。安装成功后，因为国内网络的问题会导致gem源间歇性中断，因此我们需要更换gem源。

//1.删除原gem源
gem sources --remove https://rubygems.org/

//2.添加国内源,注意：很多教程使用的是淘宝的源，现在已经不能用了，使用下面这个。
gem sources -a https://gems.ruby-china.org/

//3.打印是否替换成功
gem sources -l

//4.更换成功后打印如下
*** CURRENT SOURCES ***
https://ruby.taobao.org/

2.2 如何编译sass？

sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。推荐使用软件编译，koala是一款免费好用编译器。

3.常见问题

3.1 变量的使用

所有变量以$符号开头,如下

$blue:#1875e7;
.case1{
  text-align: center;
  color: $blue;
}

3.2 计算功能

SASS允许在代码中使用算式：

.case2{
  text-align: center;
  font-size: 12px+12px;
}

3.3 嵌套的使用

嵌套在不同情况下有不同的写法：

 //方法1
                div h1 {
　            　　　color : red;
　            　}

   方法2
                    div {
　               　　　hi {
　               　　　　　color:red;
　               　　　}
　               　}

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

.case3{
      background-color: gray;
      p{
        text-align: center;
        font-size: 12px+12px;
        &:hover {color: red}
      }
    }

3.4 注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

3.5 代码的重用之继承与mixin

继承：SASS允许一个选择器，继承另一个选择器。比如，现有case1:

$blue:#1875e7;
.case1{
text-align: center;
color: $blue;
}

case4要继承case1，就要使用@extend命令

.case4{
    @extend .case1;
    }

mixin:使用@mixin命令，定义一个代码块。

@mixin font-st($value:pink){
  text-align: center;
  font-size: 36px;
  color: $value;
}

使用@include命令，调用这个mixin。

.case5{
  @include font-st;
}

有时也可以增加参数方便改变样式。

4.解决方案

5.编码实战

参见PPT代码实例

6.扩展思考

sass如何使用判断语句？

7.参考文献

8.更多讨论

sass如何使用循环来批量创建类似css块样式？