zerojs-零技术

SASS

一、 sass 简介

SASS 是一种 CSS 的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得 CSS 的开发，变得简单和可维护。

!> sass 文件的后缀名是 .scss , .scss , .scss ,三遍

二、 安装

1. ruby 安装

因为 sass 依赖于 ruby 环境，所以装 sass 之前先确认装了 ruby。先到 ruby 官网下载open in new window ruby 在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到 ruby 环境.

2. sass 安装

安装完 ruby 之后，在开始菜单中，找到刚才我们安装的 ruby，找到并打开Start Command Prompt with Ruby 弹出命令行工具然后直接在命令行中输入

gem install sass

按回车键确认，等待一段时间就会提示你 sass 安装成功。最近因为墙的比较厉害，如果你没有安装成功，可以尝试下面方法，或参考下面的淘宝的 RubyGems 镜像安装 sass，如果成功则忽略。

gem source --remove https://rubygems.org
gem source --add http://rubygems.org
gem sources            //查看一下是否更新源成功

如果要安装 beta 版本的，可以在命令行中输入

gem install sass --pre

你还可以从 sass 的 Git repository 来安装，git 的命令行为

git clone git://github.com/nex3/sass.git
cd sass
rake install

升级 sass 版本的命令行为

gem update sass

查看 sass 版本的命令行为

sass -v

你也可以运行帮助命令行来查看你需要的命令

sass -h

3. 淘宝 RubyGems 镜像安装 sass(安装失败请继续看)

由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过 gem sources 命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个

关于常用 gem source 命令可参看：常用的 gem source

$ 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,如果是淘宝的，则表示可以输入 sass 安装命令了。

$ gem install sass

三、 编译Sass工具

1. 命令行编译

Sass文件后缀为 .scss，因此要编译成 .css 文件。

sass style.scss style.css

Sass 提供4种编译风格

  • nested：嵌套缩进的css代码，它是默认值。
  • expanded：没有缩进的、扩展的css代码。
  • compact：简洁格式的css代码。
  • compressed：压缩后的css代码。

生产环境当中，一般选择最后一项。

sass --style compressed style.sass style.css

2. 监听

监听某个文件或目录，一旦文件发生改变，就自动生成编译后文件

  • 单文件监听命令

sass --watch input.scss:output.css

  • 文件夹监听命令

sass --watch app/sass:public/stylesheets

四、 语法

1. 变量

sass 中可以定义变量，方便统一修改和维护。

sass 代码：

$blue: #1875e7;
　 div {
  　color: $blue;
}

生成的 css 代码:

div {
  　color: #1875e7;
}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

2.嵌套

sass 可以进行选择器的嵌套，表示层级关系，看起来很优雅整齐。

sass 代码：

nav {
  ul {
    margin: 0;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
  }
}

生成的 css 代码：

nav ul {
  margin: 0;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
}

属性也可以嵌套，比如 border-color 属性，可以写成：

p {
　　　border: {
　　　　　color: red;
　　　}
　}

!> 注意，border 后面必须加上冒号 :。

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

a {
　　　&:hover { color: #ffb3ff; }
　}

3. 导入

sass 中如导入其他 sass 文件，最后编译为一个 css 文件，优于纯 css 的@import。其中注意的是如果 sass 文件的名字以“_”开头，则不会被编译成 css 文件

_reset.scss 文件：

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

base.scss 文件：

@import "reset";

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

最终生成的 css:

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

4. mixin（可以重用的代码块）

@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

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

div {
　　　　@include left;
　　}

mixin 的强大之处，在于可以指定参数和缺省值。

@mixin left($value: 10px) {
　　　float: left;
　　　margin-right: $value;
　}

5. 扩展/继承

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

sass:

.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;
}

生成的 css:

.message,
.success,
.error,
.warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

6. 运算

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

sass:

$var:100px;
div {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 0.5;
　　}

生成的 css:

div {
　　　　margin: 7px;
　　　　top: 150px;
　　　　right: 50px;
　　}

7. 颜色

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

如下几个颜色函数：

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

例子：

sass:

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

生成的 css:

a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

8. 自定义函数

SASS 允许用户编写自己的函数。

　　@function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

生成的 css:

#sidebar {
　　　　width: 10px;
　　}

如果要返回字符串，可以这样写

@function myurl($url) {
  @return "../#{$url}"; //返回一个拼接的新地址
}
body {
  background-image: url(myurl(images/bg.jpg));
}

生成的 css:

body {
  background-image: url("../images/bg.jpg");
}

9. 条件用法

@if 可以用来判断：

p {
　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　@if 5 < 3 { border: 2px dotted; }
　}

配套的还有 @else 命令：

@if lightness($color) > 30% {
　　　background-color: #000;
　} @else {
　　　background-color: #fff;
　}

10. 循环语句

for 循环

@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

while 循环

$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}

each 循环

@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}
Last Updated:
Contributors: zerojs