目录
1.在VS code中安装Easy Sass插件,在当前工作区启用
2.新建index.html文件和index.scss文件
3.介绍sass的基本语法,保存即可生成css文件(包括压缩和未压缩版本)
1.在VS code中安装Easy Sass插件,在当前工作区启用
2.新建index.html文件和index.scss文件
index文件如下:
<!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>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<p><span>123</span><span>456</span></p>
<div>
<h1>123</h1>
<a href="#">456</a>
</div>
</body>
</html>
3.介绍sass的基本语法,保存即可生成css文件(包括压缩和未压缩版本)
保存后会生成index.css和index.min.css两个文件,如下图
(1)变量使用,拥有作用域
(2)嵌套写法
(3)伪类写法(例如hover效果)
sass文件如下:
//1.变量使用
$b:skyblue;
$borderValue:10px solid #ee5a5a;
p {
background-color: $b;
border: $borderValue;
$w: 100px;
width: $w;
//2.嵌套写法
span {
color: #ee5a5a;
}
}
div {
a {
display: inline-block;
width: 200px;
height: 200px;
//3.hover写法
&:hover {
background-color: pink;
}
}
}