开发工具：vscode
安装插件：Easy Sass
创建项目目录scss-test, 在scss-test目录里，安装俩个依赖：yarn add sass-loader node-scss
1、创建index.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">
<title>scss</title>
<link rel="stylesheet" href="./index.min.css">
</head>
<body>
<div id="app">
<div class="zheli">这里是标题</div>
<p class="neirong">这里是第一部分<a class="main">内容</a></p>
<p class="neirong2">这里是第二部分<a class="main">内容</a></p>
</div>
</body>
</html>
2、创建index.scss文件
// 导入外部的scss
@import "./scss/mixin";
// 全局变量
$high-color: #f90;
$bg-color: #000;
#app{
// 嵌套语法
.zheli{
color: #f90;
font-weight: 700;
font-size: 30px;
margin: 20px 40px;
}
}
.neirong{
// 局部变量，只在块内使用
color: #FFF;
$font-size: 20px;
font-size: $font-size;
background-color: $bg-color;
// 使用这个块，并传入参数
@include default0;
.main{
// 父级引用&
&:hover{
color: rgb(0, 255, 64);
font-size: large;
}
}
}
.neirong2{
// 样式的继承
@extend .neirong;
// 使用这个块，并传入参数
@include default40(40px, 20px);
color: aqua;
}
创建scss/mixin.scss文件
@mixin default0 {
margin: 40px;
padding: 40px;
}
// 公共的块，单独提出来
@mixin default40($margin, $padding) {
margin: $margin;
padding: $padding;
}
3、在index.scss文件ctrl+s保存的时候会自动生成index.css和index.min.css俩个文件
4、浏览器打开index.html文件，可见scss效果
网友评论