SCSS快速上手(复习自用)

一、 全局安装

`npm install -g sass`

二、理论

1. 变量

$变量名: 对应属性值

2.嵌套

父属性名{
	子属性名1{
	bgc:xxx;
	padding:0;	
	}
	子属性名2{
	bgc:yyy;
	padding:1;
	}
	子属性名3{
	bgc:zzz;
	padding:2;
	}
}

3.分片

• 把SCSS文件按功能、模块划分
• 每片文件名用_开头
• 单独分片文件无法生成css文件
• Dart Sass用@use 、其他用@import，引入不需要带后缀和_

//在_base.scss文件中
$bgc: #000;
$color: #333
.body{
   bgc: $bgc;
   color:$color;
}

//在a.scss文件中
@import 'base' //或@use 'base'
.test{
   bgc: base.$bgc;
   color:while
}

//生成的css
body{
   bgc: #000;
   color: #333;
}

.test{
   bgc:#000;
   color:white;
}

4.mixin

	@mixin theme($theme：Dark){
	bgc:$theme;
	rgba($theme,.25);
	.info{
		@include theme;
	}
	.alert{
		@include theme($theme:DarkRed)
	}
}

5. 继承

• 用%声明一个基类
• extend 基类名 来继承基类的属性
• 没被继承的基类不会被css生成

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.message {
  @extend %message-shared;
}

6.运算

• 通过引入@use "sass:math" 可以在scss中进行运算
• 支持的包括:+ - * math.div() %

   @use "sass:math";
   .container{
   	display:flex;
   	width:math.div(300px,960px)*100%;
   }

三、使用

终端输入sass [scss文件路径] [生成的文件名] 即可生成css文件