vscode 使用scss/sass方法
1.2、sass编译插件 Live Sass Compiler(推荐)
现在前端开发工具大多使用的是vs code 因此小伙伴们可以到拓展中安装这个插件非常好用；当然Hbuilder中也有对应的插件
三、使用sass
1、编写html基本dom
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>关注博主，哈哈哈</title> </head> <body> <div class="cls1"> dom1 </div> <div class="cls2"> dom2 </div> </body> </html>
这里我们只是定义了2个div并没有给他加入任何样式。
2、编写sass代码
提示：这个很重要！！！！！===> 在这里我们所创建的文件名后缀为 .scss ,为什么不是 .sass
注：因为在sass3中引进了scss新语法 ；在古老的.sass文件中编写时是没有大括号{}的，是使用和python一样的缩进语法对代码块进行区分，这在维护的时候容易眼花，对长时间看屏幕的开发者们很不友好，因此这里我们使用的是sass3的新语法scss。
$width:100px;
$height:150px;
$color:rgb(29, 138, 142);
html{
padding: 0;
margin:0;
}
.cls1{
width: $width;
height: $height;
background-color: $color;
}
$width:500px;
$color:red;
$color2:blue;
.cls2{
width: $width;
height: $width;
background-color: $color2;
p{
background-color: $color;
}
}
3、编译sass为css
提示：因为正常的.sass / .scss文件是不能被浏览器解析的，因此我们才会将以上的代码转化成 .css文件
编译：在vs code的底部菜单中找到 watch Sass 并点击即可编译成新.css文件 和.map文件
点它
四、引入编译成的.css文件到.html中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./style.css"> </head> <body> <div class="cls1"> dom1 </div> <div class="cls2"> <p>我是段落</p> dom2 </div> </body> </html>
原文链接：https://blog.csdn.net/qczzc/article/details/130628063
