scss基本语法结构

1.模块的导入

/*模块的导入*/
@use "base";
@debug base.$name;

2.变量的定义

/*变量的定义*/
$name:"xyz";
/*输出*/
@debug $name;

3.函数

/*函数*/
@function getColor(){
	@return "#ff5";
}
span {
	color: getColor();
}

4.列表

/*列表*/

/*$users: ['user1', 'user2'];*/
/*$users: 'user1', 'user2';*/
$users: 'user1' 'user2';

@debug $users;

5.数组遍历

/*数组遍历*/
@each $user in $users {
	div-#{$user} {
		color: $user;
	}
}

6.运算符

/*运算符*/

@if 2 > 1 {
	@debug ">";
}

7.父选择器

/*&代表父选择器*/
a {
	color: #ff5;
	&:hover {
		color: #ccc;
	};
}