mysql实现sass_Sass的使用

Sass是一种CSS预处理语言。

首先要了解什么是CSS预处理器？

CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性(完全兼容css3)，让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。

CSS预处理语言有Scss(Sass) 和Less、Postcss。

那么Scss和Sass有什么区别呢？

Sass 有两种语法规则(syntaxes)，目前新的语法规则(从 Sass 3开始)被称为 “SCSS”，它是css3语法的的拓展级，就是说每一个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作为拓展名。第二种语法别称为缩进语法(或者 Sass)，它受到了Haml的简洁精炼的启发，它是为了人们可以用和css相近的但是更精简的方式来书写css而诞生的。它没有括号、分号，它使用行缩进的方式来指定css 块，虽然sass不是最原始的语法，但是缩进语法将继续被支持，在缩进语法的文件以.sass为拓展名。

特性概览：

CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过Sass预处理器进行CSS的开发，Sass提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

Scss的使用语法：

·注释：

注释分为三种：/* */css中显示，//css中不显示，/*重要注释!*/压缩不会被删掉。

·@import 命令导入外部sass、scss、css文件：

@import './test.scss'; //导入外部scss文件

.myText {

border:1px solid red;

}

·变量：

声明变量的语法是：$+变量名+：+变量值；如下：

$color:red; //声明变量 $color

区分默认变量：

默认变量只需要在变量值后加上 !default , 用来设置默认值 ，对默认变量进行重新声明可以实现覆盖默认值；如：

$color:red !default; //声明默认变量 $color

$color:purple; //根据需求覆盖默认变量

.father01 {

color:$color;

}

区分全局变量和局部变量：

全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；

$height:200px; //全局变量声明不在大花括号内

$bgcolor:blue;

body {

.father01 {  //嵌套

width:$width;

height:$height;

$border:1px solid red; //局部变量是声明在元素内的

border: $border;

$bgcolor:purple; //全局变量和局部变量名一致时，调用局部变量进行覆盖

background-color: $bgcolor;

}

}

局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；

body {

.father01 {

width:200px;

height:200px;

$border:1px solid red !global; //使用global关键词将$border变为了全局变量

border:$border;

}

.father02 {

width: 300px;

height:300px;

border:$border; //使用全局变量

}

}

变量嵌套引用：即字符串插值，需要使用 #{} 来进行包裹：

$left:left;

.fat