CSS预处理器——SASS学习笔记(一)
来源：互联网 发布：cnc五轴编程招聘 编辑：程序博客网 时间：2024/04/27 23:34
什么是CSS预处理器？
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只需要使用
这种语言进行编码工作。通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理
器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，例如你可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让
你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS 预处理器技术已经非常的成熟，而且也涌现出了很多种不同的CSS 预处理器语言，比如说：
- Sass（SCSS）
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
DT CSS如此之多的 CSS 预处理器，那么“我应该选择哪种 CSS 预处理器？”也相应成了最近网上的一大热门话题，在 Linkedin、Twitter、CSS-Trick、知乎以及各大
技术论坛上，很多人为此争论不休。相比过去我们对是否应该使用 CSS 预处理器的话题而言，这已经是很大的进步了。到目前为止，在众多优秀的 CSS 预处理器语
言中就属 Sass、LESS 和 Stylus 最优秀，讨论的也多，对比的也多。就拿我目前学习的Sass来做个记录吧。
什么是Sass？
Sass 官网上是这样描述 Sass 的：
Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。Sass 前世今生：
Sass 是最早的 CSS 预处理语言，有比 LESS 更为强大的功能，不过其一开始的缩进式语法（Sass 老版本语法，后面课程会详细介绍 ）并不能被大众接受，不过由于其强大的功能和 Ruby on Rails 的大力推动，还是有很多开发者选择了 Sass。Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。
为什么早期不如 LESS 普及？
虽然缩进式风格可以有效缩减代码量，强制规范编码风格，但它一方面并不为大多数程序员接受，另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早，但远不如 LESS 普及的原因。
sass和scss有什么区别？
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
- 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
先来看一个示例：
1. Sass 语法
$font-stack: Helvetica, sans-serif //定义变量$primary-color: #333 //定义变量body font: 100% $font-stack color: $primary-color2. 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;}sass与scss和纯css写法差别
Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。如：
Sass写法：
body color: #fff background: #f36而在 CSS 我们是这样书写：
body{ color:#fff; background:#f36;}SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。
sass的安装（windows版）
- 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。
- Ruby 安装文件下载好后，按步骤进行安装 Ruby。在安装过程中，个人建议将其安装在 C 盘下，在安装过程中选择第二个选项：Add Ruby excutables to your PATH（不选中，就会出现编译时找不到Ruby环境的情况）。
- Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板。此时Ruby已安装好了。
- 安装好 Ruby 之后，接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。但这几种方法都是非常的简单，只需要在你的命令终端输入一行命令即可。
在打开的Ruby 的 Command 控制面板命令终端，输入下面的命令：
gem install sass我们要如何确认自己是否安装 Sass 成功了呢？其实很简单，只需要通过下面的命令即可：
sass -v如果在你的命令终端能看到类似这样的信息就表示你的电脑安装 Sass 已成功。也就是说可以正常的使用 Sass 了。
更新 Sass
维护 Sass 的团队会不断的为 Sass 添加新的功能，那么如何确保自己已安装的 Sass 也具有这些新的功能特性呢？不会是卸载了重新安装吧（虽然安装也就是一个命令的事情）？ 其实不需要这么麻烦，只需要在命令终端执行：
gem update sass这个时候你看到类似下面这样的信息，表示你的 Sass 已更新到最新版本。
卸载删除Sass
在常期使用的时候难免会碰到无法解决的问题，有时候可能需要卸载 Sass，然后再重新安装 Sass。那么怎么卸载 Sass 呢？
其实他也就是一句命令的事情：
gem uninstall sass这样就卸载了 Sass ，但这行命令基本上是使用不上。
Sass 语法格式
这里说的 Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。来看一个 Sass 语法格式的简单示例。假设我们有一段这样的 CSS 代码：
【sass】混合宏的不足
混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如：
@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px;}.box { @include border-radius; margin-bottom: 5px;}.btn { @include border-radius;}示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS：
.box { -webkit-border-radius: 3px; border-radius: 3px; margin-bottom: 5px;}.btn { -webkit-border-radius: 3px; border-radius: 3px;}上例明显可以看出，Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。
【sass】扩展/继承
继承对于了解 CSS 的同学来说一点都不陌生，先来看一张图：
图中代码显示“.col-sub .block li,.col-extra .block li” 继承了 “.item-list ul li”选择器的 “padding : 0;” 和 “ul li” 选择器中的 “list-style : none outside none;”以及 * 选择器中的 “box-sizing:inherit;”。
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。如下所示：
//SCSS.btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { background-color: #f36; color: #fff; @extend .btn;}.btn-second { background-color: orange; color: #fff; @extend .btn;}编译出来之后：
//CSS.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}.btn-primary { background-color: #f36; color: #fff;}.btn-second { background-clor: orange; color: #fff;}从示例代码可以看出，在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器：
.btn, .btn-primary, .btn-second { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px;}【sass】占位符——%placeholder
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。来看一个演示：
%mt5 { margin-top: 5px;}%pt5{ padding-top: 5px;}这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：
//SCSS%mt5 { margin-top: 5px;}%pt5{ padding-top: 5px;}.btn { @extend %mt5; @extend %pt5;}.block { @extend %mt5; span { @extend %pt5; }}编译出来的CSS
//CSS.btn, .block { margin-top: 5px;}.btn, .block span { padding-top: 5px;}从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。
【sass】混合宏 vs 继承 vs 占位符
初学者都常常纠结于这个问题“什么时候用混合宏，什么时候用继承，什么时候使用占位符？”其实他们各有各的优点与缺点，先来看看他们使用效果：
a) Sass 中的混合宏使用
@mixin mt($var){ margin-top: $var;}.block{ @include mt(5px); span{ display: block; @include mt(5px); }}.header{ color: orange; @include mt(5px); span{ display: block; @include mt(5px); }}编译出来的 CSS 见右侧结果窗口。
总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。
个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
b) Sass 中继承
同样的，将上面代码中的混合宏，使用类名来表示，然后通过继承来调用：
.mt{ margin-top: 5px;}.block{ @extend .mt; span{ display: block; @extend .mt; }}.header{ color: #orange; @extend .mt; span{ display: block; @extend .mt; }}总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。
个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
c) 占位符
最后来看占位符，将上面代码中的基类 .mt 换成 Sass 的占位符格式：
%mt{ margin-top: 5px;}%block{ display: block;}.block{ @extend %mt; span{ @extend %block; @extend %mt; }}.header{ color: orange; @extend %mt; span{ @extend %block; @extend %mt; }}总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”
来看一个表格：
【sass】插值#{}
使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子：
$properties: (margin, padding);@mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; }}.login-box { @include set-value(top, 14px);}它可以让变量和属性工作的很完美，上面的代码编译成 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);编译出来的 CSS:
.header-text-small { font-size: 12px; }.header-text-medium { font-size: 20px; }.header-text-big { font-size: 40px; }一旦你发现这一点，你就会想到超级酷的 mixins，用来生成代码或者生成另一个 mixins。然而，这并不完全是可能的。第一个限制，这可能会很删除用于 Sass 变量的插值。
$margin-big: 40px;$margin-medium: 20px;$margin-small: 12px;@mixin set-value($size) { margin-top: $margin-#{$size};}.login-box { @include set-value(big);}上面的 Sass 代码编译出来，你会得到下面的信息：
error style.scss (Line 5: Undefined variable: “$margin-".)
所以，#{}语法并不是随处可用，你也不能在 mixin 中调用：
@mixin updated-status { margin-top: 20px; background: #F00;}$flag: "status";.navigation { @include updated-#{$flag};}上面的代码在编译成 CSS 时同样会报错：
error style.scss (Line 7: Invalid CSS after "...nclude updated-": expected "}", was "#{$flag};")
幸运的是，可以使用 @extend 中使用插值。例如：
%updated-status { margin-top: 20px; background: #F00;}.selected-status { font-weight: bold;}$flag: "status";.navigation { @extend %updated-#{$flag}; @extend .selected-#{$flag};}上面的 Sass 代码是可以运行的，因为他给了我们力量，可以动态的插入 .class 和 %placeholder。当然他们不能接受像 mixin 这样的参数，上面的代码编译出来的 CSS:
.navigation { margin-top: 20px; background: #F00;}.selected-status, .navigation { font-weight: bold;}在 Sass 的社区正在积极讨论插值的局限性，谁又知道呢，也许我们很快将能够使用这些技术也说不定呢。
【sass】注释
注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式，我暂且将其命名为：
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”
两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：
//定义一个占位符%mt5 { margin-top: 5px;}/*调用一个占位符*/.box { @extend %mt5;}编译出来的CSS
.box { margin-top: 5px;}/*调用一个占位符*/【sass】数据类型
Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型：
- 数字: 如，1、 2、 13、 10px；
- 字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
- 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
- 布尔型：如，true、 false；
- 空值：如，null；
- 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。
SassScript 也支持其他 CSS 属性值（property value），比如 Unicode 范围，或 !important 声明。然而，Sass 不会特殊对待这些属性值，一律视为无引号字符串 (unquotedstrings)。
【sass】字符串
SassScript 支持 CSS 的两种字符串类型：
- 有引号字符串 (quoted strings)，如 "Lucida Grande" 、'http://sass-lang.com'；
- 无引号字符串 (unquoted strings)，如 sans-serifbold。
在编译 CSS 文件时不会改变其类型。只有一种情况例外，使用 #{ }插值语句 (interpolation) 时，有引号字符串将被编译为无引号字符串，这样方便了在混合指令 (mixin) 中引用选择器名。
@mixin firefox-message($selector) { body.firefox #{$selector}:before { content: "Hi, Firefox users!"; }}@include firefox-message(".header");编译为：
body.firefox .header:before { content: "Hi, Firefox users!"; }需要注意的是：当 deprecated = property syntax 时 （暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号。
【sass】值列表
所谓值列表 (lists) 是指 Sass 如何处理 CSS 中：
margin: 10px 15px 0 0或者：
font-face: Helvetica, Arial, sans-serif像上面这样通过空格或者逗号分隔的一系列的值。
事实上，独立的值也被视为值列表——只包含一个值的值列表。
Sass列表函数（Sass list functions）赋予了值列表更多功能：
- nth函数（nth function） 可以直接访问值列表中的某一项；
- join函数（join function） 可以将多个值列表连结在一起；
- append函数（append function） 可以在值列表中添加值；
- @each规则（@each rule） 则能够给值列表中的每个项目添加样式。
值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式，要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时，Sass 不会添加任何圆括号，因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个值列表的值列表，而后者是包含四个值的值列表。
可以用 () 表示空的列表，这样不可以直接编译成 CSS，比如编译 font-family: ()时，Sass 将会报错。如果值列表中包含空的值列表或空值，编译时将清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。
sass运算
【sass运算】加法
程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算，在接下来的章节中，主要和大家一起探讨有关于 Sass 中的数学运算。
加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：
.box { width: 20px + 8in;}编译出来的 CSS:
.box { width: 788px;}但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：
.box { width: 20px + 1em;}编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”
【sass运算】减法
Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：
$full-width: 960px;$sidebar-width: 200px;.content { width: $full-width - $sidebar-width;}编译出来的 CSS 如下：
.content { width: 760px;}同样的，运算时碰到不同类型的单位时，编译也会报错，如：
$full-width: 960px;.content { width: $full-width - 1em;}编译的时候，编译器报“Incompatible units: 'em' and ‘px’.”错误。
【sass运算】乘法
Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：
.box { width:10px * 2px; }编译的时候报“20px*px isn't a valid CSS value.”错误信息。
如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：
.box { width: 10px * 2;}编译出来的 CSS:
.box { width: 20px;}Sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。如下面的示例：
.box { width: 20px * 2em;}编译时报“40em*px isn't a valid CSS value.”错误信息。
【sass运算】除法
Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。一起先来看一个简单的示例：
.box { width: 100px / 2; }编译出来的 CSS 如下：
.box { width: 100px / 2;}这样的结果对于大家来说没有任何意义。要修正这个问题，只需要给运算的外面添加一个小括号( )即可：
.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;}综合上述，”/ ”符号被当作除法运算符时有以下几种情况：
• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
• 如果数值被圆括号包围。
• 如果数值是另一个数学表达式的一部分。
如下所示：
//SCSSp { font: 10px/8px; // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算}编译出来的CSS
p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; }Sass 的除法运算还有一个情况。我们先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：
.box { width: (1000px / 100px);}编译出来的CSS如下：
.box { width: 10;}【sass运算】变量计算
在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算，其实在前面章节的示例中也或多或少的向大家展示了。在 Sass 中使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。一起来看一个简单的示例：
$content-width: 720px;$sidebar-width: 220px;$gutter: 20px;.container { width: $content-width + $sidebar-width + $gutter; margin: 0 auto;}编译出来的CSS
.container { width: 960px; margin: 0 auto;}【sass运算】数字运算
在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，一起来看个示例。
.box { width: ((220px + 720px) - 11 * 20 ) / 12 ; }编译出来的 CSS:
.box { width: 60px;}上面这个简单示例是一个典型的计算 Grid 单列列宽的运算。
【sass运算】颜色运算
所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：
p { color: #010203 + #040506;}计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：
如此编译出来的 CSS 为：
p { color: #050709;}算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如：
p { color: #010203 * 2;}计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：
p { color: #020406;}【sass运算】字符运算
在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如：
$content: "Hello" + "" + "Sass!";.box:before { content: " #{$content} ";}编译出来的CSS：
.box:before { content: " Hello Sass! ";}除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：
div { cursor: e + -resize;}编译出来的CSS:
div { cursor: e-resize;}注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：
p:before { content: "Foo " + Bar; font-family: sans- + "serif";}编译出来的 CSS：
p:before { content: "Foo Bar"; font-family: sans-serif; }- CSS预处理器——SASS学习笔记(一)
- CSS预处理器——SASS学习笔记(二)
- css预处理器—sass
- css预处理器--sass
- CSS预处理器--Sass
- SASS：CSS预处理器
- css预处理器之sass
- 前端CSS预处理器Sass
- CSS预处理器 Less & Sass
- 前端CSS预处理器Sass
- CSS预处理器SASS入门
- CSS预处理器——Sass、LESS和Stylus区别及联系
- CSS预处理器SASS | LESS等简介
- "sass" CSS预处理器的安装方法
- CSS预处理器语言：Sass、LESS、Stylus
- sass less stylus css预处理器
- CSS预处理语言：Sass
- css预处理器（less学习笔记）
- linux的挂载重启后就消失
- java动态代理的总结
- Eclipse运行项目提示“类路径引用的项目不存在”
- 加班多年，你敢说没遇过这种破事我也是服！
- mysql错误： Cannot convert value ’0000-00-00 00:00:00′ from column 10 to TIMESTAMP
- CSS预处理器——SASS学习笔记(一)
- 4.7 Swift中swift中的switch 语句
- wkwebview删除cookes和缓存
- github项目笔记
- 2个dataGridView分别导出或将数据导出到软件目录下的TXT
- 怎样在Github上托管开源代码库
- A窗体点按钮，弹出B窗体，B窗体修改了内容后，将数据传递回来到A窗体
- html5解决大文件断点续传
- Android标准目录的路径
