目录
前言
安装
1.基于webpack模板创建一个Vue项目
vue init webpack scsspractice
安装 sass。sass-loader的版本过高导致的编译错误,当前最高版本是8.x,需要指定到7.3.1
npm install sass-loader@7.3.1 --save-dev
npm install --save-dev node-sass
3.在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
4.修改css样式
<style scoped lang="scss">
.div1{
width: 300px;
height: 100px;
line-height: 100px;
background-color: aquamarine;
opacity: 50%;
margin: 0 auto;
.p1{
color: tomato;
font-size: 32px;
}
}
</style>
运行效果如下:
基本用法
变量
SASS允许使用变量,所有变量都是以$开头。
$blue:red;
.p1{
color: $blue;
font-size: 32px;
}
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
计算功能
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
嵌套
.div1{
width: 300px;
height: 100px;
line-height: 100px;
background-color: aquamarine;
opacity: 50%;
margin: 0 auto;
.p1{
color: $blue;
font-size: 5px + 5px +5px +5px +5px + 5px;
}
}
属性也可以嵌套,比如border-color属性,可以写成:
p {
border: {
color: red;
}
}
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
a {
&:hover { color: #ffb3ff; }
}
注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
/*!
重要注释!
*/
代码的重用
继承
SASS允许一个选择器,继承另一个选择器。比如下面的选择器 .div2继承了.div1
.div1{
width: 300px;
height: 100px;
line-height: 100px;
background-color: aquamarine;
opacity: 50%;
margin: 0 auto;
}
.div2{
@extend .div1;
margin-top: 10px;
font-size: 50px;
}
Mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
@mixin left {
float: left;
margin-left: 10px;
}
使用@include命令,调用这个mixin。
div {
@include left;
}
mixin的强大之处,在于可以指定参数和缺省值。
@mixin left($value: 10px) {
float: left;
margin-right: $value;
}
使用的时候,根据需要加入参数:
div {
@include left(20px);
}
颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
插入文件
@import命令,用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令。
@import "foo.css";
高级用法
高级用法有条件、循环以及自定义函数,日后有这方面的需求再去查阅资料。