7.基本运算
一、数字运算
在Sass中，共有4种数字运算方式：加、减、乘、除。对于这4种运算方式，我们需要注意以下几点：
（1）在Sass加法中，数值可以带单位，但是需要运算单位相同，如果不相同则编译不通过；
（2）在Sass减法中，数值可以带单位，但是需要运算单位相同，如果不相同则编译不通过；
（3）在Sass乘法中，只能有一个数值带单位，另外一个数值只能是不带单位的数字。如果两个都是带单位的数字，则Sass会报错而编译不通过；
（4）在Sass除法中，由于“/”在CSS中已经作为一种符号来使用了，所以我们需要在外面添加一个“小括号()”；
在实际开发中，不管是加法、减法，还是乘法、除法运算，我们都建议在外面加上小括号。这种书写方式，能够使得代码一目了然，也方便维护。希望小伙伴们也规范一下自己的书写方式。
二、字符运算
在Sass中，我们可以使用“ ”（加号）来实现字符串的拼接。其中，结果字符串是否有引号，取决于左边字符串是否有引号。
举例：
代码语言：javascript复制div::before
{
content: "Welcome to " lvyestudy;
font:sans- "serif";
}编译出来的CSS代码如下：
代码语言：javascript复制
div::before
{
content: "Welcome to lvyestudy";
font: sans-serif;
}三、颜色运算
在Sass中，我们也是可以对颜色值进行运算的。颜色运算支持加、减、乘、除，并且是分段进行计算的。也就是说，红、绿、蓝这3个部分的颜色是单独进行计算的。
此外，如果颜色值不是十六进制颜色值（如#010203），而是RGB或者HSL的话，我们都是将RGB或HSL先转换为十六进制颜色值，然后再进行加、减、乘、除运算的。
举例：
代码语言：javascript复制div
{
color: (#010203 #040506);
}编译出来的CSS代码如下：
代码语言：javascript复制div
{
color: #050709;
}8.代码重用
在实际开发中，我们经常会碰到好些不同地方都用到相同的CSS样式的情况。如果相同的CSS样式只有一个CSS属性，此时只需要使用Sass变量实现就可以满足了。如果相同的CSS样式有多个CSS属性，这个时候我们就希望把“相同的CSS样式”当做整块来处理。
在Sass中，为我们提供了3种方式来处理经常被多个地方使用的相同的CSS代码块：
（1）继承“@extend”；
（2）占位符“%placeholder”；
（3）混合宏“@mixin”；
这几种实现代码重用的方式，在Sass开发中非常非常重要，因为使用这些可以极大地提高我们的开发效率，所以这一章小伙伴们要重点学习。接下来我们一一给大家详细介绍。
一、Sass继承
CSS具有2大特性：继承性和层叠性。CSS的继承性，指的是子元素继承了父元素的某些样式属性，例如在父元素中定义字体颜色（color），子元素会继承父元素的字体颜色。对于CSS这些，之后再说。看看我有没有时间，吧CSS进阶写一下
在Sass中，我们可以使用“@extend”来继承一个样式块，从而实现代码的重用。
举例1：
代码语言：javascript复制.spriteAll
{
bakckground:url(images/sprite.png) no-repeat;
}
.sprite-1
{
@extend .spriteAll;
background-position:0 -30px;
}
.sprite-2
{
@extend .spriteAll;
background-position:0 -60px;
}编译出来的CSS代码如下：
代码语言：javascript复制
.spriteAll, .sprite-1, .sprite-2
{
bakckground: url(images/sprite.png) no-repeat;
}
.sprite-1
{
background-position: 0 -30px;
}
.sprite-2
{
background-position: 0 -60px;
}分析：
在这个例子中，我们定义了一个“.spriteAll”类用来存放公共样式，然后在“.sprite-1”和“.sprite-2”中使用@extend来继承“.spriteAll”类
