Sass syntax
1.1 Variables
Variables can store style information for later use.
For example, if a style is used in multiple places on the page, you can first assign the value of the style to a variable, and then use the variable directly.
- Syntax: $ variable name: style value;
- Use: $variable_name;
important point:
- Start with a $ sign followed by the variable name
- Multiple words, the variable name is separated by -, such as: $theme-color
- Variables are written in #{} to embed in the string
Sample code:
// .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 Nesting
- selector nesting
Sample code:
<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>
- Pseudo-class nesting
Add :hover effect to an element
Sample code:
<template>
<view class="box">
<text>
666
</text>
</view>
</template>
<style lang="scss" scoped>
.box {
text {
// 悬停a的文本颜色改变
&:hover {
color: blue;
}
}
}
</style>
1.3 Mixing mixins
Mixin is equivalent to having defined a class of styles, which can be used repeatedly anywhere, just like functions in js.
Sample code:
<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 Parameters Parameters must start with a $ symbol when defining, which is the same as variable naming
@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 Inheritance extends
If the style of an element is exactly the same as that of another element, this element does not need to write a repeated style, just use @extend to inherit all the styles of another element
Sample code:
<style lang="scss" scoped>
.a1 {
width: 200rpx;
height: 200rpx;
background-color: antiquewhite;
}
.a2 {
@extend .a1; // 继承a1的样式
}
</style>
1.5 import import
If a page needs to use the styles of other pages, sass can import other scss files, and scss will compile them into a css file. In this way, the style of a page can be divided into multiple scss files during development, and then other scss can be imported into the scss file of the page, which can realize the modular development of css.
Sample code:
// 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 Mathematical operations
Sample Code: Addition, Subtraction, Multiplication, and Division
.box {
width: 50rpx + 50rpx;
height: 100rpx - 50rpx;
margin-top: 10rpx * 10;
padding-top: (100rpx / 2); // 除法需加括号
}
3.7 if else conditional statement
Judging based on conditions to give a specific style
@if 条件语句 {
} @ else if 条件语句 {
} @else
Sample code:
<style lang="scss">
text {
@if 1 {
font-size: 28rpx;
} @else if 2 {
font-size: 40rpx;
} @else {
font-size: 70rpx;
}
}
</style>
3.8 for loop
The first syntax:
@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>
Second syntax:
@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 User-defined functions
@function name($param1，$param2，...) {
}
Sample code:
<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>