Sass语法
1.1 变量
变量可以存储样式信息，以便后面使用。
比如一个样式在页面的多个地方使用，就可以先将该样式的值赋给一个变量，后面直接使用变量即可。
- 语法： $变量名：样式值；
- 使用： $变量名；
注意点：
- 以$符号开头，后跟变量名
- 多个单词，变量名以-分割，如: $theme-color
- 变量写在#{}中以镶嵌入字符串
示例代码：
// .scss文件 Sass后缀名为scss
<style lang="scss" scoped>
$back: #000;
$one: 1rpx;
$left: left;
.state {
width: 100rpx;
height: 100rpx;
background: $back;
border-#{
$left}: $one solid $back;
}
</style>
1.2 嵌套
- 选择器嵌套
示例代码：
<template>
<view class="grandpa">
<view class="father">
<view class="son"></view>
</view>
</view>
</template>
<style lang="scss" scoped>
.grandpa {
width: 200px;
height: 200px;
.father {
width: 100px;
height: 100px;
.son {
width: 50px;
height: 50px;
}
}
}
</style>
- 伪类嵌套
给一个元素添加:hover效果
示例代码：
<template>
<view class="box">
<text>
666
</text>
</view>
</template>
<style lang="scss" scoped>
.box {
text {
// 悬停a的文本颜色改变
&:hover {
color: blue;
}
}
}
</style>
1.3 混合 mixin
mixin相当于已经定义好了一类样式，可以在任何地方重复的使用它，就跟js中的函数一样。
示例代码：
<style lang="scss" scoped>
// 定义一个mixin
@mixin name {
width: 200rpx;
height: 100rpx;
background-color: #894375;
}
// 使用
.box {
@include name;
border: 1rpx solid #666;
}
</style>
1.3.1 参数 定义的时候参数要以$符开头，和变量命名是一样的
@mixin name ($param1，$param2， ...) {
css样式
}
<style lang="scss" scoped>
$width: 200rpx;
$height: 200rpx;
@mixin box ($width, $height) {
width: $width;
height: $height;
}
.box {
// 第一种用法
// @include box(200rpx,200rpx);
// 第二种用法 将定义好的变量写入
@include box($width, $height);
background-color: aqua;
}
</style>
1.4 继承 extend
如果一个元素的样式和另一个元素的样式完全一样，这个元素无需再写一遍重复的样式，只需使用@extend 就可以把另一个元素的所有样式全部继承过来
示例代码：
<style lang="scss" scoped>
.a1 {
width: 200rpx;
height: 200rpx;
background-color: antiquewhite;
}
.a2 {
@extend .a1; // 继承a1的样式
}
</style>
1.5 导入 import
如果一个页面需要使用其他页面的样式，sass可以导入其他的scss文件，scss会把他们编译成一个css文件。这样在开发中可以把一个页面的样式分割成多个scss文件，然后在页面的scss文件中导入其他scss，可以实现css的模块化开发。
示例代码：
// mixin.scss
$width: 100rpx;
$height: 100rpx;
$color: #456;
@mixin box {
width: $width;
height: $height;
background-color: $color;
}
//页面使用
<style lang="scss">
// 引入mixin.scss
@import '../../static/mixin.scss';
.box {
// 使用
@include box;
}
</style>
1.6 数学运算
示例代码： 加减乘除
.box {
width: 50rpx + 50rpx;
height: 100rpx - 50rpx;
margin-top: 10rpx * 10;
padding-top: (100rpx / 2); // 除法需加括号
}
3.7 if else条件语句
根据条件判断给出特定的样式
@if 条件语句 {
} @ else if 条件语句 {
} @else
示例代码：
<style lang="scss">
text {
@if 1 {
font-size: 28rpx;
} @else if 2 {
font-size: 40rpx;
} @else {
font-size: 70rpx;
}
}
</style>
3.8 for循环
第一种语法：
@for $index from 开始值 through 结束值 {
}
从开始值开始，到结束值结束，包含结束值 index表示 1， 2，...结束值
<style lang="scss">
@for $i from 1 through 5 {
.mt-#{
$i} {
// mt-1 mt-2 mt-3 mt-4 mt-5
// 不准rpx
margin-top: 10px * $i; // 10 20 30 40 50
}
}
</style>
第二种语法：
@for $index from 开始值 to 结束值 {
}
从开始值开始，到结束值结束，不包含结束值 index表示 1， 2，...结束值-1
<style lang="scss">
@for $i from 1 to 5 {
.mt-#{
$i} {
// mt-1 mt-2 mt-3 mt-4
// 不准rpx
margin-top: 10px * $i; // 10 20 30 40
}
}
</style>
3.9 用户自定义函数
@function name($param1，$param2，...) {
}
示例代码：
<style lang="scss">
$i: 4;
$w: 100rpx;
$h: 100rpx;
@function bgc-color($key) {
@if $key > 5 {
@return #000;
} @else {
@return #666;
}
}
.box {
background: bgc-color($i); // #666
width: $w;
height: $h;
}
</style>