SASS

SASS

css编写时嵌套层级多导致代码编写不方便。sass的出现就是为了解决css的缺点。

sass不能直接被浏览器识别，所以需要进行编译成正常的css文件才能被浏览器使用。

• 编译sass成css：

• 1. 在 vs code 中 安装 插件 easy sass
  2. 在 vs code 中创建一个 xxx.scss 文件 

(注意这里就是 scss 结尾 不是 sass 结尾)

• 3. 在 xxx.scss 文件中书写 scss 代码
  4. 保存代码后，当前的 xxx.scss 文件旁边会自动生成两个文件

• • • xxx.css：文件内容为编译后的 css 代码
    • xxx.min.css：文件内容为编译后并且压缩过的 css 代码
    • .scss的文件写法：

#wrap{ width:100px; }

.sass的文件写法：

#wrap width:100px

使用sass编写：

```#wrap{ width: 300px; height: 300px; border:3px solid #ccc; .content{ width: 250px; height: 250px; background-color: pink; .article{ width: 200px; height: 200px; background-color: skyblue; p{ width: 150px; height: 150px; border:5px solid purple; span{ font-size: 20px; } } } } }
```js

sass的注释

// 单行注释，但是在编译的时候不保留 /* 多行注释 编译的时候可以保留 压缩的时候不保留 / /! 多行注释 编译和压缩的时候都会保留 */

sass变量

在sass中$来定义变量：

```$color:red; 
$font_size:12px; 
.header{ background-color: $color; font-size:$font_size*2; }

```js

sass嵌套

/后代关系/ .wrap{ div{ width:font_size*10; } } /*子类关系*/ ul{ >li{ padding:12px; } } /*大括号中表示自己*/ .nav{ &:hover{ background-color: color; } li{ &:hover{ color:color; } } } /*群组嵌套按正常写即可*/ /* 属性嵌套 */ .content{ border: { style:solid; color:color; width:2px; } } .left{ border:1px solid #000{ left:none; bottom:{ width:3px; } }; }