1、符合W3C标准，结构、样式和行为分离，代码结构清晰明了，可维护性好；
2、布局精准，网站版面布局修改简单；
3、页面的加载速度快；
4、节省站点的空间、流量；
5、用只包含结构化内容的HTML代替嵌套的标签，提高搜索引擎对网页的搜索效率；
@ css后代选择器可以写几个？
css后代选择器可以写5个，本来css的后代选择器可以选择多个，但是层级越深，效率越低，所以最好写5个就行
@ sass系统产品介绍？
Sass是CSS的预处理器，它提供了许多便利的写法方法
可以使用变量，常量，嵌套，函数，混合，继承等功能，让css的开发变得更加简单可维护。
直接写出来的sass文件其实就是普通的文本文件，以.sass或.scss作为文件后缀名。
里面可以直接使用css语法以及sass特有的语法特性，完成后通常需要经过编译成合法的css文件以供浏览器使用。
sass的安装
sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。
安装完成后需测试安装有没有成功,运行CMD输入以下命令：
ruby -v
如安装成功会打印
ruby 2.2.2p95 (-04-13 revision 50295) [i386-mingw32]
Ruby自带一个叫做RubyGems的系统，用来安装基于Ruby的软件。大家可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass，你需要输入下面的命令：
安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
gem install sass
gem install compass
在每一个安装过程中，你都会看到如下输出：
Fetching: sass-3.x.x.gem (100%)
Successfully installed sass-3.x.x
Parsing documentation for sass-3.x.x
Installing ri documentation for sass-3.x.x
Done installing documentation for sass after 6 secon
1 gem installed
安装完成之后，你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中：
sass -v
Sass 3.x.x (Selective Steve)
compass -v
Compass 1.x.x (Polaris)
Copyright (c) - Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: /compass
sass的编译
1.命令行编译;
//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass –watch input.scss:output.css
//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass –watch app/sass:public/stylesheets
2.编译工具Koala
3.使用vscode中的Live Sass Compiler插件来实现scss文件的实时编译
变量
Sass 让人们受益的一个重要特性就是它为 CSS 引入了变量。你可以把反复使用的 CSS 属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。
变量的定义是以$符号开头，加上变量名，比如：
$text-warning: red;
$border-radius: 5px;
.tip {
color: $text-warning;
border: 1px solid $border-radius;
}
变量也可以通过加减乘除等运算符号进行计算，比如：
$font-base: 10px;
.article {
font-size: $font-base * 2 – 4px;
border-width: $font-base / 10;
}
变量的注意事项
变量需要提前声明才能使用，因为编译是从上往下进行的，如果在还未声明变量的地方使用，会找不到这个变量。
变量都是全局变量，如果在大括号内部定义的变量则属于局部变量。
嵌套
通常所用到的选择器嵌套是这样的，将新的选择器放到父级选择器当中，并且可以无限多级嵌套。
继承
如果存在两个class，他们有一些不同但又有许多相似之处，以前的做法可能是把所有样式重复声明两次。但是有sass之后更好的做法是创建一个基础的class，然后在第二个class中用@extend继承它，同时还可以添加一些额外的样式，或者对某些样式进行重写。比如大家之前学过bootstrap的按钮的构建思想，是对基础样式进行附加和重写，而现在想要定义自己的样式时就可以很方便地进行这一操作了。首先声明一个标准样式的class，然后继承这个样式，然后设置不同的主题色：
混合
当出现大段大段重用样式代码时，独立的变量就难以应付，这个时候可以通过sass的混合器@mixin 和 @include 实现大段样式的重用。在定义mixin时，需要在前面添加@符号，使用时需要用@include来引用该@mixin：
导入
导入规则可以从外部文件导入mixin混合器等等。在sass中有一个命名惯例，被导入的样式文件名用下划线做前缀。导入的语法是@import “xxx”，这里的xxx不需要带文件后缀和下划线前缀。也就是说导入“_style.sass”或者“_style.scss”的时候，只需要写@import “style”就可以了：
1.为什么要使用SASS？
它是预处理语言，它为CSS提供缩进语法（它自己的语法）。
它允许更有效地编写代码和易于维护。
它是包含CSS的所有功能的CSS的超集，是一个开源的预处理器，以 Ruby 编码。
它提供了比平面CSS好的结构格式的文档样式。
它使用可重复使用的方法，逻辑语句和一些内置函数，如颜色操作，数学和参数列表。
2.列出SASS的一些功能？
它是更稳定，强大，与CSS的版本兼容。
它是超集的CSS和基于JavaScript。
它被称为CSS的语法糖，这意味着它使用户更容易阅读或表达的东西更清楚。
它使用自己的语法并编译为可读的CSS。
你可以在更少的时间内轻松地编写CSS代码。
它是一个开源的预处理器，被解释为CSS。
3.SASS的优点是什么？
它允许在编程结构中编写干净的CSS。
它有助于编写CSS更快。
它是CSS的超集，帮助设计师和开发人员更有效率和快速地工作。
由于Sass兼容所有版本的CSS，大家可以使用任何可用的CSS库。
可以使用嵌套语法和有用的函数，如颜色操作，数学和其他值。
@ css3的transition是直接写在选择器上？
写在哪里是要分情况的，是要看你想要实现什么效果。
1）如果写在选择器，如果是写的rotate等事件，则直接执行事件，如果写的是transtion:all ease 0.5s，那么他在你鼠标移入以及鼠标移出的时候都会发挥作用。
2）写在hover上，那么他只会在鼠标移入的时候才执行你自己定义的transtion动作，移出没有效果；
