sass基础篇

scss的语法非常简单:

$color: red;

div{

color: $color;

}

这就是一个简单的scss代码。

但是，使用 Sass 进行开发，那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢？显然是不行的，因为浏览器只能解析css文件，所以在使用的时候需要对scss文件进行编译。当然编译方法有很多，可以使用sass命令，也可以使用webpack，fis3等一些代码打包工具。

Tips:相对于scss，sass语法比较严格而且语法不太容易被前端开发者所接受，所以在后面都以scss来讲解。

sass命令编译

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

多文件编译

scss <要编译的Scss文件路径>/ :<要输出CSS文件路径>/

这样会把文件夹下所有的.scss 文件 全部编译成css

 

缺点及解决方法：

在实际编译过程中，你会发现上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令。如此操作太麻烦，其实还有一种方法，就是在编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

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

 

 

不同风格的输出方法：

1. 嵌套输出方式 nested
2. 展开输出方式 expanded   最直观的表达方式
3. 紧凑输出方式 compact  在同一行显示
4. 压缩输出方式 compressed 压缩式

使用方法： sass --watch test.scss:test.css --style nested

直接在命令行后面加上要输出的类型

 

Sass 的调试

（单击可放大）

Sass 调试一直以来都是一件头痛的事情，使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件，能找到对应的行数。值得庆幸的是，现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap”  参数：

sass --watch --scss --sourcemap style.scss:style.css

在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以：

sass --watch style.scss:style.css

在命令终端，你将看到一个信息：

>>> Change detected to: style.scss

  write style.css

  write style.css.map

这时你就可以像前面展示的 gif 图一样，调试你的 Sass 代码.

 

 

scss的使用

scss 声明变量

eg: $color: red ；

div{

color: $color;

}

 

 

普通变量与默认变量

普通变量

定义之后可以在全局范围内使用。

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

编译后的css代码：

body{ font-size:12px; }

 

默认变量

scss 的默认变量仅需要在值后面加上 !default 即可。

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

编译后的css代码：

body{ line-height:1.5; }

 

scss 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

 

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

编译后的css代码：

body{ line-height:2; }

 

可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。

 

 

scss局部变量和全局变量

scss 中变量的作用域在过去几年已经发生了一些改变。直到最近，规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量，从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。

全局变量与局部变量

先来看一下代码例子：

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

css 的结果：

//CSS .block { color: orange; } em a { color: red; } span { color: orange; }

上面的示例演示可以得知，在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，如下代码：

$color:orange !default;

$color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。

除此之外，Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。我们之后将会详细介绍这两个参数的使用以及其功能。

全局变量的影子

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

上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。

//SCSS $color: orange !default;//定义全局变量 .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量（全局变量 $color 的影子） a { color: $color;//调用局部变量 } }

什么时候声明变量？

我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量：

1. 该值至少重复出现了两次；
2. 该值至少可能会被更新一次；
3. 该值所有的表现都与变量有关（非巧合）。

基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。

温馨小提示：您在学习 sass 时，除了在我们网页上可以做练习，还有一个便利在线编辑器网址如下：

http://sassmeister.com/

 

scss嵌套-选择器嵌套

scss 中还提供了选择器嵌套功能，但这也并不意味着你在 scss 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。

选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种：

• 选择器嵌套
• 属性嵌套
• 伪类嵌套

1、选择器嵌套

假设我们有一段这样的结构：

<header> <nav> <a href=“##”>Home</a> <a href=“##”>About</a> <a href=“##”>Blog</a> </nav> <header>

想选中 header 中的 a 标签，在写 CSS 会这样写：

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

那么在 scss 中，就可以使用选择器的嵌套来实现：

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

 

 

 

scss嵌套-属性嵌套

scss 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：

.box { border-top: 1px solid red; border-bottom: 1px solid green; }

在 scss 中我们可以这样写：

.box { border: { top: 1px solid red; bottom: 1px solid green; } }

 

 

scss嵌套-伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧：

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

避免选择器嵌套：

• 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
• 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

为了防止此类情况，我们应该尽可能避免选择器嵌套。然而，显然只有少数情况适应这一措施。

 

scss混合宏-声明混合宏

如果你的整个网站中有几处小样式类似，比如颜色，字体等，在scss 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 scss 中的混合宏就会变得非常有意义。在这一节中，主要向大家介绍 scss 的混合宏。

1、声明混合宏

不带参数混合宏：

在 scss 中，使用“@mixin”来声明一个混合宏。如：

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

其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

带参数混合宏：

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

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

复杂的混合宏：

上面是一个简单的定义混合宏的方法，当然， scss 中的混合宏还提供更为复杂的，你可以在大括号里面写上带有逻辑关系，帮助更好的做你想做的事情,如：

@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 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

 

 

scss混合宏-调用混合宏

在 scss 中通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。例如在你的样式中定义了一个圆角的混合宏“border-radius”:

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

 

scss混合宏的参数--传一个不带值的参数

scss 的混合宏有一个强大的功能，可以传参，那么在 scss 中传参主要有以下几种情形：

A) 传一个不带值的参数

在混合宏中，可以传一个不带任何值的参数，比如：

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

在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

在调用的时候可以给这个混合宏传一个参数值：

.box { @include border-radius(3px); }

这里表示给混合宏传递了一个“border-radius”的值为“3px”。

编译出来的 CSS:

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

 

scss混合宏的参数--传一个带值的参数

在scss 的混合宏中，还可以给混合宏的参数传一个默认值，例如：

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

在混合宏“border-radius”传了一个参数“$radius”，而且给这个参数赋予了一个默认值“3px”。

在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”:

.btn { @include border-radius; }

编译出来的 CSS:

.btn { -webkit-border-radius: 3px; border-radius: 3px; }

但有的时候，页面中有些元素的圆角值不一样，那么可以随机给混合宏传值，如：

.box { @include border-radius(50%); }

编译出来的 CSS:

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

 

 

scss混合宏的参数--传多个参数

scss 混合宏除了能传一个参数之外，还可以传多个参数，如：

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

 

 

scss混合宏的参数--混合宏的不足

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

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

 

上例明显可以看出，scss 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是scss 的混合宏最不足之处。

 

 

scss扩展/继承

继承对于了解 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;”。

在scss 中也具有继承一说，也是继承类中的样式代码块。在 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; }

 

 

scss占位符 %placeholder

scss 中的占位符 %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 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。

 

 

scss混合宏 VS 继承 VS 占位符

初学者都常常纠结于这个问题“什么时候用混合宏，什么时候用继承，什么时候使用占位符？”其实他们各有各的优点与缺点，先来看看他们使用效果：

a) scss 中的混合宏使用

编译出来的 CSS 见右侧结果窗口。

总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。

个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

b) scss 中继承

同样的，将上面代码中的混合宏，使用类名来表示，然后通过继承来调用：

总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。

个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用scss 的继承。

c) 占位符

最后来看占位符，将上面代码中的基类 .mt 换成 scss 的占位符格式：

总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”

来看一个表格：

 

 

scss插值#{}

使用 CSS 预处理器语言的一个主要原因是想使用 scss 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。scss 中的插值(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; }

这是 scss 插值中一个简单的实例。当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用：

@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。然而，这并不完全是可能的。第一个限制，这可能会很删除用于 scss 变量的插值。

$margin-big: 40px; $margin-medium: 20px; $margin-small: 12px; @mixin set-value($size) { margin-top: $margin-#{$size}; } .login-box { @include set-value(big); }

上面的 scss 代码编译出来，你会得到下面的信息：

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

 

上面的 scss 代码是可以运行的，因为他给了我们力量，可以动态的插入 .class 和 %placeholder。当然他们不能接受像 mixin 这样的参数，上面的代码编译出来的 CSS:

.navigation { margin-top: 20px; background: #F00; } .selected-status, .navigation { font-weight: bold; }

 

scss注释

注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。在 scss 中注释有两种方式，我暂且将其命名为：

1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”

2、类似 JavaScript 的注释方式，使用“//”

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：

//定义一个占位符 %mt5 { margin-top: 5px; } /*调用一个占位符*/ .box { @extend %mt5; }

编译出来的CSS

.box { margin-top: 5px; } /*调用一个占位符*/

 

 

 

scss数据类型

 scss 和 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 不会特殊对待这些属性值，一律视为无引号字符串 (unquoted strings)。

 

 

scss字符串

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 时 （暂时不理解是怎样的情况），所有的字符串都将被编译为无引号字符串，不论是否使用了引号。

 

 

scss值列表

所谓值列表 (lists) 是指 scss 如何处理 CSS 中： 

margin: 10px 15px 0 0

或者： 

font-face: Helvetica, Arial, sans-serif

像上面这样通过空格或者逗号分隔的一系列的值。

事实上，独立的值也被视为值列表——只包含一个值的值列表。

scss列表函数（scss list functions）赋予了值列表更多功能：

1. nth函数（nth function） 可以直接访问值列表中的某一项；
2. join函数（join function） 可以将多个值列表连结在一起；
3. append函数（append function） 可以在值列表中添加值；
4. @each规则（@each rule） 则能够给值列表中的每个项目添加样式。

值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式，要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时，scss 不会添加任何圆括号，因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的，但是它们在 scss 文件中却有不同的意义，前者是包含两个值列表的值列表，而后者是包含四个值的值列表。

可以用 () 表示空的列表，这样不可以直接编译成 CSS，比如编译 font-family: ()时，scss 将会报错。如果值列表中包含空的值列表或空值，编译时将清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。

$linkColor: #08c #333 !default;

$bdcolor:#c30 #f60;

a{

color:nth($linkColor,1);

 

&:hover{

color:nth($linkColor,2);

border-style:dashed;

border-width:2px;

border-color:join($linkColor,$bdcolor);

}

}

编译后：

a {

color: #08c;

}

a:hover {

color: #333;

border-style: dashed;

border-width: 2px;

border-color: #08c #333 #c30 #f60;

}

 

 

scss运算-加法

程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在scss 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算，在接下来的章节中，主要和大家一起探讨有关于 scss 中的数学运算。

（一）、加法

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

.box { width: 20px + 8in; }

编译出来的 CSS:

.box { width: 788px; }

但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：

.box { width: 20px + 1em; }

编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”

 

 

 

scss运算-减法

scss 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：

$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’.”错误。

 

 

scss运算-乘法

scss 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 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.”错误信息。

 

scss运算-除法

scss 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 scss 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。一起先来看一个简单的示例：

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

另外，在 scss 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示：

$width: 1000px; $nums: 10; .item { width: $width / 10; } .list { width: $width / $nums; }

编译出来的CSS:

.item { width: 100px; } .list { width: 100px; }

综合上述，”/  ”符号被当作除法运算符时有以下几种情况：

•    如果数值或它的任意部分是存储在一个变量中或是函数的返回值。

•    如果数值被圆括号包围。

•    如果数值是另一个数学表达式的一部分。

如下所示：

//SCSS p { 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; }

 

scss 的除法运算还有一个情况。我们先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：

.box { width: (1000px / 100px); }

编译出来的CSS如下：

.box { width: 10; }

 

scss运算-变量计算

在 scss 中除了可以使用数值进行运算之外，还可以使用变量进行计算，其实在前面章节的示例中也或多或少的向大家展示了。在 scss 中使用变量进行计算，这使得 scss 的数学运算功能变得更加实用。一起来看一个简单的示例：

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

 

scss运算-数字运算

在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，一起来看个示例。

.box { width: ((220px + 720px) - 11 * 20 ) / 12 ; }

编译出来的 CSS:

.box { width: 60px; }

 

scss运算-颜色运算

所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：

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

 

scss运算-字符运算

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

 

 

本文摘自慕课网课程