文章目录
安装
命令:npm install -g sass
使用
新建一个scss文件
style.scss
body{
font-size: 20px;
ul{
list-style-type: none;
color:white;
li{
background-color: seagreen;
margin:5px;
}
}
}
新建一个css文件(可以省略,自动生成)
index.css
//不用写代码
输入命令:sass xxx.scss:aaaaa.css
sass style.scss:index.css
发现scss文件被解析成css文件
index.css(若没有此css文件会自动生成)
body {
font-size: 20px;
}
body ul {
list-style-type: none;
color: white;
}
body ul li {
background-color: seagreen;
margin: 5px;
}
正常引入css文件即可<link rel="stylesheet" href="style.css">
自动编译
输入命令:sass --watch xxx.scss:aaaaa.css
sass --watch style.scss:index.css
自动监听scss文件的变化并编译
设置编译方式
输出样式的风格可以有四种选择,默认为nested
nested:嵌套缩进的css代码
expanded:展开的多行css代码
compact:简洁格式的css代码
compressed:压缩后的css代码
命令:sass xxx.scss:aaaaa.css --style [编译方式]
1.nested 嵌套
输入命令:sass --watch style.scss:index.css --style nested
,后index.css变成
body {
font-size: 20px;}
body ul {
list-style-type: none;
color: white;}
body ul li {
background-color: seagreen;
margin: 5px;}
2.compact 紧凑
输入命令sass --watch style.scss:index.css --style compact
后,index.css变成
body{font-size:20px}
body ul{list-style-type:none;color:#fff}
body ul li{background-color:#2e8b57;margin:5px}
3.expanded 扩展
输入命令sass --watch style.scss:index.css --style expanded
后,index.css变成
body {
font-size: 20px;
}
body ul {
list-style-type: none;
color: white;
}
body ul li {
background-color: seagreen;
margin: 5px;
}
4.compressed 压缩
输入命令sass --watch style.scss:index.css --style compressed
后,index.css变成
body{font-size:20px}body ul{list-style-type:none;color:#fff}body ul li{background-color:#2e8b57;margin:5px}