sass用法指南

介绍

sass 是什么？在sass的官网，它是这么形容给自己的
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.（sass 是世界上最成熟稳定强大的css扩展语言。）
sass并不是一种编程语言，Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。但是我们可以用于开发网页样式，可以称它为css预处理器。用sass来写css,然后再编译成正常的css文件，这就是sass。

特色

• css兼容性：Sass与所有版本的CSS完全兼容
• 功能丰富：在 CSS 语言基础上添加了扩展功能
• 成熟：Sass由其热爱的核心团队积极支持十多年
• 社区：Sass由几家科技公司和数百名开发商的联盟积极支持和开发。
• 架构：有无数的框架与Sass建立。 Compass, Bourbon, Susy 等等

安装

• npm
  npm install sass
• Homebrew
  brew install sass
• gem
  gem install sass

如果你使用的是 Windows， 就需要先安装 Ruby。
更多安装sass方法

语法

Sass 有两种语法。

• SCSS (Sassy CSS)：是一个 CSS3 语法的扩充版本。SCSS 理解大多数 CSS hacks 以及浏览器专属语法，例如IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。

• Sass： 提供了一种更简洁的 CSS 书写方式。通过缩排的方式来表达选择符的嵌套层级，I 而且也不使用分号，而是用换行符来分隔属性。 缩排语法具有 Sass 的所有特色功能， 有些语法上稍有差异。 使用此种语法的样式表文件需要以 .sass 作为扩展名。

两种语法可以通过使用sass-convert 命令行工具将 Sass和SCSS相互转换。

//将 Sass 转换为 SCSS
sass-convert test.sass test.scss

//将 SCSS 转换为 Sass
sass-convert test.scss test.sass

使用 Sass

• 将sass编译为css
  sass input.scss output.css
• Sass 监视文件的改动并更新 CSS
  sass --watch input.scss:output.css
• Sass 监视整个目录
  sass --watch assets/sass:public/stylesheets
  Sass会查看文件assets/sass夹中的所有文件以进行更改，并将CSS编译到该public/stylesheets文件夹。

1.变量

在实际开发过程中，一个项目像主要的颜色，或者说所有border的样式，这些比较重要的变量是在项目中重复使用的，可以使用$来定义变量。如果遇到突然项目整一个的border的颜色要改变，那么我们直接修改定义的变量border的颜色就可以了。

//定义变量
$primary-border:1px solid #eee;
$primary-color:#488aff;

// 使用变量
.test{
  border: $primary-border;
  color: $primary-color;
}
//编译后css
.test {
  border: 1px solid #eee;
  color: #488aff;
}

2.嵌套

sass允许css规则彼此嵌套，它具有明确的嵌套和可视化层次结构。可是请注意过度的嵌套会导致后期难以维护。

//嵌套使用
#main{
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
  
//编译后css
#main {
  color: #00ff00;
  width: 97%;
}
#main .redbox {
  background-color: #ff0000;
  color: #000000;
}

引用父选择符：&

使用&来替代父选择器，&必须在复合选择器的开头，甚至可以跟一个被添加到父选择器的后缀

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
  &-sidebar {
  border: 1px solid; 
  }
}

//css 输出
#main {
  color: black;
}
#main a {
  font-weight: bold;
}
#main a:hover {
  color: red;
}
#main-sidebar {
  border: 1px solid;
}

嵌套属性

比如font-family，font-size和font-weight都在font命名空间,如果在同一个命名空间设置很多它的属性，挺麻烦的，sass提供这样的方式，只要写一次命名空间，然后嵌套他的每个子属性。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

//css输出
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

属性名称空间本身还可以有一个值,例如：

.funky {
  font: 20px/24px fantasy {
    weight: bold;
  }
}

//css输出
.funky {
  font: 20px/24px fantasy;
  font-weight: bold;
}

3.注释

Sass支持标准的多行CSS注释/* */以及单行注释//。多行注释编译后仍然保留，而单行注释编译后就被删掉了。

/* 我是
 * 多行
 * 注释
 */
//我是我是我是单行注释
body {
  color: black;
}

//css输出
/* 我是
 * 多行
 * 注释
 */
body {
  color: black;
}

如果是很重要的注释，即使是压缩模式编译后也存在/*加一个感叹号

/*！
 * 超级重要注释
 */

在注释中也可以使用变量

$version: "1.0.0";
/* 版本号 #{$version}. */

编译后

/* 版本号 1.0.0. */

4.Import

假设现在有两个sass文件，bass.scss和_part.scss,可以将_part.scss导入到bass.scss中。然而导入的可是css文件，http:// 或者是url()

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

也可以一个import导入多个
@import "rounded-corners", "text-shadow";

//_part.scss
ul,
ol {
  margin:  0;
  padding: 0;
}
//base.scss
@import '_part.scss';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

@import嵌套导入

例如现在有一个这个example.sass文件里面有以下内容
.example {color: red;}
导入example
#main {@import "example";}
编译结果
#main .example {color: red;}

5.Mixin

我们使用@mixin定义一个代码块，然后用@include调用这个代码块。

@mixin border{
  border:1px solid #ee;
}
div{
  @include border
}
//编译后：
div {
  border: 1px solid #ee;
}

还可以指定参数

@mixin border($color:#eee){
  border:1px solid $color;
}
div{
  @include border(#eee);
}

6.颜色

颜色值支持所有算术运算p { color: #010203 + #040506;}
计算01 + 04 = 05，，02 + 05 = 07和03 + 06 = 09，并编译为：
p {color: #050709; }

p {color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);}
编译为p {color: rgba(255, 255, 0, 0.75); }
它还提供了一些内置的颜色函数
hsl（$ hue，$ saturation，$ lightness）：从色调，饱和度和亮度值创建颜色。
hsla（$ hue，$ saturation，$ lightness，$ alpha）：从色调，饱和度，亮度和Alpha值创建颜色。
还有更多的关于内置的颜色函数可以看这里 →更多

7.继承@extend

sass允许一个选择器去继承另外一个选择器.
.test2 {@extend .test1;color:white;}
.test1 {border: 1px solid #eee;}
编译后
.test1, .test2 {border: 1px solid #eee;}
.test2 {color: white;}

8.@debug @warn @error

@debug和@warn，指令将SassScript表达式的值打印到标准错误输出流，它有助于调试。

@warn "这是一个警告";
@error "这是一个错误"
@debug "这是一个调试输出"
console输出
WARM:这是一个警告
ERROR:这是一个错误
DEBUG:这是一个调试输出

9.控制指令和表达式

sass支持基本的控制指令和表达式控制，指令是高级功能，下来来介绍一下。

@if()

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
}
//编译输出
p {
  border: 1px solid; 
}

@if声明可以跟着几个@else，@if语句和一个@else语句。如果@if语句失败，@else if则会按顺序尝试这些语句。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//编译后
p {
  color: green; 
}

@for

该@for指令重复输出一组样式。对于每次重复，使用计数器变量来调整输出。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//编译后
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//编译后
.puma-icon {
  background-image: url("/images/puma.png");
}

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
}

.egret-icon {
  background-image: url("/images/egret.png");
}

.salamander-icon {
  background-image: url("/images/salamander.png");
}

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
//编译后
.item-6 {
  width: 12em;
}

.item-4 {
  width: 8em;
}

.item-2 {
  width: 4em;
}

10.功能指令#function

可以在sass中定义自己的函数，并在任何值或脚本上下文中使用它们。注意避免函数命名一样导致冲突了。

//定义变量
$grid-width: 40px;
$gutter-width: 10px;

//自定义函数
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

//使用
#sidebar { width: grid-width(5); }

//编译结果
#sidebar {
  width: 240px;
}

编译

sass编译输出的默认CSS样式，可以执行-style命令行来选择四种不同的输出样式

:nested

nested样式是默认的Sass样式，因为它反映了CSS样式的结构和他们所设计的HTML文档。每个属性都有自己的行，但缩进不是常量。根据嵌套的深度，每个规则都是缩进的。嵌套样式在查看大型CSS文件时非常有用：它可以让您轻松掌握文件的结构，而无需实际读取任何内容。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

:expanded

expanded是一个更典型的人造CSS风格，每个属性和规则占一线。属性在规则中缩进，但是规则不以任何特殊方式缩进。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

:compact

compact采用比嵌套或扩展更少的空间。它还将重点放在选择器上而不是他们的属性。每个CSS规则仅占用一行，每行都在该行上定义。嵌套规则彼此相邻，没有换行符，而单独的规则组在它们之间具有换行符。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

:compressed

compressed样式占用尽可能少的空间，除了分隔选择器和文件末尾的换行符之外，没有空格。它还包括一些其他轻微的按压，例如选择最小的颜色表示。这并不意味着人的可读性。
#main{color:#fff;background-color:#000}#main p{width:10em}

sass官网
sass github
在线将sass编译为css