是时候学一波Sass了

白水清风
191 阅读14分钟

是时候学一波Sass了

前言

一直以来，我都觉得写CSS是一件很麻烦的东西，用一行行描述去表达出网页的样式，但是没办法呀，谁叫咱是搞前端滴，还是得会啊；在学CSS的过程中，又看到了“CSS预处理器”，Sass，Scss，Less，Stylus，等等，由于对这些东西，一直比较模糊，所以就开始了学习并整理出此文；（PS：那为什么是Sass呢，因为官方说自己是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！他好会，我哭死）

官方介绍

  • 兼容CSS

    Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库

  • 特性丰富

    Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位

  • 成熟

    Sass已经经过其核心团队超过13年的精心打造

  • 行业认可

    一次又一次地，行业把Sass作为首选CSS扩展语言

  • 社区庞大

    数家科技企业和成百上千名开发者为Sass提供支持

  • 框架

    有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy

有啥特色

  • 完全兼容 CSS3
  • 在 CSS 基础上增加变量 (variables)、嵌套 (nesting)、混合 (mixins)、导入 (inline imports) 等功能
  • 通过函数进行颜色值与属性值的运算
  • 提供控制指令 (control directives)等高级功能
  • 自定义输出格式

如何安装Sass

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:window下安装SASS首先需要安装Ruby，mac下自带Ruby无需在安装Ruby!）

[安装教程​]  www.sass.hk/install/ 

我是直接安装Ruby后,运行

gem install sass
gem install compass

没有遇到网络问题需要换源,和SSL 证书等问题

image.png 安装好了之后，开始了解一下怎么用

编译和输出

编译方式

sass编译有很多种方式，如:

命令行编译模式

自动化编译( Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等)

GUI工具编译(编译软件koala，codekit)

  • 命令行编译模式（注意： “单文件编译” 和 ”多文件编译” 。）
    // SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本
//单文件转换命令
sass input.scss output.css
​
//单文件监听命令
sass --watch input.scss:output.css
​
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets
  • 命令行编译配置选项

    命令行编译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是什么排版格式;
sass内置有四种编译格式:nested``expanded``compact``compressed。
--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

编译风格

// 未编译样式
.box {
  width: 300px;
  height: 400px;
  &-title {
    height: 30px;
    line-height: 30px;
  }
}
  • nested：嵌套缩进的css代码，它是默认值。
    /*命令行内容*/
sass style.scss:style.css --style nested
​
/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }
  • expanded：没有缩进的、扩展的css代码。
    /*命令行内容*/
sass style.scss:style.css --style expanded
​
/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}
  • compact：简洁格式的css代码。
    /*命令行内容*/
sass style.scss:style.css --style compact
​
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
  • compressed：压缩后的css代码。
    /*命令行内容*/
sass style.scss:style.css --style compressed
​
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

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

嵌套

嵌套规则 (Nested Rules)

  • 能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理
#main {
  width: 97%;
​
  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
​
  pre { font-size: 3em; }
}

编译为

#main { width: 97%; }
#main p, #main div { font-size: 2em; }
#main p a, #main div a { font-weight: bold; }
#main pre { font-size: 3em; }

父选择器&

1、在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器,例如:

  • 当给某个元素设定 hover 样式时
  • 当 body 元素有某个 classname 时
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

编译为

a { font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }
body.firefox a { font-weight: normal; }

2、编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译为

#main { color: black; }
#main a { font-weight: bold; }
#main a:hover { color: red; }

3、& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器（注：当父选择器含有不合适的后缀时，Sass 将会报错）

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}

编译为

#main { color: black; }
#main-sidebar { border: 1px solid; }

属性嵌套 (Nested Properties)

1、有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

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

编译为

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

2、命名空间也可以包含自己的属性值，例如：

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

编译为

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

占位符选择器 %

与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %

%error {
  border: 1px #f00;
  background-color: #fdd;
}
// 这一段编译不会生成代码，因为没有被使用

当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中。

使用

%error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend %error;
  border-width: 3px;
}

编译为（可以对比一下下面继承@extend编译出的结果）

.seriousError { border: 1px #f00; background-color: #fdd; }
.seriousError { border-width: 3px; }

另外

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
// 这一段编译也不会生成代码，因为没有被使用

.notice {
  @extend %extreme;
}

编译为

#context a.notice { color: blue; font-weight: bold; font-size: 2em; }

继承@extend

假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

样式如下

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

上面例子，麻烦的是，每次使用 .seriousError 时需要带上 .error 的样式，加重维护负担都得写上（class="error seriousError"）

单个继承

使用 @extend 可以告将一个选择器下的所有样式继承给另一个选择器

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译为

.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.seriousError { border-width: 3px; }

上面代码的意思是将 .error 下的所有样式继承给 .seriousError，border-width: 3px; 是单独给 .seriousError 设定特殊样式，这样，使用 .seriousError 的地方可以不再使用 .error。

其他使用到 .error 的样式也会同样继承给 .seriousError，例如，另一个样式 .error.intrusion 使用了 hacked.png 做背景，<div class="seriousError intrusion"> 也同样会使用 hacked.png 背景。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
​
.error.intrusion {
  background-image: url("/image/hacked.png");
}
​
.seriousError {
  @extend .error;
  border-width: 3px;
}

编译为

.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.error.intrusion, .intrusion.seriousError { background-image: url("/image/hacked.png"); }
.seriousError { border-width: 3px; }

Class 选择器并不是唯一可以被延伸 (extend) 的，Sass 允许延伸任何定义给单个元素的选择器

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

编译为

a:hover, .hoverlink { text-decoration: underline; }

多重继承

同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

编译为

.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.attention, .seriousError { font-size: 3em; background-color: #ff0; }
.seriousError { border-width: 3px; }

每个 .seriousError 将包含 .error 与 .attention 下的所有样式，这时，后定义的样式享有优先权：.seriousError 的背景颜色是 #ff0 而不是 #fdd，因为 .attention 在 .error 之后定义

延伸继承

当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个，例如：

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

现在，每个 .seriousError 选择器将包含 .error 的样式，而 .criticalError 不仅包含 .seriousError 的样式也会同时包含 .error 的所有样式，编译为

.error, .seriousError, .criticalError { border: 1px #f00; background-color: #fdd; }
.seriousError, .criticalError { border-width: 3px; }
.criticalError { position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; }

变量 $ (Variables: $)

变量以美元符号开头

// 定义全局变量
$width:100px
​
// 直接使用变量
#main {
  width: $width;
}

变量支持块级作用域，将局部变量转换为全局变量可以添加 !global 声明

#main {
  // 定义局部变量
  $width:100px 
  // $width:100px !global; 转化为全局变量
  width: $width;
}

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。变量是 null 空值时将视为未被 !default 赋值

$width:null ;
$width:100px !default;
​
#main {
  width: $width;
}

编译为

#main { width: 100px; }

数据类型 (Data Types)

SassScript 支持 6 种主要的数据类型：

  • 数字，1, 2, 13, 10px
  • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  • 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型，true, false
  • 空值，null
  • 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

SassScript 也支持其他 CSS 属性值，比如 Unicode 字符集，或 !important 声明。然而Sass 不会特殊对待这些属性值，一律视为无引号字符串。

运算 (Operations)

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式。

数字运算 (Number Operations)

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

除法运算 / (Division and /)

/ 在 CSS 中通常起到分隔数字的用途，SassScript 作为 CSS 语言的拓展当然也支持这个功能，同时也赋予了 / 除法运算的功能。也就是说，如果 / 在 SassScript 中把两个数字分隔，编译后的 CSS 文件中也是同样的作用。

以下三种情况 / 将被视为除法运算符号：

  • 如果值，或值的一部分，是变量或者函数的返回值
  • 如果值被圆括号包裹
  • 如果值是算数表达式的一部分
p {
  font: 10px/8px;             // 没有进行除法
  $width: 1000px;
  width: $width/2;            // 使用变量进行除法
  width: round(1.5)/2;        // 使用函数进行除法
  height: (500px/2);          // 使用括号进行除法
  margin-left: 5px + 8px/2px; // 使用+，进行除法
}

编译为

p { font: 10px/8px; width: 500px; width: 1; height: 250px; margin-left: 9px; }

颜色值运算 (Color Operations)

1、颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

p {
  color: #010203 + #040506;
}

计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为

p {  color: #050709; }

2、数字与颜色值之间也可以进行算数运算，同样也是分段计算的

p {
  color: #010203 * 2;
}

计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为

p { color: #020406; }

3、透明度不会计算，必须相等如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

编译为

p { color: rgba(255, 255, 0, 0.75); }

颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

编译为

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); }

字符串运算 (String Operations)

+ 可用于连接字符串

1、如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译为

p:before { content: "Foo Bar"; font-family: sans-serif; }

2、运算表达式与其他值连用时，用空格做连接符：

p {
  margin: 3px + 4px auto;
}

编译为

p { margin: 7px auto; }

3、在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}

编译为

p:before { content: "I ate 15 pies!"; }

4、空的值被视作插入了空字符串：

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

编译为

p:before { content: "I ate pies!"; }

布尔运算 (Boolean Operations)

SassScript 支持布尔型的 and or 以及 not 运算。

数组运算 (List Operations)

数组不支持任何运算方式，只能使用 list functions 控制。

圆括号 (Parentheses)

圆括号可以用来影响运算的顺序：

p {
  width: 1em + (2em * 3);
}

编译为

p { width: 7em; }

插值语句 #{} (Interpolation: #{})

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue; }

#{} 插值语句也可以在属性值中插入 SassScript，大多数情况下，这样可能还不如使用变量方便，但是使用 #{} 可以避免 Sass 运行运算表达式，直接编译 CSS。

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p { font: 12px/30px; }
// 而不是
p { font: 0.4; }

混合指令 (Mixin Directives)

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。

定义混合指令 @mixin (Defining a Mixin: @mixin)

混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

混合可以包含选择器和属性，也可以用 & 引用父选择器：

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

引用混合样式 @include (Including a Mixin: @include)

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

编译为

.page-title { font-family: Arial; font-size: 20px; font-weight: bold; color: #ff0000; padding: 4px; margin-top: 10px; }

也可以在最外层引用混合样式，不会直接定义属性，也不可以使用父选择器。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}
@include silly-links;

编译为

a { color: blue; background-color: red; }

混合样式中也可以包含其他混合样式，比如

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
@mixin compound {
  @include highlighted-background;
  @include header-text;
}

向混合样式中导入内容 (Passing Content Blocks to a Mixin)

在引用混合样式的时候，可以先将一段代码导入到混合指令中，然后再输出混合样式，额外导入的部分将出现在 @content 标志的地方

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

编译为

* html #logo { background-image: url(/logo.gif); }

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示，所以上面的例子可以写成：

=apply-to-ie6-only
  * html
    @content
​
+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

注意： 当 @content 在指令中出现过多次或者出现在循环中时，额外的代码将被导入到每一个地方。

变量范围

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

编译为

.colors { background-color: blue; color: white; border-color: blue; }

参数

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

编译为

p { border-color: blue; border-width: 1in; border-style: dashed; }

默认参数

@mixin sexy-border($color, $width: 100px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 200px); }

编译为

p { border-color: blue; border-width: 100px; border-style: dashed; }
​
h1 { border-color: blue; border-width: 200px; border-style: dashed; }

关键词参数 (Keyword Arguments)

上面的例子也可以写成，关键词参数可以打乱顺序使用

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($width: 200px,$color: blue); }

剩余参数

有时，不能确定混合指令需要使用多少个参数,这时，可以使用参数变量 … 声明（写在参数的最后方）告诉 Sass 将这些参数视为值列表处理

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译为

.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

数变量也可以用在引用混合指令的时候 (@include)，与平时用法一样，将一串值列表中的值逐条作为参数引用：

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

编译为

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

函数指令 (Function Directives)

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

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

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

自定义的函数也可以使用关键词参数，上面的例子还可以这样写：

#sidebar { width: grid-width($n: 5); }

控制指令 (Control Directives)

SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 、函数配合使用，尤其是用在 Compass 等样式库中。

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

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

与mixin配合使用

@mixin isShow($visible: true) {
  @if $visible {
    display: block;
  }@else {
    display: none;
  }
}
​
.show {
  @include isShow()
}
​
.hidden {
  @include isShow(false)
}

编译为

.show { display: block; }
​
.hidden { display: none; }

@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动，这个指令包含两种格式

@for $var from <start> through <end>,当使用 through 时，条件范围包含 <start> 与 <end> 的值，包头包尾

@for $var from <start> to <end>,只包含 <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; }

@each

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

@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：

@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"); }

多变量循环

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

编译为

.puma-icon { background-image: url("/images/puma.png"); border: 2px solid black; cursor: default; }
​
.sea-slug-icon { background-image: url("/images/sea-slug.png"); border: 2px solid blue; cursor: pointer; }
​
.egret-icon { background-image: url("/images/egret.png"); border: 2px solid white; cursor: move; }

也可以用：写成一组

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

编译成

h1 { font-size: 2em; }
​
h2 { font-size: 1.5em; }
​
h3 { font-size: 1.2em; }

@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到

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

@-Rules 与指令

@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

  • 文件拓展名是 .css；
  • 文件名以 http:// 开头；
  • 文件名是 url()；
  • @import 包含 media queries。

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

@import "foo.scss";
或
@import "foo";
// 都会导入文件 foo.scss

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
// 仅作为普通的 CSS 语句，不会导入任何 Sass 文件

Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

@import "rounded-corners", "text-shadow";

导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

编译为

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

例如，将文件命名为 _colors.scss，便不会编译 _colours.css 文件。

@import "colors";

上面的例子，导入的其实是 _colors.scss 文件

注意，不可以同时存在添加下划线与未添加下划线的同名文件，添加下划线的文件将会被忽略。

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

@media

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

编译为

.sidebar { width: 300px; }
@media screen and (orientation: landscape) { .sidebar { width: 500px; } }

@media的 queries 允许互相嵌套使用，编译时，Sass 自动添加and

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

编译为

@media screen and (orientation: landscape) { .sidebar { width: 500px; } }

@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值：

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
​
@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

编译为

@media screen and (-webkit-min-device-pixel-ratio: 1.5) { .sidebar { width: 500px; } }

@at-root

该指令可以让嵌套在父选择器之下的子选择器出现在文档的本位置

单选择器

.parent {
  ...
  @at-root .child { ... }
}

编译为

.parent { ... }
.child { ... }

多选择器

.parent {
  ...
  @at-root {
    .child1 { ... }
    .child2 { ... }
  }
  .step-child { ... }
}

编译为

.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

@debug

该指令可以将SassScript表达式的值打印到错误输出流；使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出打印信息

@debug 10em + 12em;

输出

Line 1 DEBUG: 22em

@warn

@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass

可以使用--quiet命令行选项或：quiet Sass选项关闭警告。

样式表跟踪将与消息一起打印出来，以便被警告的用户可以看到他们的样式在哪里导致了警告。

@mixin get-mixin($x) {
  @if unitless($number: $x) {
    @warn "#{$x} has no px";
    $x: 1px*$x;
  }
​
}
​
.test {
  @include get-mixin(2)
}

输出

WARNING: 2 has no px
        on line 3 of C:\learning\sass\test.scss, in `get-mixin'
        from line 10 of C:\learning\sass\test.scss

@error

将SassScript表达式的值作为致命错误抛出，对于验证mixin和函数的参数很有用

@mixin error($x) {
  @if $x >0 {
    $x: $x*2
  }
​
  @else if $x>10 {
    $x: $x/2
  }
​
  @else {
    @error "#{$x}范围有误"
  }
}
​
.test {
  @include error(-1)
}

输出

Error: -1范围有误
        on line 11 of C:\learning\sass\test.scss, in `error'
        from line 16 of C:\learning\sass\test.scss
​

Scss是啥

Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass。说白了Scss就是Sass的升级版，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外，SCSS 还能识别大部分 CSS hacks（一些 CSS 小技巧）和特定于浏览器的语法，例如：古老的 IE filter 语法。

由于 Scss 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 Scss 中正常工作。也就是说，对于一个 Sass 用户，只需要理解 Sass 扩展部分如何工作的，就能完全理解 Scss。大部分扩展，例如变量、parent references 和 指令都是一致的；唯一不同的是，SCSS 需要使用分号和花括号而不是换行和缩进。

Sass和Scss是啥关系

Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：

  • 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。
  • 语法书写格式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。

最后

花了一天的时间抄了一遍，感觉还是有所收获的。其实就好的学习方式就是，自己写一下scss然后去编译，去看一下，很快就能恍然大明白了；官网有很多例子，很多博主也有很多例子，写写就懂了。

参考文章

[sass与scss的区别是什么？​]  www.lmonkey.com/t/XAL2kKaBR 

[Sass中文网]  www.sass.hk/ 

[掌握sass这些技能，帮助提升开发效率​]  juejin.cn/post/687000… 

avatar
文章
阅读
粉丝