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

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

Sass学习曲线平缓,熟悉css即入门。Sass不包含难以理解的逻辑。

Sass安装

sass文件转换成css文件,需借助编译工具,Sass提供两种编译方案。

自动编译工具

这类工具自动实时的将Sass文件输出为css文件。

选择输入文件(.sass、.scss),输出路径即可。

Sass编译命令

这种方式需要安装一些工具包,使用命令行调用工具包捃行编译。

常说的Sass环境安装。

Sass独立安装

GitHub下载对应操作系统的Sass包,下载并解压到目录,将解压的sass目录,添加到系统path环境变量。

sass下载列表

sass windows 环境变量设置

npm安装Sass

npm install -g sass

适用于已安装npm环境。

Chocolatey安装Sass

仅适用于Windows

choco install sass

Homebrew安装Sass

适用于MacOS/Linux

brew install 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编译命令执行编译时,根据文件后缀(.sass、.scss)选择语法规则,对文件内容执行校验。

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模块化

创建多个包含CSS片段的Sass文件,Sass文件引用片段完成模块化。

Sass模板化只需在Sass文件名中,包含下划线_和对应的后缀。如:

a_partial.scss

下划线标识该文件只是一个css代码片段,无需单独生成css文件。

Sass模块化与@import指令配合使用。

导入Sass模块化文件

Sass使用@import引用模块文件。

 _reset.scss

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

base.scss

@import 'reset';

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

示例中将_reset.scss导入到base.scss中。

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