sass 语法
sass语法是css的一种扩展
使用
1.需要安装软件
rubyinstaller-2.2.2-x64
2.定义css文件
3.页面上引入css
< link href=“sass/main.css” rel=“stylesheet” >
语法
1.变量
定义变量
$ size:20px
div{font-size:$ size}
做运算
$ size:20px
div{font-size:$ size*2}
2.嵌套
&找上一层标签
.d1{
border:1px solid red;
ul{
list-style:none;
li{
float:left;
a{color:red;
&:hover:blue;
}
}
}
}
3.继承
@extend关键字继承其他选择器的样式
.d1{ width: 100px;height: 100px;border: 1px solid #000000;}
.d3{@extend .d1;color: red;}
4.混合
用@mixin定义函数 用@include进行引用
@mixin a{ width: 100px;height: 100px; border: 1px solid$color;}
.d1{@include a(“blue”)}
5.判断
@if关键字判断样式
$w:200px
.d1{
@if $ w==200{color:red}
@if $ w>200{color:green}
@else${color:blue}
}
6.循环
@for定义循环
$i:1
@for KaTeX parse error: Expected '}', got '#' at position 35: …{//.d1.d2.d3 .d#̲{i} { font-size:5px * $i }}
//.d1{5px}.d2{10px}.d3{15px}
phonegap插件
用来让安卓系统支持前端代码，把页面运行在手机里，但是只支持安卓系统，不支持ios，测试苹果系统
，可以把代码部署在电脑服务器上，在苹果手机里访问服务器地址。
安卓使用java语言编写，phonegap插 件可以让安卓识别html和css语言，需要配置到安卓环境里安装步骤1.安装jdk
1.这是java运行环境，没有jdk不能编写java代码
安装jdk jre安卓，请把三个文件夹放在一个文件夹里安装，如果安卓的安装步骤没有也没关系不要安装到中文文件夹里
2.配置安卓环境
我发的安卓文件，不用配置环境变量，直接解压在盘符里，但是不能放在中文文件夹下
eclipse java的编写 工具
sdk安卓文件
SDK Manager 升级安卓系统
3.启动eclipse工具
eclipse文件夹 下找eclipse，如果报错，请右键以管理员身份运行
选择一下项目所放置的盘符，默认会显示c盘
4.创建安卓项目
在项目下配置phonegap插件，运行页面进行查看
配置方式请参照“android phonegap_ 开发环境配置”word文档进行执行

02 【Sass语法介绍-变量】

Sass语法介绍

sass有两种语法格式Sass(早期的缩进格式：Indented Sass)和SCSS(Sassy CSS)

目前最常用的是SCSS，任何css文件将后缀改为scss，都可以直接使用Sassy CSS语法编写。

所有有效的 CSS 也同样都是有效的 SCSS。

Sass语法介绍-变量

1.前言

Sass 为 CSS 引入了变量这一功能，在实际项目中使用最普遍的除了 Sass 嵌套 就是 Sass 变量了，你可以把 CSS 的某个属性值定义为变量，然后在项目中任何需要它的地方来使用它。本节主要讲解 Sass 变量的主要语法：变量的声明、引用、作用域等，同时还会讲解在实际项目中一般是如何来维护 Sass 变量的。

2.什么是 Sass 变量 ?

Sass 简介中提到 Sass是 CSS的扩展语言，变量是 CSS的扩展功能。
举个例子，假如我们项目中很多地方要设置一个字体颜色为红色，那么我们完全可以把这个颜色抽出来作为一个变量，然后在需要设置字体颜色的地方引用这个变量。这样有一个好处就是，假如产品大大说要修改所有字体颜色的时候，我们就不需要每处都去修改了，直接更改变量的值就 OK 了，我们用 Sass 代码来直观的感受下：

$variable: red;

.title {
  color: $variable;
}
h1 {
  color: $variable;
}

可以看到上面的代码，我们定义了 $variable 这个变量，然后在多个元素的样式中使用它，那么变量的值都可以是什么呢？这个一定要记住，变量的值可以是：

• 字符串
• 数字
• 颜色值
• 布尔值
• 列表
• Null 值

下面我们将详细的讲解 Sass 变量的语法。

3.使用变量

sass使用$符号来标识变量。

变量的作用就是，让你在整个样式表中保存并重用一些信息或数据。

比如存储颜色(color)、字体集，或任何你想重用的CSS值。

3.1 变量声明

和css属性的声明（property declaration）很像！

如，声明值为 #F90 的变量 $highlight-color，字体集变量：

$highlight-color: #F90;
$font-stack: Helvetica, sans-serif;
 
body {
    font: 100% $font-stack;
    color: $highlight-color;
}

输出结果为：

body {
    font: 100% Helvetica, sans-serif;
    color: #F90;
}

变量有作用域，当变量定义在css规则块内，则该变量只能在此规则块内使用。

3.2 变量引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，就可以使用变量。

css生成时，变量会被它们的值所替代。

$color:#A34554;

.Box {
  width: 300px;
  height: 400px;
  &-left{
    width: 30%;
    color: $color;
  }
}

生成css为：

.Box {
    width: 300px;
    height: 400px;
}
.Box-left{
    width: 30%;
    color: #A34554;
}

声明变量时，变量的值也可以引用其他变量，如下 $highlight-border 变量中使用了 $highlight-color 变量：

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

3.3 变量名中的中横线(hyphen)和下划线(underscore)

sass的变量名可以使用中划线和下划线，用中划线声明的变量可以使用下划线的方式引用，反之亦然。

也就是，变量名中的中横线和下划线没有区别，两者互通。

比如下面的示例，中横线的$link-color，可以通过下划线的$link_color引用。

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

相对，使用中横线更普遍些！

4.变量的作用域

从 Sass 3.4.x 版本开始，Sass 中开始有作用域的概念。和 javascript 中的变量类似，Sass 的变量也是有作用域这个概念的，也有全局作用域和局部作用域之分，我们举个例子来看下：

$main-color: red;
h1 {
  $main-color: green; // 局部变量
  color:$main-color;
}
h2 {
  color:$main-color;
}

我们看到在第一行代码我们声明了一个全局变量 $main-color ，在 h1 的样式中我们又声明了一个和全局变量同名的 $main-color ，在 h1 样式中声明的这个 $main-color 就是局部变量，在 h1 的样式中会引用局部变量而不是全局变量，最终转换为 CSS 的代码如下：

h1 {
  color: green;
}

h2 {
  color: red;
}

4.1 !global 标识符

上面我们讲解了局部变量和全局变量，那么如果我想用局部变量去改变全局变量呢？ Sass 允许使用 !global 标识符来设置局部变量为全局，以此来改变局部变量的作用范围，我们还是用上面的代码，来改变局部变量的作用域为全局：

$main-color: red;
h1 {
  $main-color: green!global;
  color:$main-color;
}
h2 {
  color:$main-color;
}

我们来看下，上面这段转换为 CSS 是这样的：

h1 {
  color: green;
}

h2 {
  color: green;
}

可以看到我们覆盖掉了全局变量 $main-color 的值 red ，不过请你记住，在大型项目中尽量不要使用这种方式去改变全局变量，这可能会影响到其他页面的样式改变！

4.2 !default标识符

一般来说我们反复的声明一个重名变量，那么最后一个声明的变量值会覆盖上面所有的，比如像下面这样：

$main-color: red;
$main-color: green;
h1 {
  color:$main-color;
}

那么最后编译的时候会使用最后一次声明的变量值，也就是 green ，我们看下编译后的代码：

h1 {
  color: green;
}

这样就有一个问题，在实际的项目开发中，假如需要你来写一段公共的 Sass 代码给其他开发者使用，那么如果你的代码中声明了 $main-color 这个变量，那么其他开发者在自己页面也声明了 $main-color 这个变量，并且他是在导入你的这段代码之前声明的，那么他的就会被覆盖掉，这是不行的！

所以这里你需要使用 !default 标识符，顾名思义，就是默认值，如果这个变量被声明并赋值了，那么就使用声明的值，否则就使用默认值。我们还是用上面的例子来看下：

$main-color: red; // 假如这个是其他开发者自己声明的
$main-color: green!default; // 假如这个是你的代码片段声明的
h1 {
  color:$main-color;
}

那么在最后编译的时候会使用 red 这个变量值，如果其他开发者没有声明这个变量，就会使用 green 这个变量值，我们来看下编译后的效果：

h1 {
  color: red;
}

上面我们演示了 !default 标识符的作用，这个在你使用 Sass 开发一个独立的模块的时候，或者使用 Sass 开发一个库来供他人使用的时候，!default 标识符石非常有用的！

5.实战经验

上面我们已经讲解了 Sass 变量的语法和使用，那在企业的实际项目中是怎么应用 Sass 变量的呢？这里以一个使用 webpack 搭建的前端项目为例，一般我们都会抽离出 1～n 个文件来专门声明 Sass 变量(抽离出几个文件视项目大小而定)，如下图所示：

如上图所示，我们一般会在 styles 目录下新建一个 variables.scss 文件来管理声明的全局变量，我们接着来看下在这个文件中是怎么写的：

我们可以看到，在这个文件中不但声明了很多变量，还对其做了注释，这样就很易于后期的管理，尤其是在多人开发的大型项目中，对整个项目的样式提取出一些全局变量是很有必要的！

6.小结

Sass 变量的使用及语法，主要包括：

• 变量的声明
• 变量的引用
• 变量的作用域

我们还是通过下图来回忆一下本节的内容：

在实际的项目中，Sass 变量的使用频率也是非常高的，不亚于 Sass 嵌套，所以一定要好好掌握这一节的内容，变量的应用会让你更加顺手的去管理项目中的样式！

03 【Sass语法介绍-嵌套】

Sass语法介绍-嵌套

1.前言

在企业的实际项目开发中，Sass 的嵌套可以说是非常非常有用的，它可以让你的 CSS 代码易于管理和维护，看起来也比较清晰，这也是 Sass 中很基础的一个知识点，首先掌握这个至关重要！在此章节我们将学习 Sass 嵌套中的嵌套规则、属性嵌套、父选择器和占位符选择器。Sass 嵌套式一个很基础也很简单的语法，关键在于要多多练习使用！

2.什么是嵌套？

在一般编写 CSS 的时候呢，我们一遍一遍的编写相同的选择器去处理深层级的样式，而 Sass 给你一种轻松的方式，你可以在一个样式规则中直接编写另一个样式规则，而不是重复相同的选择器，Sass 将自动组合内外部的选择器。

通俗点说就是：你可以在父选择器的样式中直接编写子元素的样式，同理你可以在一个子元素的样式中再去编写孙元素的样式，可以一层一层的嵌套着去写样式。

一般来说 Sass 中的嵌套应用于以下几种场景：

• 样式的嵌套
• 父选择器
• 占位符选择器
• 属性嵌套

3.样式的嵌套

3.1 基本使用

父选择器里可以嵌套子选择器

如：有以下标签

 <div>
        <ul>
            <li></li>
        </ul>     
    </div>

可以直接这样写：

div{
    height: 100px;
    ul{
        height: 80px;
        li{
           height: 50px;
        }
    }
}

相当于：

div {
  height: 100px;
}
div ul {
  height: 80px;
}
div ul li {
  height: 50px;
}

scss嵌套打开(解析)的规则是：从外层到内层，将嵌套规则块打开，父级的选择器放在子级选择的前面组成一个新的选择器，然后再循环打开内部的嵌套块处理。

写起来是不是方便很多，但使用嵌套的时候同时需要注意：

嵌套规则很有用很方便，但是你很难想象它实际会生成多少 CSS 语句，嵌套的越深，那么编译为 CSS 的语句就越多，同时消耗的资源也会越多，所以开发者尽量不要嵌套特别深的层级！

3.2 嵌套选择器列表 (Selector Lists)

css中，使用,分割的群组选择器可以同时应用样式在多个选择器上，如：

h1, h2 {
  margin: 0;
}

但是，如果想对一个特定的容器元素内的多个元素，使用群组选择器时，就会有很多重复性工作。

.container h1, .container h2, .container h3 { margin-bottom: .8em }

而，sass的嵌套特性，在解开一个内嵌的群组选择器时，会把每一个内嵌选择器正确的结合起来：

.container{
  h1,h2,h3{
    margin-bottom:.8em;
  }
}

sass会组合成 .container h1、 .container h2、.container h3 三者的群组选择器：.container h1, .container h2, .container h3{ xxx }。

同样，群组选择器内的嵌套也会以这种方式解析：

nav, aside {
  a {color: blue}
}

// nav a, aside a {color: blue}

3.3 嵌套组合符选择器 (Selector Combinators)

这三种选择器必须和其他选择器配合使用。

/* 子组合选择器> */
article > section { border: 1px solid #ccc }

/* 相邻组合选择器+  选择 元素后紧跟的指定元素 */
header + p { font-size: 1.1em }

/* 同层全体组合选择器~，选择所有跟在article后的同层article元素 */
article ~ article { border-top: 1px dashed #ccc }

在sass中使用时，可以通过嵌套直接生成正确的结果（位于外层选择器的后面，或内层选择器的前面均可！），而不需要使用&。

article {
  /* 放在 里层选择器前边 */
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  /* 放在 外层选择器后边 */
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

解开后的css为：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

最后一句，nav + & 使用父选择器&后，原本默认的嵌套规则不再适用，而是直接应用 & 组合的结果。

4.父选择器 (Parent Selector)

4.1 基本使用

父选择器是 Sass 中一种特殊的选择器，用于嵌套选择器中，用来引用外部的选择器；通俗的讲就是，当你使用嵌套的时候，可能你会需要使用到嵌套外层的父选择器，比如为一个元素 添加伪类 (hover、active、before、after) 的时候，可以用 & 代表嵌套规则外层的父选择器，我们举个例子来更直观的感受下：

a {
  &:hover {
    color:red;
  }
  &:active {
    color:blue;
  }
  &:before {
    content:'';
  }
  &:after {
    content:'';
  }
  span {
    &:hover {
      color:green;
    }
  }
}

在上面的 Sass 代码中我们编写了几个伪类，在编译的时候 & 将会被替换为嵌套外层的父选择器，有多层嵌套的话将会把父选择器一级一级的传递下去，最终转换为如下的 CSS 代码：

a:hover {
  color: red;
}
a:active {
  color: blue;
}
a:before {
  content: "";
}
a:after {
  content: "";
}
a span:hover {
  color: green;
}

4.2 添加后缀 (Adding Suffixes)

可以使用 & 向外部选择器添加后缀，举个例子看下：

.Box {
  width:100px;
  &-head {
    width:100%;
    &-title {
      color:red;
    }
  }
  &-body {
    width:100%;
  }
  &-footer {
    width:100%;
  }
}

上面这个例子将会转换为如下的 CSS 代码：

.Box {
  width: 100px;
}
.Box-head {
  width: 100%;
}
.Box-head-title {
  color: red;
}
.Box-body {
  width: 100%;
}
.Box-footer {
  width: 100%;
}

5.占位符选择器 (Placeholder Selectors)

在 Sass 中这是一种特殊的选择器，称为 “占位符”；它以 % 开头，必须通过 @extend 指令调用，如果单独使用的话是不会编译到 CSS 中的，后面会讲到 @extend 指令，这里我们先举个简单的例子感受一下：

%placeholder {
  width:100px;
  height:100px;
  color:red;
  &:hover {
    color:blue;
  }
}

.btn {
  @extend %placeholder;
  font-size: 18px;
}

.btn2 {
  @extend %placeholder;
  font-size: 16px;
}

请记住，占位符必须通过 @extend 指令调用才会转换为如下的 CSS 代码：

.btn2, .btn {
  width: 100px;
  height: 100px;
  color: red;
}
.btn2:hover, .btn:hover {
  color: blue;
}

.btn {
  font-size: 18px;
}

.btn2 {
  font-size: 16px;
}

6.属性嵌套

当我们在写 CSS 样式的时候，有些 CSS 属性具有相同的命名空间 (namespace)，比如定义字体样式的属性： font-size ; font-weight ; font-family ; 它们具有相同的命名空间 font 。再比如定义边框样式的属性：border-radius ; border-color ; 它们具有相同的命名空间 border 。当然还有很多其他这种的属性，为了方便管理和避免重复输入，Sass 允许将属性嵌套在命名空间中，同时命名空间也可以具有自己的属性值，我们举例看一下：

把属性名从中划线-的地方断开，在该属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。这样就可以实现属性的嵌套。

.Box {
  border: {
    radius: 5px;
    color:red;
  }
  font: {
   family:'YaHei';
   size:18px;
   weight:600;
  }
  margin: auto {
    bottom: 10px;
    top: 10px;
  };
}

上面这种写法将会被转换为如下的 CSS 代码：

.Box {
  border-radius: 5px;
  border-color: red;
  font-family: "YaHei";
  font-size: 18px;
  font-weight: 600;
  margin: auto;
  margin-bottom: 10px;
  margin-top: 10px;
}

7.小结

本节内容我们主要讲了 Sass 中的嵌套规则，Sass 的嵌套是最基本也是最常用的功能，主要包括如下几个重点：

• 样式的嵌套
  • 基本的样式嵌套
  • 嵌套选择器列表 (Selector Lists)
  • 嵌套组合符选择器 (Selector Combinators)
• 父选择器
  • 添加后缀 (Adding Suffixes)
• 占位符选择器
• 属性嵌套

你来根据下面这张图来复习一下本节的内容：

学会了 Sass 中的嵌套规则，快使用这种方式来改造一下你的 CSS 代码吧～

04 【Sass语法介绍-运算】

Sass语法介绍-运算

1.前言

运算是一种通过已知量可能的组合，获得新的量的行为。Sass 中也为我们提供了各种各样的运算，以便我们更好的处理样式代码。本节我们将学习 Sass 中的数字运算、关系运算、除法运算、颜色运算、字符串运算等等…

2.什么是 Sass 运算？

运算从我们小时候就开始学习了，那在 Sass 中的运算是什么呢？
在我们写样式的时候，很多场景我们是需要用到计算的，而一般我们都是通过 javascript 来计算，CSS3 中也提供了用于运算的函数 calc() ，可能在工作中你使用过这个函数用来计算长度值，能用到的地方也非常有限。而在 Sass 中，扩展出了很多计算方法，使得你不止是可以计算长度值，还能做一些关系运算甚至颜色值的运算等等。这使我们可以把运算应用于更多的场景，来解决更复杂的问题，运算也是 Sass 的基本特性之一，下面我们一起来学习它～

这部分我们将详细讲解 Sass 运算中的：

• 数字运算
• 圆括号
• 除法运算
• 关系运算
• 颜色运算
• 字符串运算
• 布尔运算

3.数字运算

在 Sass 中我们可以对数字类型的值进行加减乘除、取整的运算。在使用运算的过程中，一定要注意不能使用不兼容的单位！（在除法运算中除外），什么意思呢？就是说两个数字相加，你不能一个数字单位是 px 另一个数字单位是 em 。还有一点需要注意的是，如果你使用乘法运算，你只需要为其中的一个数值写上单位就好。数值的运算包括加 (+)、减 (-)、乘 (*)、除 (/)、取模 (%)，乘法只需要有一个数值带单位即可，还有就是除法稍有特殊，后面会单独讲解，下面我来写一段代码看一下 Sass 的数字运算：

p {
  width: 10px + 20px; // 加法运算 (不能使用不兼容的单位)
  height: 500px +50; // 加法运算无单位的数字可以与有单位的一起使用
  max-width: 800px - 100px; // 减法
  max-height: 400px * 2; // 乘法，一个数值带单位即可
  font-size: 30px % 4; // 模运算
}

上面这段代码转换成 CSS 为：

p {
  width: 30px;
  height: 550px;
  max-width: 700px;
  max-height: 800px;
  font-size: 2px;
}

上面我们对 Sass 数值运算的加减乘和模运算做了演示，在 Sass 的数字运算中还有一个需要特别注意的：减法运算符两边需要加空格或者都不加空格，也就是说运算符的两边是对称的；为什么要这样呢？因为减法运算符 - 不仅仅表示减法，对于负数或者一元否定则只需要在其前面加空格就好，也就是说这个标识符还可以表示负数和一元否定；我们举个例子来看下：

p {
  width: 10px - 5px; // 前后都有空格
  width: 10px-5px; // 前后都没有空格
  width:10px -5px; // 只有前面有空格
}

上面这段 Sass 代码将会被编译成如下的 CSS :

p {
  width: 5px;
  width: 5px;
  width: 10px -5px;
}

我们可以看到上面的代码，如果你只在 - 标识符前面加了空格，其两边不对称是不会对数值进行运算的，所以这个在你写代码的过程中一定要注意！

4.除法运算

在讲除法运算之前，一定要先讲一下这个圆括号 () ，圆括号和数学运算中一样，可以来控制运算顺序，这个我们从小就学过，在 Sass 运算中你同样可以使用它来控制运算顺序。

另外就是如果你直使用除法运算符， Sass 会把这当成一个分隔符来处理，但如果你是写在圆括号内就可以被当作除法操作处理了，这也是圆括号在 Sass 中的另外一个作用！

在 CSS 中，你要知道 / 这个标识符并不是代表除法的，一些 CSS 的属性值是支持使用 / 来分隔的，所以在 Sass 中直接使用 / 也是会当成分隔符来处理。但是呢，在以下情况下，Sass 将会把 / 视为除法运算：

• 运算符前后的值存储在变量中或由函数返回
• 运算符和前后的值被圆括号所包裹
• 值是另外一个表达式的一部分

下面我们来举例看一下：

$one: 20px / 2;
$two: 10px;
p {
  width: 200px + 100px / 10; // 值是另外一个运算表达式的一部分
  font-size: $one; // 前后的值存储在变量中或由函数返回
  border-width: $two / 5; // 前后的值存储在变量中或由函数返回
  height: (800px / 2); // 被圆括号所包裹
  max-width: 800px / 2; // 会被当作分隔符来处理，而不是除法运算
}

上面这段 Sass 代码我对使用 / 的情况进行了注释，那么它转换为 CSS 代码是：

p {
  width: 210px;
  font-size: 10px;
  border-width: 2px;
  height: 400px;
  max-width: 800px/2;
}

上面我们看到了 Sass 除法运算的使用，还有一种情况是：假如我在两个变量之间使用 / 标识符，而且我又不想对这两个变量进行除法运算，我只是想对这两个变量的值进行分隔而已，那该怎么办呢？那我们需要使用插值 #{} 来将两个变量包裹住即可，关于插值以后的章节会有讲解，这里我们先看一下如何做：

$one: 20px;
$two: 10;
p {
  width: $one / $two; // 没有使用插值，会对变量值进行除法运算
  height: #{$one} / #{$two}; // 使用插值，不会进行除法运算
}

上面这段使用插值的代码将会转换为如下的 CSS 代码：

p {
  width: 2px;
  height: 20px/10;
}

好了，除法运算讲完了，通过上面的讲解，是不是感觉 Sass 中的除法运算和你脑海中的还是有差别的，还有一个值得注意的是，如果你使用除法运算前后的值都带有相同的单位，那么最后的结果是一个不带单位的数值。在以后你使用除法运算的时候一定要知道在 Sass 中 / 不仅仅代表除法运算，你要用正确的方式来使用它！

5.关系运算

在 Sass 中关系运算来比较数字与数字间的大小，和数字运算一样，关系运算也是不能使用不兼容的单位。关系运算的返回值是布尔值（ true 或 false ），下面我们举个例子看下：

p {
  width: 10px > 5px; // 大于
  width: 10 < 5px; // 小于
  width: 10 >= 5; // 大于等于
  width: 5 <= 5; // 小于等于
  width: 5 == 5; // 等于
}

在上面这个例子中，width 属性的值是没有布尔类型的，我这里这么举例子是为了让大家可以更直观的感受，一般关系运算不会直接应用于样式表中，在 Sass 的函数中应用的比较多。那么上面这段代码转换成 CSS 如下：

p {
  width: true;
  width: false;
  width: true;
  width: true;
  width: true;
}

到这里你应该了解 Sass 中的关系运算了，切记我这里的代码举例只是为了让大家直观的感受，实际情况下并不会这么写。另外在 Sass 中使用相等运算符去做比较的时候，对于数字类型，数字具有相同的值和相同的单位，或者在单位之间转换时它们的值相等，则它们是相等的；对于字符串类型，具有相同内容的未加引号和带引号的字符串被认为是相等的；对于颜色类型，具有相同的红色、绿色、蓝色和alpha值，则颜色是相等的；

6.颜色运算

颜色要怎么运算呢？下面我们举个例子看一下：

body {
  color: #020304 + #050203;
}

在进行颜色值计算的时候是分段计算的，也就是 02 + 05 、03 + 02 、04 + 03，我们知道十六进制颜色值是分为三组的（两个数字一组），分别代表红、绿、蓝，所以在做运算的时候也是按照这个来运算的，那么上面这段代码转换成 CSS 为：

body {
  color: #070507;
}

上面我们讲了颜色运算，但是 Sass 官方给出了明确的说明：不推荐使用颜色运算，而使用颜色函数。什么原因呢？因为 Sass 颜色运算所产生出来的色值可能和你感知的并不一致，所以不推荐使用。如果你使用了的话， Sass 也是支持的，但是会给出警告，强烈建议用户避免使用颜色运算！所以我们的教程里只是做了个演示，你可以了解下，但在实际开发中不推荐使用颜色运算，可以使用颜色函数来实现你的需求！

7.字符串运算

在 Sass 中还允许对字符串进行运算，那对于字符串的运算都有哪些呢？我们先文字描述下：

• 字符串1 + 字符串2：用于连接字符串，结果会返回包含两个字符串的新字符串，如果这其中一个字符串带引号，那么结果也会带引号，否则就不带引号（带引号的字符串要位于 + 号左侧）；
• 字符串1 / 字符串2：返回一个字符串，这里包含字符串 1 和 字符串 2 ，会用 / 分隔；
• 字符串1 - 字符串2：返回一个字符串，这里包含字符串 1 和 字符串 2 ，会用 - 分隔。

下面我们使用代码来举例看下：

p {
  color: r + 'ed'; // 带引号的在加号右侧，返回一个不带引号的字符串
  color: 'r' + ed; // 带引号的在加号左侧，返回一个带引号的字符串
  color:r + ed; // 返回一个不带引号的字符串
  color: r/ed; // 返回一个使用 / 分隔的字符串
  color: r-ed; // 返回一个使用 - 分隔的字符串
}

上面这段代码会转换为如下的 CSS 代码：

p {
  color: red;
  color: "red";
  color: red;
  color: r/ed;
  color: r-ed;
}

同样此处举的例子只是为了方便大家感受，实际应用时可能并不会写这么多 color 属性，字符串运算可以让你很方便的拼接一些字符串来使用。

8.布尔运算

可能与其他的语言不太相同，Sass 中的布尔运算使用的不是运算符而是单词，所以 Sass 中的布尔运算是 not 、and 和 or，not 的意思是取反，and 的意思是两个都为真则返回真反之则返回假，or 的意思是其中一个为真则返回真。看到这你可能懂了，这不就是我们常说的逻辑非、逻辑与和逻辑或嘛，下面我们举个例子来看下：

{
  a: true and true;
  b: true or false; 
  c: true and false;
  d: not false;
}

那么上面这段代码在 Sass 中会转换为：

{
  a: true;
  b: true;
  c: false;
  d: true;
}

布尔运算在实际写样式的时候基本是不会用到的，大家也不会直接在样式中应用，一般布尔运算会应用在 Sass 函数中。

9.实战经验

上面讲了这么多，现在该说到实战了。在实际的项目开发中，可能最最常用的就是加减乘除的运算了，有时可能会用到字符串运算。在你写 CSS 的时候，相信你一定知道 rem 布局，这个简直太常用了。我们在做 rem 布局的时候经常会设置一个根元素的字体大小，然后其余所有的像素可能都根据这个去计算，所以为了便于维护，我把这个根元素的大小抽离出来作为一个变量，然后在每个元素的样式中对这个变量进行运算就可以了，同时呢，我们还可以在动画中运用一些运算，我们一起来看下：

$root: 28;

html {
  font-size: $root+px;
}
p {
  width: (460rem / $root);
  height: (320rem / $root);
}

@keyframes sacle {
  0% {
    width: (800px - $root);
  }
  50% {
    width: 800px - $root * 2;
  }
  100% {
    width: (800px / $root);
  }
}

上面这段代码我们动态的计算了 rem 还有动画中的一些需要的运算。而且这样做的好处是我们可以随时按需更改变量而不需要重新把没处样式都再手动进行更改，这样就让项目的代码更具有扩展性并且更易于维护。它将会被转换为如下的 CSS 代码：

html {
  font-size: 28px;
}

p {
  width: 16.4285714286rem;
  height: 11.4285714286rem;
}

@keyframes sacle {
  0% {
    width: 772px;
  }
  50% {
    width: 744px;
  }
  100% {
    width: 28.5714285714px;
  }
}

在我们的项目中，我们会把 $root 这个变量抽出来到专门维护变量的文件中，然后供项目中所有的页面做运算使用。

10.小结

本节我们讲解了 Sass 中的运算以及运算的应用，我们回忆一下都有哪些运算：

在编写样式的时候加减乘除运算可能会应用的比较多，而字符串运算、布尔值运算、关系运算在 Sass 函数中应用比较多，后面的章节我们会讲解 Sass 函数，而颜色运算官方已经不推荐大家使用了，取而代之的是颜色函数，所以这里我们也尽量不要使用颜色运算了。

在 CSS 中的某些需要你自己计算的值你可以尝试使用 Sass 运算来提升你的开发效率，而且像一些经常使用到的运算完全可以抽离出来统一维护，这样项目会更加易于维护，管理起来也更清晰！Sass 的运算我个人认为是一个能特别提升开发 CSS 效率的扩展功能。

05 【Sass语法介绍-插值】

Sass语法介绍-插值

1.前言

在很多编程器语言中都有插值这个概念，在 Sass 样式表的任何地方几乎都可以使用插值，你可以将这些包裹在 #{} 中来使用，所以记住在 Sass 中使用插值的方式是 #{} ，本节我们一起来看一下插值在 Sass 中的使用场景以及它的语法～

2.什么是插值？

插值也就是可以在特定的区域插入一段表达式或者插入一个变量，以此来实现内容动态变换的需求。

类似 es6 中的插值表达，插值几乎可以用在任何地方。

Sass的插值写法为：#{$variable_name}。

应用于以下的一些场景：

• 在选择器中使用
• 在属性名中使用
• 在属性值中使用
• 在注释中使用

这里我们暂且详细讲解这五种使用场景，在 Sass 指令和在 Sass 函数中也是可以使用的，不过我们会在其对应的章节再去做讲解。下面我们先看下这四种使用场景。

3.在选择器中使用

我们一般在写页面的时候会为 DOM 元素定义一些 class 或 id ，当我们为其写样式的时候会用不同的选择器，那么在选择器中我们可以湿用插值来拼接一些类名等等，我们举个例子来看下：

$name: item;
.ul-#{$name} { // 使用插值
  width: 200px;
  .li-#{$name} { // 使用插值
    width: 100%;
  }
}
.Box-#{$name} { // 使用插值
  height:100px;
  .#{$name} { // 使用插值
    height:100%;
  }
}

可以看到上面的代码，我制定了一个 DOM 层级结构，这种结构也是很常见的，可能很多子元素的类名我们都带有 item ，那么我们就可以把它提取为一个变量然后通过在选择器中应用插值来拼接，这样就很方便我们维护，我们想改子元素类名的时候就不需要逐一的去更改了。上面这段 Sasd 代码转换为 CSS 如下：

.ul-item {
  width: 200px;
}
.ul-item .li-item {
  width: 100%;
}

.Box-item {
  height: 100px;
}
.Box-item .item {
  height: 100%;
}

4.在属性名中使用

除了在选择器中使用，在 Sass 属性名上也是可以使用插值的，也就是说你在写 CSS 属性名的时候你也是可以使用插值来拼接的，我们举个例子来看下：

$name: color;
$position: top;
body {
  background-#{$name}: red;
  border-#{$name}: blue;
  padding-#{$position}: 5px;
  margin-#{$position}: 10px;
  #{$position}: 20px;
}

可以看到上面的代码中我对 CSS 的属性名使用了插值，可以用这种方式来拼接属性名，不过在实际项目中不是很常用，一般都是在指令里这么运用，就像在前面语法示例中举的例子一样。上面这段代码转换成 CSS 为：

body {
  background-color: red;
  border-color: blue;
  padding-top: 5px;
  margin-top: 10px;
  top: 20px;
}

5.在属性值中使用

在属性值中使用插值应该算是比较常用的，插值使你在属性值中不仅可以插入值，还可以插入表达式来计算。除此之外我们在前面的运算章节中，不知道你是否还记得，我们对两个变量使用 / 标识符的时候，如果你不想对这两个变量进行除法运算而是进行分隔，那么就可以使用插值避免运算。

可以说插值在属性值中的应用很广泛也很实用，我们来举例看下：

$one: 20px;
$two: 2;
$family: "UaTy";
div {
  margin: $one / $two; // 除法运算
  margin: #{$one} / #{$two}; // 分隔
  font-family: "MyFo #{$family}"; // 带引号的字符串会转换为不带引号
  width: calc(100% - $one * 2 *$two); // calc函数中内容会被当作字符串处理
  width: calc(100% - #{$one * 2 *$two}); // calc函数中插值的内容会进行运算
}

上面的代码中我对每一行都进行了标注，你要仔细看下，在属性值中你可以用这些方式来使用插值，上面的代码将会被转换为如下的 CSS 代码：

div {
  margin: 10px;
  margin: 20px/2;
  font-family: "MyFo UaTy";
  background-image: url(http://xxx.xxx.xxx/a.jpg);
  width: calc(100% - $one * 2 *$two);
  width: calc(100% - 80px);
}

在属性值中应用插值的场景还蛮多的，你可以这么来使用以提高你的开发效率～

6.在注释中使用

在 Sass 中的注释里也是可以使用插值的，而且如果插值中的内容是一段表达式，将会返回表达式的结果，举个例子来看下：

/* 在注释中使用插值:
 * 2 + 2 = #{2 + 2} */
/* #{9 + 8 * 2} */

我们可以在注释中可以这么使用插值，具体什么时候需要使用看你的需求，你需要知道插值的这种使用方式，上面的代码将会被转换为如下的 CSS 代码：

/* 在注释中使用插值:
 * 2 + 2 = 4 */
/* 25 */

7.实战经验

在我的实际项目中，在函数和指令中使用插值比较多，在后面函数和指令的章节你会看到插值的更多运用，这里我列出在属性值以及选择器中的使用。在我项目中专门维护变量的文件中，定义了如下的几个变量：

$primary-dom-name: "Box"; // 主要父级元素类名
$primary-child-name: "item"; // 主要子元素类名
$public-top: 10px;
$public-bottom: 10px;
$public-margin: 12px;
$public-padding: 14px;

在我项目中的导航样式中我使用了上面的这些变量，代码如下：

.menu-#{$primary-dom-name} {
  width: 200px;
  height: calc(100% - #{40px - $public-bottom});
  background: #cccccc;
  overflow-x:hidden;
  overflow-y: auto;
  padding: $public-padding;
  .li-#{$primary-child-name} {
    width:100%;
    height: 40px;
    margin-bottom: $public-margin;
    text-align:center;
    line-height:40px;
    color: blue;
    .txt-#{$primary-dom-name} {
      border-bottom: 2px solid #999999;
    }
    &:hover {
      background: #999999;
    }
  }
  .logo-#{$primary-dom-name} {
    width: 50px;
  }
}

可以看到，当有一天我们因为业务或者什么其他的需要，我们需要更换类名或者调整间距的时候，我们直接更改变量值就 ok 了，这样维护起来方便的多！不过一般在公司的项目中，这种公共的样式代码维护一般是由架构组或者专门的人来维护的，如果你不负责维护这些，你一定不要轻易去改动这些代码！

8.小结

本节内容我们讲解了 Sass 中的插值以及它的使用场景，一般我们会在如下的场景使用：

• 在函数和指令中使用
• 在选择器中使用
• 在属性名中使用
• 在属性值中使用
• 在注释中使用

我们通过下图来更深地回忆下本节插值的使用场景：

总体来说插值在 Sass 中用的还是比较多的，使用也比较简单不是那么复杂，后面在函数或指令中、在你项目的 Sass 中看见 #{} 要知道这是 Sass 的插值！

关于sass语法学习和sass 语法的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于02 【Sass语法介绍-变量】、03 【Sass语法介绍-嵌套】、04 【Sass语法介绍-运算】、05 【Sass语法介绍-插值】的相关知识，请在本站寻找。