Sass的学习

时间 2019-11-18

标签 sass 学习繁體版

原文原文链接

第一章：Sass简介javascript

1、什么是CSS预处理器css

定义：CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增长一些编程的特性，将CSS做为目标生成文件，而后开发者就只要使用这种语言进行编码工做。html

通俗的说，CSS预处理器用一种专门的编程语言，进行web页面的样式设计，而后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增长一些编程特性，无需考虑浏览器的兼容性问题。java

例如：你能够在CSS中使用变量、简单的逻辑程序、函数等在编程语言中的一些基本特性，可让你的CSS更加简洁、适应性强、可读性更加、更易于代码的维护。git

2、什么是Sass?程序员

Sass是一门高于CSS的元语言，它能用来清晰地、结构化的描述文件样式。有着比普通CSS更强大的功能。github

Sass可以提供更简洁、更优雅的语法，同时提供多种功能来建立可维护和管理的样式表。Sass是采用Ruby语言编写的一款CSS预处理语言，它诞生于2007年，是最大的成熟的CSS预处理语言。web

3、Sass早期为何不如less普及？编程

虽然缩进式风格能够有效缩减代码量，强制规范代码风格，但它一方面不为大多数程序接受，另外一方面没法兼容已有的CSS代码。因此远不如LESS普及bootstrap

4、Sass和SCSS有什么区别？

Sass和Scss实际上是一种东西，咱们平时都称之为Sass，二者之间的不一样之处有两点：

一、文件扩展名不一样，Sass是以“.sass”后缀为扩展名，而SCSS是以‘.scss’后缀为扩展名

二、语法书写方式不一样，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

}

编译出来的CSS

body{

　　font:100% Helvetica,sans-serif;

color:#333;

}

5、Sass/SCSS和纯CSS写法差不少吗？

Sass和CSS写法有差异：

Sass是基于Ruby写出来的，因此其延续了Ruby的书写规范。在书写时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的

SCSS和CSS写法无差异：这也是Sass后来愈来愈受大众喜欢的缘由之一。

第二章：Sass安装环境

1、MAC 系统

一、确认是否安装Ruby

二、打开终端命令，进入 stability下输入 ruby -v

若是提示已经安装ruby 就能够直接进行Sass安装了

三、输入sudo gem install sass 而后回车自动会安装

四、能够输入sass -v进行检测sass是否安装成功

五、还能够将sass下载到本地，而后输入sudo gem install +sass路径进行安装

2、windows系统

一、首先下载Ruby安装包（官网：http://rubyinstaller.org/downloads 下载对应的Ruby版本）

二、Ruby安装文件下载好后，能够按应用软件安装步骤进行安装Ruby，建议安装在C盘下，安装过程当中选择第二个选项。

三、安装完成后，在开始菜单中找到新安装的Ruby，并启动Ruby的Command 控制面板

四、安装sass——有多种方法

1）经过命令安装Sass

打开电脑的命令终端，输入下面命令： gem install sass

2）经过Compass来安装sass

除了使用gem命令来安装Sass以外，还能够经过安装compass来安装sass。由于Compass是基于Sass开发的一个框架（里面集成了不少好写的mixins和Sass函数），也就是说，安装了Compass,也就安装好了Sass

一样在命令终端输入：sudo gem install sass

3）本地安装Sass

因为有时候直接使用上面的命令安装没法实现正常安装（网络受限缘由），当碰到这种状况时须要特殊去处理，可使用下面的方法

能够到Rubygems（官网：http://rubygems.org/）网站上将Sass的安装包（http://rubygems/sass）下载下来，而后在命令终端输入：gem install <把下载的安装包拖到这里>直接回车便可安装成功

注：在IOS系统平台，能够直接将下载的安装包拖到‘gem install’后面，若是是在Windows系统，须要手动输入安装的文件路径

4）淘宝RubyGems镜像安装 Sass

经过淘宝RubyGems 镜像安装Sass，须要经过gem source 命令来配置源，先移除默认的 https://rubygems.org源，而后添加淘宝源 https://ruby.taobao.org源

第一步：移除默认的源：gem sources --remove https://rubygems.org/

第二步：指定淘宝的源：gem sources -a https://ruby.taobao.org/

第三步: 查看指定的源是否是淘宝源：gem sources -l

确保只有ruby.taobao.org 若是无误以后，执行下面的命令：gem install sass

3、查测Sass及更新

一、查看Sass是否安装成功

输入下面命令便可：sass -v

若是终端上显示Sass 版本，说明sass安装成功，可使用了

二、更新sass

维护sass的团队会不断的为Sass添加新的功能，那么如何确保本身已安装Sass也具备这些新功能呢，只须要输入命令：gem update sass

看到更新成功的信息，说明已经更新

4、卸载Sass

在长期使用中不免会碰到没法解决的问题，有时候须要卸载Sass，而后从新安装Sass，卸载命令：gem uninstall sass

第三章 Sass的语法格式及编译调试

1、Sass的语法格式

一、Sass的语法格式

这里说的Sass语法是Sass的最初语法格式，他是经过tab键控制缩进的一种语法规则，并且这种缩进要求很是严格。另外其不带有任何的分号和大括号，经常把这种格式成为Sass老版本，其文件名以“.sass”为扩展名

二、SCSS语法格式

SCSS是Sass的新语法格式，它和CSS同样，代码包裹在一对大括号里，而且末尾结束处都有一个分号，文件名以“scss”为扩展名

注意：“.sass”只能使用Sass老语法规则（缩进规则），“.SCSS”使用的是Sass的新语法规则，也就是SCSS语法规则（相似css语法格式）

2、 Sass编译

Sass编译有多种方法：

一、命令编译

指使用电脑中的命令终端，经过输入Sass指令来编译Sass。只须要在命令终端输入：

单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

这是对一个单文件进行编译，若是想对整个项目因此sass文件编译成css文件，能够这样操做

多文件编译：sass sass/：css/ 此命令表示将项目中“sass”文件夹中全部“.scss”文件编译成“.css”文件，而且将这些CSS文件都放在项目中“css”文件夹中

缺点及解决办法：

在实际编译过程当中，会发现上面的命令只能一次性编译，每次修改并保存文件以后，都得从新执行一次这样的命令。因而可使用如下方法：就是在编译Sass时，开启“watch”功能，这样，只要有代码进行保存修改，都能自动检测到代码的变化，而且给你直接编译出来

sass --watch <要编译的Sass文件路径>/style.scss;<要输出CSS文件的路径>/style.css

固然，使用sass命令编译时，能够带不少的参数

watch举例：

假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，而且把编译出来的文件放在“css”文件中，我就能够在命令终端执行：

sass --watch

sass/bootstrap.scss:css/bootstrap.css

一旦个人bootstrsp.scss文件有任何修改，只要我从新保存了修改的文件，命令终端就能检测并从新编译出文件；

二、GUI工具编译

目前较为流行的GUI界面工具主要有：

1）Koala（http://Koala-app.com/）

2) Compass.app(http://compass.kkbox.com/)

3) Scout (http://mhs.github.io/scout-app/)

4) CodeKit (http://incident57.com/codekit/index.html)

5)Prepros(https://prepros.io/)

相比之下，推荐使用如下两个

1）Koala（http://Koala-app.com/）

2) CodeKit (http://incident57.com/codekit/index.html)

三、自动化编译

可使用 Grunt 和Gulp 这两个东东来配置Sass的编译，不建议生搬硬套。

3、Sass常见的编译错误

在编译Sass代码时经常会碰到一些错误，让编译失败，这样的错误有系统形成的也有人为形成的，但大部分都有谁人为过失引发编译失败

最为常见的一个错误就是字符编译引发的，在Sass编译过程当中不支持“GBK”编码，因此在建立Sass文件时，须要将文件编码设置为“utf-8”

另一个错误就是路径中的中文字符引发的，建议在项目中文件命名或者文件目录命名不要使用中文字符。至于人为失误形成的编译失败，在编译过程当中都会有具体的说明，能够根据编译提供的错误信息进行对应的修改

4、不一样样式风格的输出方法

在Sass中编译出来的样式风格能够按不一样的样式风格显示。主要包括如下几种：

一、嵌套输出方式 nested

Sass提供了一种嵌套显示CSS文件的方式。例如

nav{
  ul{
  margin:0;
    padding:0;
    list-style:none;
  }
  li{
    display:inline-block;
  }
  a{
    display: block;
    padding:6px 12px;
    text-decoration:none;
  }
在编译时带上参数 --style nested 

sass D:\xxw\sass\sass\index.scss:D:\xxw\sass\css\index.css --style nested

编译出来的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; }

二、展开输出方式 expanded

nav{
  ul{
  margin:0;
    padding:0;
    list-style:none;
  }
  li{
    display:inline-block;
  }
  a{
    display: block;
    padding:6px 12px;
    text-decoration:none;
  }
在编译时带上参数 --style expanded
这个输出的CSS样式风格和nested相似，只是大括号在另起一行，一样上面的代码，编译出来：

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

/*# sourceMappingURL=expand.css.map */

三、紧凑输出方式 compact

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

在编译时带上参数 --style compact

该方式适合那些喜欢单行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; }

四、压缩输出方式 compressed

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

在编译时带上参数 --style compressed
压缩输出方式会去掉标准的Sass和CSS注释及空格，也就是压缩好的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}
编译出来的CSS样式风格的选择彻底是我的喜爱问题，能够根据本身喜欢的风格选择参数

一段时间后，你实际就再也不须要写CSS代码了，只用写Sass代码，在这种状况下设定输出格式为压缩格式，知道输出的CSS代码能够直接使用便可。

5、Sass的调试

咱们使用Sass都但愿能在浏览器中直接调试Sass文件，能找到对应的行数，如今这并非一件难事：只要你的浏览器支持“sourcemap”功能便可。早一点的版本须要在编译的时候添加参数“sourcemap”

在Sass3.3版本以上的不须要添加这个参数也能够

sass --watch D:\xxw\sass\sass\index.scss:D:\xxw\sass\css\test.css
在命令终端，看到以下信息：

Sass is watching for changes. Press Ctrl-C to stop.
write D:\xxw\sass\css\test.css
write D:\xxw\sass\css\test.css.map

说明你能够在浏览器中 sources 下调试你的Sass代码了

第四章 Sass的基本特性——基础

1、Sass 声明变量

定义变量的语法：Sass中声明变量使用$；

$width:300px;

Sass的变量包括三个部分：

一、声明变量的符号 $

二、变量名称

三、赋予变量的值

2、Sass普通变量与默认变量

普通变量：定义以后可在全局范围内使用

$fontSize:12px;

body{

fint-size:$fontSize

}

编译以后的CSS代码：

body{

　　font-size:12px;

}

默认变量：

sass的默认变量只须要在值后面加上！default便可

$baseLineHeight:1.5!default;
body{
  line-height:$baseLineHeight;
}
编译后的CSS代码：

body {
  line-height: 1.5; }

sass变量的默认变量通常是用来设置默认值，而后根据需求来覆盖的，覆盖方式：在默认变量以前从新声明下变量

$baseLineHeight:2;
$baseLineHeight:1.5!default;
body{
  line-height:$baseLineHeight;
}

编译后的CSS代码：

body {
  line-height: 2; }

注：默认变量的价值在进行组件化开发的时候会很是有用

3、变量的调用

在Sass中声明了变量以后，就能够在须要的地方调用变量。

好比：定义了以下变量：

$brand-primary:darken(#428bca,6.5%)
!default; //#337ab7
$btn-primary-color:#fff!default;
$btn-primary-bg:$brand-primary !default;
$btn-primary-border:darken($brand-primary,5%)!default;

在按钮button中调用，能够按下面方式调用

.btn-primary{
  background-color:$btn-primary-bg;
  color:$btn-primary-color;
  border:$btn-primary-border;
}
编译出来的CSS：

.btn-primary {
  background-color: #337ab7;
  color: #fff;
  border: #2e6da4; }

4、局部变量和全局变量

先来看一个例子：

$color:orange !default;//定义全局变量（在选择器、函数、混合宏...的外面定义的变量为全局变量）
.block{
  color:$color;//调用全局变量
}
em{
  $color:red;//定义局部变量
  a{
    color:$color;//调用局部变量
  }
}
span{
  color:$color;//调用全局变量
}

编译后的CSS

.block {
  color: orange; }

em a {
  color: red; }

span {
  color: orange; }

根据演示能够得知，在元素内部定义的变量不会影响其余元素。如此能够简单的理解成：全局变量就是定义在元素外面的变量
除此以外，Sass如今还提供一个！global参数，以后会详细介绍

全局变量的影子：当在局部范围内（选择器内、函数内、混合宏内、、）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量

须要声明变量的状况：建立变量只适用于感受确实有必要的状况下。只有知足下述标准时方可建立新变量：
  一、该值至少出现了两次
  二、该值至少可能会被更新一次
  三、该值全部的表现都和变量有关
基本上没有理由声明一个不须要更新或者只在单一地方使用的变量

5、选择器嵌套

Sass中提供了选择器嵌套功能，但这并不意味着在Sass中的嵌套是无节制的，由于嵌套的层级越深，编译出来的CSS代码的选择器层级将越深。
选择器嵌套为样式表的做者提供了一个经过局部选择器嵌套实现全局选择的方法，Sass嵌套分为三种：
  一、选择器嵌套
SCSS下代码：

nav{
  a{
    color:red;
    header &{
      color:green;
    }
  }
}

编译出的CSS代码：

nav a {
  color: red; }
  header nav a {
    color: green; }


  二、属性嵌套
Sass中提供了属性嵌套功能，CSS有一些属性前缀相同，只是后缀不同，好比：border-top/right,与之相似的还有margin、padding、font等
例子：

.box{
  border:{  //注意要写上冒号：
    top:10px;
    right:15px;
  }
}
编译出来的CSS代码：

.box {
  border-top: 10px;
  border-right: 15px; }

  三、伪类嵌套
其实伪类嵌套和属性嵌套很是相似，只不过须要借助“&”符号配合使用
例子：

.clearfix{
  &:before,
  &:after{
    content:"";
    display:table;
  }
  &:after{
    clear:both;
    overflow:hidden;
  }
编译出来的CSS代码：

.clearfix:before, .clearfix:after {
  content: "";
  display: table; }
.clearfix:after {
  clear: both;
  overflow: hidden; }

使用嵌套选择器存在的问题：
一、将使最终的代码难以阅读
二、选择器越具体则声明语句越冗长，并且对最近选择器的引用（&）越频繁，出现混淆选择器路径和探索下一级选择器的错误率很高

因此咱们应可能避免选择器嵌套


8、声明混合宏
若是你的整个网站中有几处样式相似，在Sass中可使用变量来统一处理，可是当你的样式变得愈来愈复杂，须要重复使用大段样式时，使用变量就没法达到目的了。这事，Sass中的混合宏就变得很是有意义

1、声明混合宏
 1)不带参数混合宏
在Sass中，使用“@mixin”来声明一个混合宏。如：
@mixin border-radius{
　　-webkit-border-radius:5px;
　　border-radius:5px;
}

其中@mixin 是用来声明混合宏的关键词 ，border-rasius是混合宏的名称。大括号中为复杂的样式代码

 2）带参数混合宏

  除了申明一个不带参数的混合宏以外，还能够在定义混合宏时带有参数，如：

@mixin border-radius($radius:5px){
　　-webkit-border-radius:$radius;
　　border-radius:$radius;
}

 3)复杂的混合宏
Sass的混合宏还提供更为复杂的，你能够在大括号里面写上带有逻辑关系，帮助咱们更好的作事情
@mixin box-shadow($shadow...){
　　@if length($shadow)>=1{
 　　　@include prefixer(box-shadow,$shadow);
}@else{
　　@shadow:0 0 4px rgba(0,0,0,.3);
   @include prefixer(box-shadow,$shadow);
 }
}
这个box-shadow的混合宏，带有多个参数，这个时候可使用“...”来代替

9、调用混合宏

在Sass中经过“@include”关键词来调用声明好的混合宏，例如：

@mixin border-radius{
  -webkit-border-radius:3px;
    border-radius:3px;
}
在一个按钮中调用定义好的混合宏“border-radius”，能够这样使用：

button{
  @include border-radius;
}
编译出来的CSS代码：

button {
  -webkit-border-radius: 3px;
  border-radius: 3px; }

10、混合宏的参数

Sass的混合宏有一个强大的功能，能够传参，在Sass中传参主要有如下几种情形：
 1）传一个不带值的参数
   
 @mixin border-radius($radius){
　　-webkit-border-radius:$radius;
     border-radius:$radius;
      
}
在混合宏中定义了一个不带任何值的参数”$radius“
在调用的时候能够给这个混合宏传一个参数值

.box{
  @include border-radius(3px);
}
编译出来的CSS代码：
　　.box {

  -webkit-border-radius: 3px;
  border-radius: 3px; }

2）混合宏的参数——传一个带值的参数

在Sass的混合宏中还能够给混合宏的参数传一个默认值，例如：

@mixin border-radius($radius:5px){
  -webkit-border-radius:$radius;
  border-radius:$radius;
}
在调用相似这样的混合宏时，会多一个机会，若是你页面中的圆角不少地方都是”3px“，这时候只须要调用默认的混合宏”border-radius“

.btn{
  @include border-radius;
}
编译出来的CSS代码：

.btn {
  -webkit-border-radius: 5px;
  border-radius: 5px; }
但有时候，页面中有些元素的圆角值不同，那么能够随机给混合宏传值，如：

.btn{
  @include border-radius(50%);
}
编译出来的CSS代码：

.btn {
  -webkit-border-radius: 50%;
  border-radius: 50%; }

3）混合宏传多个参数
Sass混合宏除了能传一个参数外，还能够传多个参数，如：

@mixin center($width,$height){
  width:$width;
  height:$height;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-($height)/2;
  margin-left:-($width)/2;
}
混合宏”center“就传了多个参数，在实际调用和调用其它混合宏是同样的
.box-center{
　　@include center(500px,300px);
}
编译出来的CSS代码：

.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px; }

有一个特别的参数”...“，当混合宏传的参数过多时，可使用这个参数来代替，如：

@mixin box-shadow($shadows...){
　　@if length($shadows)>=1{
　　　　-webkit-box-shadow:$shadows;
       box-shadow:$shadows;
　　}@else{
　　　　$shadows:0 0 2px rgba(#000,.25);
　　　　-webkit-box-shadow:$shadow;
               box-shadow:$shadow;
   }
}

在实际调用中：

.box{
  @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}
编译出来的CSS代码：

.box {
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); }

11、混合宏的不足

混合宏在实际编码中给咱们带来不少方便之处，特别对于复用重复代码块，但其最大的不足之处是：会生成冗余的代码块，如：在不一样的地方调用一个相同的混合宏时，如：

@mixin border-radius($radius){
  -webkit-border-radius:$radius;
  border-radius:$radius;
}
.box{
  @include border-radius(3px);
  margin-bottom:10px;
}
.btn{
  @include border-radius(3px);
}
编译出来的CSS代码：

.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 10px; }

.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px; }
上面能够明显看出，Sass在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一块儿，这是Sass的混合宏最不足之处。

12、Sass的扩展和继承
在Sass中同CSS同样，也具备继承一说，也是继承类中的样式代码块。在Sass中是经过关键词“@extend”来继承已存在的类样式块，从而实现代码的继承。如：

.btn{
  border:1px solid #cccccc;
  padding:6px 10px;
  font-size:14px;
}
.btn-primary{
  background-color:#f36;
  color:#fff;
  @extend .btn;
}
.btn-second{
  background-color:orange;
  @extend .btn;
}
编译后的CSS代码：

.btn, .btn-primary, .btn-second {
  border: 1px solid #cccccc;
  padding: 6px 10px;
  font-size: 14px; }

.btn-primary {
  background-color: #f36;
  color: #fff; }

.btn-second {
  background-color: orange; }
上述能够看出，在Sass中的继承，能够继承样式块中全部样式代码，并且编译出来的CSS会将选择器合并在一块儿，造成群组选择器：

.btn, .btn-primary, .btn-second {
  border: 1px solid #cccccc;
  padding: 6px 10px;
  font-size: 14px; }

十3、Sass占位符 %placeholder

Sass 中的占位符%placeholder功能是一个很强大，很实用的功能，他能够取代之前CSS中的基类形成的代码冗余的情形，由于%placeholder声明的代码，若是不被@extend调用的话，不会产生任何代码，如：

%mt5{
　　margin-top:5px;
}
%pt5{
　　padding-top:5px;
}
这段代码没有被@extend调用，他并无产生任何代码块，只有经过@extend调用才会产生代码：

%mt5{
  margin-top:5px;
}
%pt5{
  padding-top:5px;
}
.btn{
  @extend %mt5;
  @extend %pt5;
}
.block{
  @extend %mt5;
}
span{
  @extend %pt5;
}
编译出来的CSS代码：

.btn, .block {
  margin-top: 5px; }

.btn, .block span {
  padding-top: 5px; }
上述能够看出，经过@extend 调用的占位符，编译出来的代码会将相同的代码合并在一块儿。这也是咱们但愿看到的效果，也让代码变得更为干净

十4、混合宏 VS 继承 VS 占位符

	混合宏	继承	占位符
声明方式	@mixin	.class	%placeholder
调用方式	@include	@extend	@extend
使用环境	若是相同代码块须要在不一样环境传递不一样的值时，能够经过混合宏来定义重复使用的代码块。不足：他不会自动合并相同的样式代码，若是在样式文件中调用同一个混合宏，会产生多个对应的样式代码，形成代码的冗余	若是相同代码块不须要传递不一样的值，而且此代码块已在CSS文件中定义，能够经过Sass 的继承来调用已存在的基类。使用继承将会将调用相同基类的代码合并在一块儿不足：若是基类并不存在于HTML结构时，无论调用与不调用，在编译出来的CSS中都将产生基类对应的样式代码	占位符和继承基本相似，惟一不一样的是，相同代码块并无在基类中存在，而是额外声明。若是不调用已声明的占位符，将不会产生任何样式代码，若是早不同选择器调用占位符，那么编译出来的CSS代码将会把相同的代码合并在一块儿。


十7、插值

使用CSS预处理器语言的一个主要缘由是想使用Sass得到一个更好的结构体系。好比：想写更干净的、高效的和面向对象的CSS。Sass中的插值就是重要的一部分
例子：

$properties:(margin,padding);
@mixin set-value($side,$value){
  @each $prop in $properties{
    #{$prop}-#{$side}:$value;
  }
}
.login-box{
  @include set-value(top,14px);
}

@each...in...语句，它可让变量和属性工做很完美，上面代码编译成CSS代码：

.login-box {
  margin-top: 14px;
  padding-top: 14px; }

这是Sass插值中一个简单的实例。当你想设置属性值时，你可使用字符串插入进来。另外一个游泳的用法是构建一个选择器。能够这样使用：

@mixin generate-sizes($class,$small,$medium,$big){
  .#{$class}-small{font-size:$small}
  .#{$class}-medium{font-size:$medium}
  .#{$class}-big{font-size:$big}
}
@include generate-sizes('header-text',12px,20px,40px);
注意：#{}语法不是随处可用，也不能在mixin中调用（注意是调用而不是声明）插值

幸运的是，能够经过使用@extend去使用插值
例如：

%update-status{
  margin-top:20px;
  background:#F00;
}
.selected-status{
  font-weight:bold;
}
$flag:"status";
.navigation{
  @extend %update-#{$flag};
  @extend .selected-#{$flag};
}
编译出来的CSS代码：

.navigation {
  margin-top: 20px;
  background: #F00; }

.selected-status, .navigation {
  font-weight: bold; }

十8、Sass注释

注释对于一名程序员来讲极其重要，良好的注释能帮助本身或者别人阅读代码。在Sass中有两种注释方式：
 一、相似CSS注释方式,使用/*开头*/结尾
 二、相似javascript的注释方式，使用”//“
二者区别：前者在编译出来的CSS显示，后者不显示

十9、Sass数据类型
Sass和javascript语言相似，也具备本身的数据类型，在Sass中包含如下几种数据类型

数字：如，1，2，13，10px
字符串：有引号字符串和无引号字符串，如，”foo“、”bar“、baj
颜色：如 blue、#04a3f九、rgba(255,0,0,0.5)
布尔型：如，true，false
空值：null
值列表：用空格或逗号分开，如：1.5em 1em 0 2em 、Helvetica、Arial、sans-serif
Sass也支持其余CSS属性值，好比：Unicode 范围或！important声明。可是Sass不会特殊对待这些属性值，一概视为无引号字符串

二10、Sass字符串
SassScript支持CSS的两种字符类型：

 一、有引号字符串,如：”Lucida Grande“
 二、无引号字符串，如：sans-serif bold
在编译CSS文件时不会改变其类型，只有一种状况例外，使用#{}插值语句时，有引号字符串将被编译为五引号字符串，这样方便了在混合指令中引用选择器名
@mixin firefox-message($selector){
　　body .firefox #{$selector}:before{
　　 content:"Hi,firefox users!";
 }
}
@include firefox-message(".header");
编译出来的CSS代码为：

　body .firefox .header:before{
　　 content:"Hi,firefox users!";
 }

二11、值列表
所谓的值列表是指Sass中如何处理 经过空格或者逗号分隔的一系列的值
独立的值也被视为值列表——只包含一个值的值列表

Sass值列表函数赋予了值列表更多功能
  一、nth函数 能够直接访问值列表中的某一项
  二、join函数  能够将多个值列表连结在一块儿
  三、append函数 能够在值列表中添加值
  四、@each  可以给值列表中每一个项目添加样式

能够用（）表示空的列表，这样不能够直接编译成CSS，若是值列表中包含空的值列表或空值，编译时将清除空值。

第五章 Sass的基本特性——运算

1、加法
在Sass中，运算只是其基本特征之一。在Sass中能够作各类数学计算。
首先简单普及一下CSS中的单位问题：

在写css的时候最经常使用的长度单位是px(像素)，常常看到的还有em，pt等等，其实css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm。
　　一、px：像素(Pixel),相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。
　　譬如，WONDOWS的用户所使用的分辨率通常是96像素/英寸。而MAC的用户所使用的分辨率通常是72像素/英寸。
　　二、em：相对长度单位。相对于当前对象内文本的字体尺寸。
　　如当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
　　三、pt：点(Point)，绝对长度单位。
　　四、ex：相对长度单位。相对于字符“x”的高度。此高度一般为字体尺寸的一半。
　　如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。


　　五、pc：派卡(Pica)，绝对长度单位。至关于我国新四号铅字的尺寸。
　　六、in：英寸(Inch)，绝对长度单位。
　　七、mm：毫米(Millimeter)，绝对长度单位。
　　八、cm：厘米(Centimeter)，绝对长度单位。
　　其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ;
　　容器的大小咱们常常用px作单位;字体大小(font-size)不少人用px作单位，其实用px作字体单位惟一的致命缺点就是在IE下没法用浏览器字体缩放的功能。

加法运算：是Sass中运算中的一种，在变量或属性中均可以作加法运算，如：

.box{
  width:20px + 8in;
}
编译出来的CSS代码：

.box {
  width: 788px; }
可是对于携带不一样类型的单位时，在Sass中计算会报错

2、减法
Sass的减法运算和加法运算相似

.content{
  width:$full-width - $sidebar-width;//为了区分减号与横线，减数后与被减数前分别加上一空格
}
编译出来的CSS代码：

.content {
  width: 760px; }

一样，运算时碰到不一样类型的单位时，编译也会报错，如：px和em进行运算

3、乘法
Sass中的乘法晕运算和前面介绍的加法与减法运算略有不一样。虽然它可以支持多种单位（如 px，em，%），但当一个单位同时声明两个值时会有问题
.box{
　　width:10px*2px;
}
编译时候会报错，若是进行乘法运算时，两个值单位相同时，只须要为一个数值提供单位便可。

例如：.box{
　　width：10px*2;
}
编译出来的CSS代码：

.box{
　　width：20px;
}

Sass的乘法运算和加法、减法运算同样，在运算中有不一样类型的单位时，也将会报错

4、除法
Sass的乘法运算规则也适用于除法运算，不过除法运算还有一个特殊之处。因为”/“符号在CSS中已作为一种符号使用，所以在Sass中作除法运算时，直接使用”/“作为除号时，编译得不到咱们想要的效果，也不会报错
因此在进行除法运算时，要在运算的外面加上一小括号（），如：

.box{
  width:(100px/2);
}
编译出来的CSS代码：

.box {
  width: 50px; }

另外，若是”/"符号在已有的数学表达式中时，也会被认做除法符号，如：

.box{
  width:100px/2+2in;
}
编译出来的CSS代码：

.box {
  width: 242px; }

在Sass除法运算中，当用变量进行除法运算时，”/“符号也会被自动识别为除法，如：

$width:1000px;
$nums:10;
.item{
  width:$width/10;
}
.list{
  width:$width/$nums;
}
编译出来的CSS代码：

.item {
  width: 100px; }

.list {
  width: 100px; }
综上所述，”/“符号被看成除法运算符时有如下几种状况：
 1）若是数值或他的任意部分是存储在一个变量中或是函数的返回值
 2）若是数值被圆括号包围
 3）若是数值是另外一个数学表达式的一部分
Sass的除法运算还有一个状况，若是两个值带有相同的单位值时，除法运算会获得一个不带单位的数值如：

.box{
  width:(1000px/100px);
}
编译出来的CSS代码：

.box {
  width: 10; }

5、变量运算
在Sass中除了可使用数值进行运算以外，还可使用变量进行运算，在Sass中使用变量进行运算，这使得Sass的数学运算功能变得更加实用，示例：

$content-width:720px;
$sidebar-width:220px;
$gutter:20px;
.content{
  width:$content-width + $sidebar-width +$gutter;
  margin:0 auto;
}
编译出来的CSS代码：

.content {
  width: 960px;
  margin: 0 auto; }

6、数字运算
在Sass运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法运算。并且还能够经过括号来修改他们的运算前后顺序
和咱们的数学运算是同样的，如：

.box{
  width:((220px+720px)-11*20)/12;
}
编译出来的CSS代码：

.box {
  width: 60px; }

第四章 Sass的基本特性——基础

1. sass学习--什么是sass
2. Sass学习
3. SASS学习
4. sass学习
5. sass我的学习笔记
6. SASS/SCSS的学习归纳
7. Sass 学习笔记
8. sass学习总结
9. sass学习笔记
10. Sass学习笔记
更多相关文章...
• 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
• 我们已经学习了 SQL，下一步学习什么呢？ - SQL 教程
• 适用于PHP初学者的学习线路和建议
• Tomcat学习笔记（史上最全tomcat学习笔记）