CSS预处理器之sass的用法

学过css的确定知道层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是开放网络的核心语言之一，由 W3C规范 实现跨浏览器的标准化。CSS节省了大量的工做。 样式能够经过定义保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者没必要经历在全部网页上编辑布局的麻烦。CSS 被分为不一样等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分红多个小模块且正在标准化中。

时代在发展，人类在进步，有人就开始为 CSS加入编程元素，这被叫作CSS预处理器， CSS 预处理器是一个能让你经过预处理器本身独有的语法来生成CSS的程序。市面上有不少CSS预处理器可供选择，且绝大多数CSS预处理器会增长一些原生CSS不具有的特性，例如 代码混合， 嵌套选择器， 继承选择器等。这些特性让CSS的结构更加具备可读性且易于维护。

要使用CSS预处理器，你必须在web服务中服务器安装CSS编译工具。

这里是一些最流行的CSS预处理器：

• Sass
• LESS
• Stylus
• PostCSS

各类"CSS预处理器"之中，我本身最喜欢SASS，以为它有不少优势，打算之后都用它来写CSS。下面是我整理的用法总结，供本身开发时参考，相信对其余人也有用。

首先，让咱们放一张图来看看今天的主角：

看到了吗，世界上 最成熟、最稳定、最强大的专业级CSS扩展语言！这么装逼的话，必定是有它的道理的~ 继续往下，一块儿来看看吧！

1、什么是SASS

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

本文介绍了SASS的主要用法,用以平常使用。若是没法解决你的需求，能够查看官方文档。

2、安装Sass和Compass

2.1 安装

sass基于Ruby语言开发而成，所以安装sass前须要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

可是二者的语法没有关系。不懂Ruby，照样使用。

假定你已经安装好了Ruby，Ruby自带一个叫作RubyGems的系统，用来安装基于Ruby的软件。咱们可使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你须要输入下面的命令：

// 安装以下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
复制代码

而后，就可使用了。

2.2 编译Sass

sass编译有不少种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工做流grunt-sass、Gulp打造前端自动化工做流gulp-ruby-sass等。

下面的命令，能够在屏幕上显示.scss文件转化的css代码。（假设文件名为input.scss。）

// 单文件转换命令
sass input.scss output.css
复制代码

命令行编译配置选项: 命令行编译sass有配置选项，如编译事后css排版、生成调试map、开启debug信息等，可经过使用命令sass -v查看详细。咱们通常经常使用两种--style、--sourcemap。

//编译格式
sass --watch input.scss:output.css --style compact

//编译添加调试map
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info
复制代码

• --style表示解析后的css是什么排版格式;
• --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

SASS提供四个编译风格的选项：

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

四种编译排版演示:

//未编译样式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}
复制代码

nested 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style nested

/*编译事后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }
复制代码

expanded 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译事后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}
复制代码

compact 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compact

/*编译事后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
复制代码

compressed 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compressed

/*编译事后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
复制代码

生产环境当中，通常使用最后一个选项。

sass --style compressed test.sass test.css
复制代码

你也可让SASS监听某个文件或目录，一旦源文件有变更，就自动生成编译后的版本。

//单文件监听命令
sass --watch input.scss:output.css

//若是你有不少的sass文件的目录，你也能够告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets
复制代码

SASS的官方网站，提供了一个在线转换器。你能够在那里，试运行下面的各类例子也能够去（Sass中文文档）试试。

3、基本用法

3.1 变量

sass使用$符号来标识变量(老版本的sass使用!来标识变量。改为$是多半由于!highlight-color看起来太丑了。)，好比$highlight-color和$sidebar-width。为何选择$ 符号呢？由于它好认、更具美感，且在CSS中并没有他用，不会致使与现存或将来的css语法冲突。

sass变量的声明和css属性的声明很像：

$highlight-color: #F90;
复制代码

这意味着变量$highlight-color如今的值是#F90。任何能够用做css属性值的赋值都 能够用做sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;。这时变 量尚未生效，除非你引用这个变量——咱们很快就会了解如何引用。

$color : #1875e7; 

div {
    color : $color;
}
复制代码

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

$side : left;

.rounded {
    border-#{$side}-radius: 5px;
}
复制代码

3.2 计算

$var: 10px;
div {
    margin: (28px/2);
    position: absolute;
    top: 30px + 20px;
    left: $var + 20px;
}
复制代码

3.3 嵌套CSS 规则

在Sass中，你能够像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}
复制代码

/* 编译后 */
#content article h1 { color: #333 };
#content article p { margin-bottom: 1.4em };
#content aside { background-color: #EEE };
复制代码

属性也能够嵌套，好比border-color属性，能够写成：

p {
    border: {
        color: blue
    }
}
复制代码

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

在使用嵌套规则时，父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号，且能够放在任何一个选择器可出现的地方。

article a {
  color: blue;
  &:hover { color: red }
}
复制代码

在为父级选择器添加:hover等伪类时，这种方式很是有用。同时父选择器标识符还有另一种用法，你能够在父选择器以前添加选择器。举例来讲，当用户在使用IE浏览器时，你会经过JavaScript在<body>标签上添加一个ie的类名，为这种状况编写特殊的样式以下：

#content aside {
  color: red;
  body.ie & { color: green }
}
复制代码

3.4 静默注释

css中注释的做用包括帮助你组织样式、之后你看本身的代码时明白为何这样写，以及简单的样式说明。可是，你并不但愿每一个浏览网站源码的人都能看到全部注释。

sass另外提供了一种不一样于css标准注释格式/* ... */的注释语法，即静默注释，其内容不会出如今生成的css文件中。静默注释的语法跟JavaScript、Java等类C的语言中单行注释的语法相同，它们以//开头，注释内容直到行末。

body {
  color: #333; // 这种注释内容不会出如今生成的css文件中
  padding: 0; /* 这种注释内容会出如今生成的css文件中 */
}
复制代码

实际上，css的标准注释格式/* ... */内的注释内容亦可在生成的css文件中抹去。当注释出如今原生css不容许的地方，如在css属性或选择器中，sass将不知如何将其生成到对应css文件中的相应位置，因而这些注释被抹掉。

body {
  color /* 这块注释内容不会出如今生成的css中 */: #333;
  padding:  /* 这块注释内容也不会出如今生成的css中 */ 0;
}
复制代码

4、代码的重用

4.1 继承

使用sass的时候，最后一个减小重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器能够继承为另外一个选择器定义的全部样式。这个经过@extend语法实现，以下代码:

//经过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
复制代码

4.2 混合器

混合器使用@mixin标识符定义。Mixin有点像C语言的宏（macro），是能够重用的代码块。

下边的这段sass代码，定义了一个很是简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
复制代码

而后就能够在你的样式表中经过@include来使用这个混合器，放在你但愿的任何地方。@include调用会把混合器中的全部样式提取出来放在@include被调用的地方。

div {
    @include rounded-corners;
}
复制代码

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

@mixin left($value: 10px) {
    float: left;
    margin-left: $value;
}
/* 使用的时候，根据须要加入参数 */
div {
    @include left(20px)
}
复制代码

4.3 导入文件

@import命令，用来插入外部文件。

@import "path/input.scss";
复制代码

若是插入的是.css文件，则等同于css的import命令。

@import "input.css";
复制代码

5、高级用法（控制指令）

5.1 条件语句

@if能够用来判断，当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
复制代码

/* 编译后 */ 
p {
  border: 1px solid;
}
复制代码

配套的还有@else命令,@if 声明后面能够跟多个 @else if 声明，或者一个 @else 声明。若是 @if 声明失败，Sass 将逐条执行 @else if 声明，若是所有失败，最后执行 @else 声明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
复制代码

/* 编译后 */ 
p {
  color: green;
}
复制代码

5.2 循环语句 @for

@for 指令能够在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果作出变更。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 能够是任何变量，好比 $i；<start> 和 <end> 必须是整数值。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
复制代码

/* 编译后 */ 
.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}
复制代码

也支持while循环：

$i: 5;
@while $i > 0 {
    .item-#{$i} {width: 2em * $i;}
    $i: $i - 2;
}
复制代码

@each 指令的格式是 $var in <list>, $var 能够是任何变量名，好比 $length 或者 $name，而 <list> 是一连串的值，也就是值列表:

@each $member in a, b, c, d {
.#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}
复制代码

5.3 自定义函数（函数指令）

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

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

与 mixin 相同，也能够传递若干个全局变量给函数做为参数。一个函数能够含有多条语句，须要调用 @return 输出结果。

$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: grid-width($n: 5); }
复制代码

建议在自定义函数前添加前缀避免命名冲突，其余人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。

自定义函数与 mixin 相同，都支持 variable arguments

参考文献： CSS 预处理器

参考文献： Sass中文网

参考文献： Sass官方文档