Scss学习

2021 / 5 / 7

Scss学习

1. VsCode中使用Scss

使用 Live Sass Compiler 插件

2. 嵌套规则

2.1 嵌套

// Scss
#main {
	div {
		font-size: 20px;
		p {
			color: skyblue;
		}
	}
}
// 编译后css
#main div {
	font-size: 20px;
}
#main div p {
	color: skyblue;
}

2.2 父选择器 &

// Scss
div {
	&:hover {
		background-color: #eee;
	}
	&:hover p {
		color: skyblue;
	}
}
// 编译后css
div:hover {
	background-color: #eee;
}
div:hover p {
	color: skyblue;
}

2.3 属性嵌套

// Scss
div {
	font: {
		size: 20px;
		weight: 400;
	}
	border: 1px solid #ccc {
	  left: 0px;
	  right: 0px;
	  }
}
// 编译后css
div {
	font-size: 20px;
	font-weight: 400;
	border: 1px solid #ccc;
	border-left: 0px;
	border-right: 0px;
}

2.4 子组合选择器和同层组合选择器：>、+和~

// 匹配 #main 下所有 div 元素
#main {
	div {
		padding: 10px;
	}
}
// 匹配 #main 下紧跟着的 div 子元素
#main {
	> div {
		padding: 10px;
	}
}
// 只匹配 #main 元素后同层紧跟的div
#main {
	+ div {
		padding: 10px
	}
}
// 匹配 #main 元素后所有的div
#main {
	~ div {
		padding: 10px;
	}
}
// Scss
article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
// 编译后css
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

3. 变量 $

3.1 变量书写

可用来设置默认值，
当默认值需要修改，
只需要改变这个变量的值，
则所有引用此变量的地方生成的值都会随之改变。

$size: 20px;
// Scss
div {
	font-size: $size;
}
// 编译后css
div {
	font-size:20px;
}

3.2 变量作用域

变量支持块级作用域，
嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），
不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。
将局部变量转换为全局变量可以添加 !global 声明

// Scss
div1 {
	$size: 20px!global;
	font-size: $size;
}
div2 {
	font-size: $size;
}
// 编译后css
div1 {
	font-size:20px;
}
div2 {
	font-size:20px;
}

3.3 默认变量值

一般情况下，反复声明同个变量，
只有最后一处声明会有效。

$color: blue;
$color: red;
a {
	color: $color; // color: red;
}

此时可以使用 !default 实现设置默认值，
如果变量被声明赋值了，就不会再次赋值，否则就会再次赋值。

$color: blue;
$color: red!default;
a {
	color: $color; // color: blue;
}

4. 延伸

4.1 @extend

使用相同引入

// Scss
.box {
	border: 1px solid #000;
	padding: 10px 20px;
}
.box1 {
	@extend .box
	backgorund-color: #eee;
}
.box2 {
	@extend .box
	background-color: res;
}
// 编译后css
.box, .box1, .box2 {
	border: 1px solid #000;
	padding: 10px 20px;
}
.box1 {
	backgorund-color: #eee;
}
.box2 {
	background-color: res;
}

4.2 延伸复杂的选择器

// Scss
.box {
	@extend div:hover;
}
div:hover{
	color: skyblue;
}
// 编译后css
div:hover, .box {
	color: skyblue;
}

4.3 多重延伸

当一个选择器延伸给第二个后，
可以继续将第二个选择器延伸给第三个。

// Scss
.box {
	border: 1px solid #000;
}
.box1 {
	@extend .box;
	color: #eee;
}
.box2 {
	@extend .box2
}
// 编译后css
.box, .box1, .box2{
	border: 1px solid #000;
}
.box1, .box2 {
	color: #eee;
}

4.4 @extend-Only 选择器（@extend-Only Selectors）

定义一套样式并不是给某个元素用，
而是只通过 @extend 指令使用。
引入了“占位符选择器” (placeholder selectors)，
类似于类选择器，使用 %。
单独使用时，不会被编译到 CSS 文件中。

// Scss
%color {
	color: #eee;
}
.box {
	@extend %color
}
// 编译后css
.box {
	color: #eee;
}

2021 / 5 / 8

5. 引入 @import

sass局部文件的文件名以下划线开头。
就不会在编译时单独编译这个文件输出css，
而只把这个文件用作导入。
当 @import 一个局部文件时，可以不写文件开头的下划线。

// 想导入 _initialize.scc
@import "_initialize“;

6. 混合器

定义重用样式，可以传参数。

6.1 @mixin

混合指令的用法是在 @mixin 后添加名称与样式，
比如名为 test 的混合通过下面的代码定义：

@mixin test {
	color: #eee;
	&:hover {
		color: blue;
	}
}

6.2 引用混合样式 @include

// Scss
.text {
	@include test;
}
// 编译后css
.test {
	color: #eee;
}
.test:hover {
	color: blue;
}

6.3 参数

在混合指令中，传参类似于方法传参。

// Scss
@mixin test($color, $width: 2px) { // 可设置默认值
	border: {
    	color: $color;
   		width: $width;
    	style: solid;
  	}
}
p {
	@include test(blue); // 简略写法，参数需按照顺序填写
	@include test($color: blue); // 添加参数名，可打乱顺序使用，方便阅读
}
// 编译后css
p {
	border-color: blue;
	border-width: 2px;
	border-style: solid;
}

6.4 参数变量

不能确定混合指令需要使用多少个参数，
这时可以使用参数变量 … 声明（写在参数的最后方）。

// Scss
@mixin test($shadows) {
	box-shadow: $shadows;
}
.shadows {
 	@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
// 编译后css
.shadowed {
 	box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

参数变量也可以用在引用混合指令的时候 (@include)，
将一串值列表中的值逐条作为参数引用：

// Scss
$values: 1px, #eee;
@mixin colors($size,$color) {
	border: {
		width: $size;
		color: $color;
		style: solid;
	}
}
.primary {
 	@include colors($values...);
}
// 编译后css
.primary {
	border-width: 1px;
	border-color: #eee;
	border-style: solid;
}

7. 控制指令

7.1 @if

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

7.2 @for

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

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

7.3 @each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，
而 <list> 是一连串的值，也就是值列表。

// Scss
@each $animal in puma, sea-slug, egret, salamander {
	.#{$animal}-icon {
		background-image: url('/images/#{$animal}.png');
	}
}
// 编译后css
.puma-icon { background-image: url('/images/puma.png'); }
.sea-slug-icon { background-image: url('/images/sea-slug.png'); }
.egret-icon { background-image: url('/images/egret.png'); }
.salamander-icon {	background-image: url('/images/salamander.png'); }

7.4 @while

@while 指令重复输出格式直到表达式返回结果为 false。

// Scss
$i: 6;
@while $i > 0 {
	.item-#{$i} { width: 2em * $i; }
	$i: $i - 2;
}
// 编译后css
.item-6 { width: 12em; }
.item-4 { width: 8em; }
.item-2 { width: 4em; }