Sass中文文档-阅读时长十分钟

Sass是对CSS的一种扩展,增加了CSS的灵活性。浏览器不能直接识别Sass语法,Sass需要编译工具转换成最终的CSS。

Sass的学习曲线比较平缓,如果熟悉css,对Sass的了解过程,基础也就完成了对Sass的学习。Sass并不包含难以理解的逻辑。

Sass安装

如果说学习sass真有什么难度的话,大概应该是对Sass的编译吧。因为,要把sass文件转换成css文件,需要编译工具来完成。Sass提供了两种编译方案,根据个人喜好任选其一。

Sass自动编译工具

如果不习惯命令行,可以选择一些Sass自动编译工具。这类工具能自动实时的把Sass文件输出为css文件。

CodeKit (付费) mac
Compass.app (付费, 开源) mac/windows/linux
Ghostlab (付费) mac/windows
Hammer (付费) mac
Koala (开源)   mac/windows/linux
LiveReload (付费,开源) mac/windows
Prepros (付费) mac/windows/linux
Scout-App (免费,开源) mac/windows/linux

使用这种工具对sass文件进行编译,只需要选择输入文件(.sass、.scss),输入路径即可。

Sass编译命令

Sass也可以通过命令行进行编译。这种方式需要安装一些工具包,通过命令行对这些工具包进行调用。也就是常说的Sass环境安装。以下几种Sass环境安装方式任选其一。

Sass独立安装

GitHub下载相应操作系统的Sass包,然后在系统的Path环境变量中添加它。在下载页选择对应系统版本的下载链接,下载并解压到目录,把解压后的sass目录,添加到系统中的path环境变量中。

sass下载列表

sass windows 环境变量设置

npm安装Sass环境

--shell-*npm install -g sass

这种方式适用于已安装了npm的环境。安装sass比较简单。

Chocolatey安装Sass环境

仅适用于Windows

choco install sass

Homebrew安装Sass环境

仅适用于MacOS/Linux

brew install sass/sass/sass

不管通过哪种途径安装Sass环境,最终对Sass的编译都使用统一的Sass编译命令,把sass文件编译成css文件。

sass c.scss b.css
手动编译方式

sass --watch c.scss b.css
自动实时编译

sass watch实时自动编译

Sass语法

Sass语法分为两种,一种为sass,一种scss,二者最大的区别在于作用域的表现方式。Sass用换行和格式对齐表示作用域,Scss用大括号表示作用域。Sass和Scss虽然相似,但二者不能同处一个文件中(二者不能混写),因为sass编译命令对文件进行编译时,根据文件后缀(.sass、.scss)区分采用哪种语法规则,对文件中的内容进行校验。

SASS

--sass-*$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Sass变量

从上面示例中可以看出,Sass使用$符号,将内容作为变量进行引用。Sass和Scss最终编译成css如下所示:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Sass嵌套

SASS

nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

SCSS

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Sass模块化

Sass模块化的方式,是创建多个包含CSS片段的Sass文件,其他Sass文件通过引用这些片段完成模块化。Sass模板化只需要在Sass文件名中,包含下划线_和对应的后缀。如:a_partial.scss。下划线是为了让Sass编译器,知道该文件只是一个css代码片段,不需要单独生成css文件。Sass模块化需要与@import指令配合使用。

导入Sass模块化文件

Sass通过@import引用模板化的文件。假设有两个Sass文件,分别为_reset.scss和base.scss,现在需求把_reset.scss导入到base.scss中,使用方式如下所示:

// _reset.scss

html,
body,
ul,
ol {
  margin:  0;
  padding: 0;
}
// base.scss
@import 'reset';

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

Mixins

对不同浏览器内置方法进行兼容,是一种乏味的事情。Sass允许定义一组css声明(通过@mixin指令),然后引用它(使用@include指令):

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

Sass继承

继承是Sass最有用的功能之一,它允许从一个css选择器中,继承css属性到另一组css中。通过%前缀进行声明,使用@extend进行继承。

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

Sass数学运算

CSS中的数学运算非常有用,Sass拥有标准的数学运算符,例如:+、-、*、/ 、%。以下是一些简单的运算示例:

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}