语法
- 上一篇讲了如何编译 sass 文件了，接下来讲一下 sass 的语法
- 为什么他这么强大，这么好用，都是靠强大的语法
.sass和.scss文件的语法是一样的，只不过区别就是{}和;
注释
- 编译的时候不会被编译的注释
// 我是一个普通注释，在编译的时候，我就被过滤了
- 编译的时候会被编译的注释
/* 我在编译的时候，会被一起编译过去 */
- 强力注释
/*! 我是一个强力注释，不光编译的时候会被编译过去，将来压缩文件的时候也会存在 */
变量
- 在sass中
$来定义变量：
$color:red;
$font_size:12px;
.header{
background-color: $color;
font-size:$font_size*2;
}
- 一般用来定义颜色或者一些常用的像素值
嵌套
sass里面我们最长用到的就是嵌套了
h1 {
width: 100px;
div {
width: 200px;
}
}
// 编译结果
h1 {
width: 100px;
}
h1 div {
width: 200px;
}
- 这个就是嵌套，理论上可以无限嵌套下去
ul {
width: 100px;
li {
width: 90px;
div {
width: 80px;
p {
width: 70px;
span: {
color: red;
}
}
}
}
}
嵌套中的 &
- 在嵌套中还有一个标识符是
&我们可以使用
div {
width: 100px;
height: 100px;
:hover {
width: 200px;
}
}
// 我想的是 div 被鼠标悬停的时候 width 变成 200
// 但是编译结果却是
div {
width: 100px;
height: 100px;
}
div :hover {
// 注意这中间是有个空格的，并没有连在一起
width: 200px;
}
- 这个时候就要用到
&来连接了
div {
width: 100px;
height: 100px;
&:hover {
width: 200px;
}
}
// 编译结果
div {
width: 100px;
height: 100px;
}
div:hover {
// 现在才是连在一起的
width: 200px;
}
群组嵌套
- 群组嵌套就是多个标签同时嵌套
div {
width: 100px;
.box1, .box2, .box3 {
color: red;
}
}
// 编译结果
div {
width: 100px;
}
div .box1, div .box2, div .box3 {
color: red;
}
- 还有一种就是多个标签同时嵌套一个标签
h1, h2, h3 {
width: 100px;
.box {
color: red;
}
}
// 编译结果
h1, h2, h3 {
width: 100px;
}
h1 .box, h2 .box, h3 .box {
color: red;
}
嵌套属性
- 在
scss里面还有一种特殊的嵌套,叫做 属性嵌套 - 和选择器嵌套不一样，是写属性的时候使用的
div {
border: {
style: solid;
width: 10px;
color: pink;
}
}
// 编译结果
div {
border-style: solid;
border-width: 10px;
border-color: pink;
}
- 这个属性嵌套还可以有一些特殊使用
div {
border: 1px solid #333 {
bottom: none;
}
}
// 编译结果
div {
border: 1px solid #333;
border-bottom: none;
}
混合器
- 其实就是定义一个 “函数” 在 scss 文件中使用
- 语法：
@mixin 函数名{函数代码}
// 定义一个混合器使用 @mixin 关键字
@mixin radius {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
- 他是不会被编译的，只有当你使用了他以后，才会被编译
- 调用语法：
@include 函数名;
// 使用混合器使用 @include 关键字
div {
width: 100px;
height: 100px;
@include radius;
}
- 编译结果
div {
width: 100px;
height: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
混合器传参
- 混合器就像一个 “函数” 一样，那么就一定可以像 “函数” 一样传递参数
- 和 “函数” 的使用方式一样，在定时的时候是 “形参”，在调用的时候是 “实参”
- 语法：
@mixin 函数名(形参){函数代码中可以使用形参}
// 定义混合器
@mixin my_transition($pro, $dur, $delay, $tim) {
-webkit-transition: $pro $dur $delay $tim;
-moz-transition: $pro $dur $delay $tim;
-ms-transition: $pro $dur $delay $tim;
-o-transition: $pro $dur $delay $tim;
transition: $pro $dur $delay $tim;
}
- 使用这个混合器的时候传递 “实参”
- 调用语法：
@include 函数名(实参);
div {
width: 100px;
height: 100px;
@include my_transition(all, 1s, 0s, linear);
}
- 编译结果
div {
width: 100px;
height: 100px;
-webkit-transition: all 1s 0s linear;
-moz-transition: all 1s 0s linear;
-ms-transition: all 1s 0s linear;
-o-transition: all 1s 0s linear;
transition: all 1s 0s linear;
}
- 写了多少个 “形参”，那么调用的时候就要传递多少个 “实参”
参数默认值
- 我们在定义混合器的时候，也可以给一些参数写一些默认值，这样一来，就可以不传递 “实参” 了
- 语法：
@moxin 函数名(形参:值){函数代码中可以使用形参}
// 设置一些带有默认值的参数
@mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $tim: linear) {
-webkit-transition: $dur $pro $delay $tim;
-moz-transition: $dur $pro $delay $tim;
-ms-transition: $dur $pro $delay $tim;
-o-transition: $dur $pro $delay $tim;
transition: $dur $pro $delay $tim;
}
- 使用的时候，如果你不传递，那么就是使用默认值
div {
width: 100px;
height: 100px;
// 使用的时候，只传递一个，剩下的使用默认值
@include my_transition(2s);
}
- 编译结果
div {
width: 100px;
height: 100px;
-webkit-transition: 2s all 0s linear;
-moz-transition: 2s all 0s linear;
-ms-transition: 2s all 0s linear;
-o-transition: 2s all 0s linear;
transition: 2s all 0s linear;
}
继承
- 当下面的选择器中需要使用到上面选择器的样式，就可以使用继承将上面拿下来使用，而省掉再写：
- 继承语法：
@extend 被继承的选择器;
.box1{
width: 100px;
height: 100px;
}
.box2{
@extend .box1;
border:1px solid #000;
}
- 编译结果：
.box1, .box2 {
width: 100px;
height: 100px;
}
.box2 {
border: 1px solid #000;
}
导入
在一个文件中定义变量和混合器，在写css的时候文件比较混乱，所以通常会将变量和混合器放在单独的文件中，通过命令导入进来，这样每个文件中的代码都是同一类
- 导入的语法：
@import "路径"; - 变量文件：variable.scss
$orange:orange;
$red:red;
- 混合器文件：mixin.scss
@mixin bor($style,$width,$color){
border:$style $width $color;
}
@mixin bac($path,$color,$repeat){
background:url($path) $color $repeat;
}
- 样式文件：
@import "./variable.scss";
@import "./mixin.scss";
.box{
@include bor(solid,1px,$red);
}
- 编译后的css：
.box {
border: solid 1px red;
}