SASS--安装、用法、编译

一、什么是sass?

  我们用css都知道，css并不是一门编程语言，于是有人就开始为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。

二、sass的安装

  2.1 安装ruby

         sass是用ruby语言写的，所以使用的时候我们需要有ruby的环境。

         在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads )
         在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况）Add Ruby executables to ypur PATH  

  2.2 sass的安装

         有四种安装sass的方式

          2.2.1  命令行安装  在命令行输入以下命令(windows)          

           gem install sass

          2.2.2   通过 Compass 来安装 Sass 

           sudo gem install sass

          2.2.3  本地安装  可以到 Rubygems(http://rubygems.org/) 网站上将 Sass 的安装包（http://rubygems.org/gems/sass）下载下来，然后在命令终端输入：

           gem install <下载的安装包的路径>

          2.2.4  淘宝 RubyGems 镜像安装 Sass  除了下载 Sass 安装包到本地安装之外，碰到网络原因无法安装时还可以使用淘宝 RubyGems 镜像安装 Sass。只是我们需要通过 gem sources 命令来配置源，先移除默认的 https://rubygems.org 源，然后添加淘宝的源 https://ruby.taobao.org：

         第一步：移动默认的源

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

         第二步：指定淘宝的源

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

         第三步：查看指定的源是不是淘宝源

         gem sources -l

         返回结果如下：

         *** CURRENT SOURCES ***
         https://ruby.taobao.org

         请确保只有 ruby.taobao.org。如果无误之后，执行下面的命令：

         gem install sass

我用的第四种方法，很方便^_^

三、sass的编译

         推荐使用Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)很好用，很方便。

         这里它编译后输出格式有四种:

        * nested：嵌套缩进的css代码，它是默认值。

　　* expanded：没有缩进的、扩展的css代码。

　　* compact：简洁格式的css代码。

　　* compressed：压缩后的css代码。

四、sass的用法

        4.1  变量

                sass允许使用变量，所有变量以$开头               

$bg-color:#eee;
body{
     background-color:$bg-color;
}

                 变量要嵌入字符串中时，应加上#{}

$a:top;
.box{
     border-#{$a}: 1px solid #ccc;
}

         4.2  嵌套

              sass可以实现css的嵌套，更具可读性

.box a{
color:red
}
/*可以写成*/
.box{
a{
 color:red;
}
}

              &符号可以代表父选择器

.box a{
color:red;
}
.box a:hover{
color:blue;
}
/*可以写成*/
.box{
a{
 color:red;
 &:hover{
    color:blue;
   }
  }
}

            4.3  继承

                    使用@extend进行继承

.box1{
       border:1px solid #ccc;
}
.box2{
       @extend .box1;
       background-color:#fff;
}       

           4.4  混合器

                   使用@mixin可以构建一个可以重用的css样式规则,使用@include进行调用

@mixin a-after{
	position:absolute;
	top:0;
	right:-8px;
	border:{
		left:8px solid $a-bg-color;
		top:7px solid transparent;
		bottom:8px solid transparent;
	}
}
a{
        position:relative;
        color:$a-color;
        display:block;
        padding:0 10px;
        background-color:$a-bg-color;
        i{
        @include a-after;
        }
 }

                   这里可以看到属性也可以进行嵌套,border:{left:xxx;}这样子。

                   混合器@mixin的强大之处是它可以指定参数和初始值

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

               4.5  计算

                    sass可以实现属性值计算,运算符两边要有空格

.box3{
        margin: (14px / 2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
}

               4.6  导入文件

                   使用@import进行导入，如果导入的是scss文件的话，这个导入的scss文件的名称必须以下划线开头；如果导入的是css文件的话，用法和css中的一致。

               4.7  注释

                   使用/* */或者// 两种方式进行注释，//的注释不会编译到css文件中,称为静默注释, /**/的注释会随之编译到css文件中      

五、小结

        借用sass教程上的话进行小结。

变量是sass提供的最基本的工具。通过变量可以让独立的css值变得可重用，无论是在一条单独的规则范围内还是在整个样式表中。变量、混合器的命名甚至sass的文件名，可以互换通用_和-。同样基础的是sass的嵌套机制。嵌套允许css规则内嵌套css规则，减少重复编写常用的选择器，同时让样式表的结构一眼望去更加清晰。sass同时提供了特殊的父选择器标识符&，通过它可以构造出更高效的嵌套。

你也已经学到了sass的另一个重要特性，样式导入。通过样式导入可以把分散在多个sass文件中的内容合并生成到一个css文件，避免了项目中有大量的css文件通过原生的css @import带来的性能问题。通过嵌套导入和默认变量值，导入可以构建更强有力的、可定制的样式。混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复。你不仅学到了如何使用混合器减少重复，同时学习到了如何使用混合器让你的css变得更加可维护和语义化。最后，我们学习了与混合器相辅相成的选择器继承。继承允许你声明类之间语义化的关系，通过这些关系可以保持你的css的整洁和可维护性。