Sass学习笔记

阅读目录

Sass被称为“CSS预处理器”，就是用一种编程的思想去写CSS样式表。在还没接触Sass的时候，很多人都不愿意去了解，认为都会了CSS，为什么还要去写Sass，Sass最终生成的还是CSS文件呀。

最初，我也是这么认为的。

在我认真的学了Sass之后，原来使用Sass对CSS有很大的帮助，对于经常性写CSS文件的设计师们，节省了很多的开发时间，并且可以写出扩展性更强、更易于维护的代码。下面是我记录了Sass的学习笔记。

一. sass安装

1.1 Ruby安装

主要针对的是window系统下的安装，因为Sass依赖于Ruby环境，所以应先安装Ruby，Ruby安装包下载链接：http://rubyinstaller.org/downloads/

下载之后，安装过程中，请勾选Add Ruby executables to your PATH，添加环境变量。

如果没有勾选，需在安装完成之后配置Ruby环境变量。

在window系统中，新建系统变量RUBY_HOME，存放Ruby安装路径（D:Program FilesRuby23-x64）。

在系统变量Path中，添加Ruby运行环境路径（%RUBY_HOME%in），Ruby环境变量配置完成。

1.2 运行gem命令

安装完成之后，在开始菜单中找到Ruby，打开Start Command Prompt with Ruby，输入ruby -v，如果显示ruby的版本信息，表示安装成功。

1.3 安装sass

A. 安装方法一：原配置源安装

在命令行中直接输入gem install sass，按回车键即可。等待一段时间会提示安装成功。（因为国内网络原因，估计会安装不成功，所以可以FQ或者选择下面淘宝镜像安装）

安装Sass测试版本 gem install sass –pre

升级Sass版本 gem update sass

查看Sass版本 sass –v

帮助命令行 sass -h

B. 安装方法二：淘宝镜像安装

首先移除默认的配置源（https://rubygems.org/），然后添加淘宝镜像的配置源（https://ruby.taobao.org/），在命令行中输入

gem source --remove https://rubygems.org/

gem source --add https://ruby.taobao.org/

输入gem source查看当前的源是否为淘宝镜像配置源，如果为淘宝源，再输入gem install sass，等待一段时间，会提示安装成功。

C. 安装方法三：本地安装

还可以选择本地安装，需要在网上找到Sass的gem文件，下载链接：https://rubygems.org/gems/sass

下载之后，存放在任意位置，在命令行中输入gem install E://sass-3.4.22.gem，安装路径，根据自己存放的路径填写。

二. Sass基本用法

2.1 导入

我们都知道CSS文件，都有导入功能，@import ‘reset.css’，但是在建站方面，这种导入效果和页面分别link两个CSS文件样式表的效果是一样的，因为HTTP请求的数目并不会减少。

在Sass中，也有导入功能，如果导入的是CSS文件，@import ‘reset.css’，那效果和CSS文件导入效果是一样的，它还是以@import存在，并不会合并到编译后的CSS文件中。Sass导入可以省略.scss后缀名，如果以@import ‘reset’方式导入，会合并到编译后的CSS文件。一般需要导入的Sass文件是以_开头命名，如_reset.scss，导入只要引入reset即可。

被导入Sass文件，_a.scss：

$fontSize: 12px;

需要导入样式的Sass文件，b.scss：

@import 'a';
body {
  font-size: $fontSize;
}

编译后的CSS样式：

body {
  font-size: 12px;
}

2.2 注释

Sass文件添加注释有两种方式：

/* 这是注释 */

这种方式和CSS文件中的注释是一样的。如果在压缩模式下使用这种注释方式，那么在最终生产的CSS文件中注释将会被删除。但如果不用压缩输出方式，注释将保留在CSS文件中。

// 这是注释

Sass有可以用两条正斜杠表示单行注释，这和JavaScript、Java文件的单行注释方式相同。这种方式的注释，不会显示在输出的CSS文件中。

2.3 变量

Sass中定义变量的语法是：美元符号、变量名、冒号、变量值。

A.普通变量 $variable-name: value;

$colorMain: orange;
a {
  color: $colorMain;
}

编译后的CSS样式：

a {
  color: orange;
}

B.默认变量 $variable-name: value !default;

$fontSize: 13px !default;
body {
  font-size: $fontSize;
}

编译后的CSS样式：

body {
  font-size: 13px;
}

如果需要改变默认变量，在默认变量前面，重新赋值即可。（！default标识告诉Sass，只有在没有其他值赋值的情况下才使用默认值。）

$fontSize: 12px;
$fontSize: 13px !default;
body {
  font-size: $fontSize;
}

编译后的CSS样式：

body {
  font-size: 12px;
}

C.多值变量 $variable-name: value1 value2 value3;

Sass可以定义多值变量，多值变量可以分为list类型和map类型，对应于JavaScript的数组和对象。

list类型变量，是以空格，逗号或者括号来分割多个值，可用nth($list, n)函数来取值。

$colorLink: #222 $colorMain; //第一个为默认颜色值，第二个为鼠标滑过颜色值
a {
  color: nth($colorLink, 1);
  &:hover {
    color: nth($colorLink, 2);
  }
}

编译后的CSS样式：

a {
  color: #222;
}
a:hover {
  color: orange;
}

上面这部分类似为一维数组的定义和使用，下面为多维数组：

$px: 20px 15px, 15px 20px; //二维数组

或者用括号来分割：

$px: (20px 15px) (15px 20px); //二维数组

map类型变量，是以key-value成对定义的，其中value值又可以为普通变量或者list变量。格式为：$map(key1: value1, key2: value2, key3: value3)，可用map-get($map, $key)来取值。

$heading: (h1: 20px, h2: 16px, h3: 13px);
body {
  font-size: map-get($heading, h3);
}

编译后的CSS样式：

body {
  font-size: 13px;
}

2.4 嵌套

嵌套语法是：选择器，左大括号，属性-值对，右大括号。在多值变量的时候，我们用到了一个&这样的符号，指的是父元素选择器，在嵌套伪选择器的时候经常用到。（在使用嵌套的时候要注意，尽量不要超过三层。）

div {
  background: $colorMain;
  a {
    color: #fff;

    text-decoration: none;
    &:hover, &:active {
      text-decoration: underline;
    }
  }
}

编译后的CSS样式：

div {
  background: orange;
}
div a {
  color: #fff;
  text-decoration: none;
}
div a:hover, div a:active {
  text-decoration: underline;
}

在上面我们讲述的是选择器的嵌套，在Sass中，还有一种属性嵌套：

.div {
  background: {
    image: url("img/img_01.png");
    repeat: no-repeat;
    position: center;
  }
  border: {
    style: solid;
    color: $colorMain;
    left: {
       5px;
    }
    right: {
      width: 2px;
    }
  }
}

编译后的CSS样式：

.div {
  background-image: url("img/img_01.png");
  background-repeat: no-repeat;
  background-position: center;
  border-style: solid;
  border-color: orange;
  border-left-width: 5px;
  border-right-width: 2px;
}

注意：属性嵌套书写时，一定不要忘了属性后面所跟的冒号：。在对div的背景定义上，其实背景直接可以写为background: url(“img/img_01.png”) no-repeat center，不用像上面那么麻烦，所以在写样式的时候，也要注意减少不必要的麻烦。

2.5 继承

使用@extend命令可让任何元素继承其他样式定义好的属性和值。如果有好几个元素有共同的样式属性，这种情况可使用@extend命令。

.div {
  background: $colorMain;
  padding: 20px;
}
.div-01 {
  @extend .div;
  border: 2px solid #eee;
}
.div-02 {
  @extend .div;
  border: 2px solid #ccc;
}

编译后的CSS样式：

.div, .div-01, .div-02 {
  background: orange;
  padding: 20px;
}
.div-01 {
  border: 2px solid #eee;
}
.div-02 {
  border: 2px solid #ccc;
}

2.6 占位符

占位符与继承@extend命令一起使用，有些情况下，一些代码只是用来做扩展用，就可以用占位符选择器，以此来减少冗余代码。以继承的例子来，只需将开头的.div换为%div即可。这样在生成的CSS文件中就不会有.div的样式。

%div {
  background: $colorMain;
  padding: 20px;
}
.div-01 {
  @extend %div;
  border: 2px solid #eee;
}
.div-02 {
  @extend %div;
  border: 2px solid #ccc;
}

编译后的CSS样式：

.div-01, .div-02 {
  background: orange;
  padding: 20px;
}
.div-01 {
  border: 2px solid #eee;
}
.div-02 {
  border: 2px solid #ccc;
}

2.7 混合宏

混合宏以@mixin命令声明，基本语法是：@mixin mixin-name($parameter) {…: $parameter}，混合宏既可以不传递参数，也可以有参数，并且可以是单个，也可以有多个参数。Compass提供了许多现成的混合宏。

A.无参数混合宏

无参数混合宏相当于继承，可以直接用继承代替。

@mixin center-block {
  margin-left: auto;
  margin-right: auto;
}
.div {
  @include center-block;
}

编译后的CSS样式：

.div {
  margin-left: auto;
  margin-right: auto;
}

B.有参数的混合宏

以圆角为例（通常在定义混合宏的参数时，都会设定一个默认值，当然，也可以不设定。）：

@mixin border-radius($radius: 4px) {
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
  -o-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}
.div {
  @include border-radius(5px);
}

编译后的CSS样式：

.div {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  border-radius: 5px;
}

C.多个参数混合宏

对于#{$direction}，可能有点陌生，这是变量的一种特殊使用方法，在字符串中使用，用#{}包含变量。

@mixin border-direction-radius($direction: top-left, $radius: 4px) {
  -moz-border-#{$direction}-radius: $radius;
  -webkit-border-#{$direction}-radius: $radius;
  -o-border-#{$direction}-radius: $radius;
  -ms-border-#{$direction}-radius: $radius;
  border-#{$direction}-radius: $radius;
}
.div {
  @include border-direction-radius(top-left, 5px)
}

编译后的CSS样式：

.div {

  -moz-border-top-left-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -o-border-top-left-radius: 5px;
  -ms-border-top-left-radius: 5px;
  border-top-left-radius: 5px;
}

D.多组值参数

如果一个参数可以有多组值，如box-shadow，transition等，那么参数则需要在变量后加三个点表示，如：$variables… 。以box-shadow为例，box-shadow: h-shadow v-shadow blur spread color inset，都指的是box-shadow: 水平偏量垂直偏量模糊值阴影扩散值阴影的颜色 inset值。

@mixin box-shadow ($shadow...){
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  -o-box-shadow: $shadow;
  -ms-box-shadow: $shadow;
  box-shadow: $shadow;
}
.div {
  @include box-shadow(1px 1px 2px 0px gray, 0px 1px 0px 1px lighten(gray, 0.5));
}

编译后的CSS样式：

.div {
  -moz-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
  -webkit-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
  -o-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
  -ms-box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
  box-shadow: 1px 1px 2px 0px gray, 0px 1px 0px 1px #818181;
}

三. Sass编程

3.1 数学计算

Sass可进行加、减、乘、除计算。注意，进行计算时，数值的单位必须一致，并且运算符号最好两边都有一个空格，以免计算出错。

A.加法

$widthContainer: 1200px;
$widthLeft: 20%;
$widthRight: 80%;
.div {
  width: $widthLeft + $widthRight;
}

编译后的CSS样式：

.div {
  width: 100%;
}

B.减法

.div {
  width: $widthRight - $widthLeft;
}

编译后的CSS样式：

.div {
  width: 60%;
}

C.乘法

在计算乘法的时候要注意，当相乘时，如果值后面都带单位，会出现问题。

.addition {
  width: 20px * 40px;
}

编译时，报错：

800px*px isn't a valid CSS value.

如果只给一个值带单位，就正常了

.addition {
  width: 20 * 40px;
}

编译后的CSS样式：

.addition {
  width: 800px;
}

D.除法

在计算除法的时候，跟乘法一样，只需要一个值带单位即可，并且表达式放在括号内，才能正常使用。

.addition {
  width: 80% / 20%;
}

对此，编译之后，在CSS中，是没有意义的

.addition {
  width: 80% / 20%;
}

如果使用括号：

.addition {
  width: (80% / 20);
}

编译之后的CSS样式：

.addition {
  width: 4%;
}

3.2 条件

@if和@else if控制命令，举个简单例子：

$div: left;
.div {
  @if $div == left {
    float: left;
  }@else if $div == right {
    float: right;
  }
}

编译后的CSS样式：

.div {
  float: left;
}

3.3 循环

@for循环命令，有两种形式：@for $variable from startNum to endNum，和@for $variable from startNum through endNum，startNum表示起始值，endNum表示结束值，关键字to循环时不包括endNum这个数，through循环时包括endNum这个数。

@for $i from 1 through 3 {
  .div-#{$i} {

    width: 100px * $i;

}
}

编译后的CSS样式：

.div-1 {
  width: 100px;
}
.div-2 {
  width: 200px;
}
.div-3 {
  width: 300px;
}

@for $variable from startNum to endNum：

@for $i from 2 to 4 {
  .div-#{$i} {
    width: 100px * $i;
  }

编译后的CSS样式：

.div-2 {
  width: 100px;
}
.div-3 {
  width: 200px;
}

@each循环命令，基本语法是：@each $variable in list/map，list/map表示list类型或者map类型变量。

A.循环list类型变量

@each $list in a,b,c {
  .#{$list} {
    background-image: url("img/#{$list}.png");
  }
}

编译后的CSS样式：

.a {
  background-image: url("img/a.png");
}
.b {
  background-image: url("img/b.png");
}
.c {
  background-image: url("img/c.png");
}

多组值的循环：

$listData: (a, no-repeat, left top) (b, no-repeat, left bottom);
@each $name, $repeatType, $sizeType in $listData {
  .#{$name} {
    background-image: url("img/#{$name}.png");
    background-repeat: $repeatType;
    background-position: $sizeType;
  }
}

编译后的CSS样式：

.a {
  background-image: url("img/a.png");
  background-repeat: no-repeat;
  background-position: left top;
}
.b {
  background-image: url("img/b.png");
  background-repeat: no-repeat;
  background-position: left bottom;
}

B.循环map类型变量

$headings: (h1: 20px, h2: 16px, h3: 13px);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

编译后的CSS文件：

h1 {
  font-size: 20px;
}
h2 {
  font-size: 16px;
}
h3 {
  font-size: 13px;
}

3.4函数

Sass提供了好多现成的函数，我们也可以自己定义函数，用@function命令定义函数，@return定义函数返回值。

@function func() {
  @return 13px;
}
body {
  font-size: func();
}

编译之后的CSS样式：

body {
  font-size: 13px;
}

相关链接：Sass关于颜色函数的乐趣

我快乐，我随意... ...