Sass基础入门

合集 - CSS(4)

1.CSS基础2024-12-102.CSS3新特性2024-12-113.Less基础入门2024-12-11

4.Sass基础入门2024-12-11

收起

• 编译、变量、嵌套、导入 Sass 文件、混合、选择器继承、运算、控制指令

• 使用基本与 Less 一致

• 变量

  • Sass 使用$来标识变量

• 导入

• reset.scss

$bg-width: 1200px;
$bgColor: red;
.nav {
	width: $bg-width;
	background-color: $bgColor;
}

• style.scss

@import "./reset.scss";

// $bgColor: green!default;
$bgColor: green;
.container {
	background-color: $bgColor;
}

.box {
	width: 200px;
	@import "./reset.scss";
}

• css

.nav {
	width: 1200px;
	background-color: red;
}

.container {
	background-color: green;
}

.box {
	width: 200px;
}

.box .nav {
	width: 1200px;
	background-color: red;
}

• 混合

// 定义混合
@mixin box($width, $height, $color: red) {
	width: $width;
	height: $height;
	background-color: $color;
	border: 1px solid green;
	margin: 10px;
}

.box1 {
	@include box(100px, 100px, blue); // 使用混合
}

.box2 {
	@include box(200px, 300px);
	padding: 30px;
}

• 选择器继承

.box1 {
	width: 100px;
	height: 100px;
	background-color: red;
}

.box2 {
	@extend .box1;
	border: 1px solid green;
}

• 控制指令

p {
	@if 1+1==2 {
		border: 1px solid;
	}
	@if 5 > 3 {
		border: 2px dotted;
	}
	@if null {
		border: 3px double;
	}
}

@for $i from 1 through 3 {
	.item-#{$i} {
		width: 2px * $i;
	}
}

• css

p {
	border: 1px solid;
	border: 2px dotted;
}

.item-1 {
	width: 2px;
}

.item-2 {
	width: 4px;
}

.item-3 {
	width: 6px;
}