sass $var @function @mixin @if @for 使用

Sass

vscode sass 插件 把 scss 文件编译 css 文件

• Easy Sass
• Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro

下载

npm install -g sass

命令编译 css 文件

sass 要编译的scss文件 编译为css文件名称 -w

sass main.scss main.css -w

@debug

@debug type-of($value: 100px);

变量

$color: aqua;
.root {
	color: $color;
}

嵌套

.root {
	$color: aqua;
	.main {
		color: $color;
	}
}

父选择器的标识符&

.root {
	&:hover {
		color: $color;
	}
}
// 编译后
.root:hover {
	color: aqua;
}

群组选择器的嵌套

.root {
	.main,
	.aside {
		color: $color;
	}
}
// 编译后
.root .main,
.root .aside {
	color: aqua;
}

导入 SASS 文件 @import @use

@import "./common.scss";

默认以最后文件名开头

@use "./common.scss";

.main {
	color: common.$color;
}

配置别名（名称重复时）

@use "./common.scss" as common_sc;

.main {
	color: common_sc.$color;
}

配置私有变量

$_变量名

$_color: #fc0;

运算

.aside {
	font-size: $size + 2;
	font-size: $size - 2;
	font-size: $size * 2;
	font-size: $size / 2;
}

三种情况 / 将被视为除法运算符号

• 如果值，或值的一部分，是变量或者函数的返回值
• 如果值被圆括号包裹
• 如果值是算数表达式的一部分

.aside {
	font-size: 26px + 2;
	font-size: (26px) / 2;
	font-size: 26px / 2;
}
// 编译后
.aside {
	font-size: 28px;
	font-size: 13px;
	font-size: 26px / 2;
}

#{} 插值语句

• 在属性中避免变量运算

p {
	$font-size: 12px;
	$line-height: 30px;
	font: #{$font-size}/#{$line-height};
}
// 编译后
p {
	font: 12px/30px;
}

• 在选择器和属性中中使用变量

$name: foo;
$attr: border;
p.#{$name} {
	#{$attr}-color: blue;
}
// 编译后
p.foo {
	border-color: blue;
}

@extend

.error {
	border: 1px #f00;
	background-color: #fdd;
}
.seriousError {
	@extend .error;
	border-width: 3px;
}

配合 %class 使用

如果没有使用 @extend 则代码不会编译到 css 文件

%color {
	color: red;
}
p {
	@extend %color;
}

数组

使用空格或逗号分隔开

$list: 10, 20, 30;
$list: 10 20 30;

nth

获取数组的项（从 1 开始）

div {
	font-size: #{nth($list: $list, $n: 1)}px;
}

length

获取数组的长度

$list: 10, 20, 30;
@debug length($list);

type-of

获取数据类型

type-of($value: $list) == "list"

Map

必须用括号()括起来，每对键值之间使用逗号分隔

map-get

$map: (
	"width": 300px,
);

.box {
	width: map-get($map: $map, $key: width);
}

@if @else if @else

$type: ocean;
p {
	@if $type == ocean {
		color: blue;
	} @else if $type == matador {
		color: red;
	} @else {
		color: black;
	}
}
// 编译后
p {
	color: blue;
}

@each

遍历 list 和 map

$list: 1, 2, 3;
@each $n in $list {
	.box#{ $n } {
		width: 100px;
	}
}

$map: (
	"width": 100px,
	"height": 100px,
);

@each $key, $value in $map {
	.b {
		#{$key}: $value;
	}
}

// 编译后
.box1 {
  width: 100px;
}

.box2 {
  width: 100px;
}

.box3 {
  width: 100px;
}

.b {
  width: 100px;
}

.b {
  height: 100px;
}

@for

这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 与 的值，而使用 to 时条件范围只包含 的值不包含 的值。另外，$var 可以是任何变量，比如 $i； 和 必须是整数值

@for $i from 1 through 3 {
	.item-#{$i} {
		width: 2em * $i;
	}
}
// 编译后
.item-1 {
	width: 2em;
}

.item-2 {
	width: 4em;
}

.item-3 {
	width: 6em;
}

@mixin @include

定义属性

@mixin large-text {
	color: #ff0000;
}
p {
	@include large-text;
}
// 编译后
p {
	color: #ff0000;
}

使用参数及默认值

@mixin large-text($color: white) {
	color: $color;
}
p {
	@include large-text(pink);
}
// 编译后
p {
	color: pink;
}

定义选择器

@mixin large-text($color: white) {
	p {
		color: $color;
	}
}
@include large-text(pink);
// 编译后
p {
	color: pink;
}

@content 实现类似 vue 插槽

@mixin flex-center {
	display: flex;
	@content;
}

.box {
	@include flex-center {
		justify-content: center;
	}
}

@function @return

@function getWidth($width) {
	@return $width * 2;
}
p {
	width: getWidth(5) + px;
}
// 编译后
p {
	width: 10px;
}

random()

生成随机数

p {
	height: random($limit: 10);
}

round()

四舍五入

p {
	height: round($number: 10.5);
}

unquote()

去掉字符串引号

p {
 	width: unquote($string: "100px");
}
// 编译后
p{
  width: 100px;
}