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 Files\Ruby23-x64）。

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

1.2 运行gem命令

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

1.3 安装sass

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

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

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

    升级Sass版本
gem update sass

    查看Sass版本
sass –v

    帮助命令行
sass -h

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

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

   
gem source --removehttps://rubygems.org/ 

 
  gem source --addhttps://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: {
width: 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;
}