Sass简单入门

每一次CSS样式写到最后，都是为了实现而实现，感觉非常混乱，我一直都想学一学CSS预处理器，把CSS的开发变得更加的简单可维护。

安装与使用

要使用SASS，首先要安装Ruby，因为SASS是Ruby语言写的。

因为某些众所周知的原因，国内有时候不能正常使用gem。 解决国内gem不能用的问题

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/

设置后使用gem sources -l查源地址，确保只有Taobao的镜像

有的系统不支持HTTPS，把源地址改成gem sources -a http://gems.ruby-china.org即可

在命令行输入gem install sass完成安装sass

使用sublime Text 的用户可以使用这个 高亮插件、提示插件

如果遇到syntax文件无法加载的情况，可以参考这个解决办法：

1. Open a .scss file
2. In the View menu → Syntax → CSS
3. Then switch back to SCSS syntax mode

使用SCSS

这篇文章是在讲Sass的简单入门，怎么突然变成是SCSS了。其实两个是同一个东西，只是我们平常称之为Sass，两者的不同之处在于：

1. 文件的扩展名不同，一个是.sass后缀作为扩展名，一个是以scss的后缀作为扩展名
2. 语法书写方式不同，Sass是严格缩进式的语法规则来书写，不带有括号和分号的；SCSS和我们平常书写的CSS样式的语法有点类似，这里我使用的是SCSS。

首先我们先创建一个test.scss的文件，内容如下

/*
* @Author: Administrator
* @Date:   2016-07-08 17:16:44
* @Last Modified by:   JohnTrump
* @Last Modified time: 2016-07-08 17:29:19
*/
$text-color:#ccc;
$border-style:solid;

#navbar{
    border-bottom: {
        color:$text-color;
        style:$border-style;
    };
}
a{
    color:$text-color;
    &:hover{
        border-bottom: 1px $border-style $text-color;
    }
}

然后再命令行中输入sass test.scss test.css就可以看到文件夹下生成了test.css.map文件和test.css文件。使用这个命令行采用的是默认的编译风格nested

/*
* @Author: Administrator
* @Date:   2016-07-08 17:16:44
* @Last Modified by:   JohnTrump
* @Last Modified time: 2016-07-08 17:29:19
*/
#navbar {
  border-bottom-color: #ccc;
  border-bottom-style: solid;
}

a {
  color: #ccc; }
  a:hover {
    border-bottom: 1px solid #ccc; }

/*# sourceMappingURL=test.css.map */

这就是SCSS的使用的大体过程，语法规则蛮多的，可以参考 sass语法

SASS的四种编译风格

nested:

嵌套缩进的css代码，默认就是使用这种风格

expanded：

没有缩进和扩展的css代码

compact:

简洁格式的css代码

compressed

压缩后的css代码