什么是css
CSS不是编程语言,CSS基本上是设计师的工具。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。
什么是sass
SASS是一种CSS的开发工具,使用编程思想写CSS。
vue中安装sass
npm i -D sass sass-loader
sass使用语法
文件后缀.scss
1、变量
以$开头
$blue : #1875e7;
div {
color : $blue;
}
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
2、计算
body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}
3、嵌套
.hello {
h1 {
color: red;
}
h3 {
color: blue;
}
}
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
a {
&:hover { color: #ffb3ff; }
}
4、注释
//只保留在SASS源文件中,编译后被省略
/*
会保留到编译后的文件
*/
/*!
重要注释!
*/
5、继承
.class1 {
border: 1px solid #ddd;
}
.class2 {
@extend .class1;
font-size:120%;
}
6、Mixin
使用@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);
}
7、颜色函数
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
8、插入文件
@import "path/filename.scss";
9、条件语句
@if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}
10、for循环
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}
11、while循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
12、each命令,作用与for类似
@each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}
13、自定义函数
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}