Sass常用语法

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>