SCSS

SCSS

css预处理器一种

CSS预处理器一种专门的编程语言，它能使CSS更简洁、适应性更强、层级关系更加明显，并提高可读性、易于代码的维护。
有助于更好地组织管理样式文件，以及更高效地开发项目

CSS进行大规模的web开发时，容易造成选择器层叠导致代码严重混淆

SCSS对网页样式进行设计再编译成正常css文件
SCSS它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等功能，有助于我们更好的管理样式文件，提高开发效率

变量

为css引入了变量。你可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们
将样式写成变量，通过变量进行重复的引用 使用$符号来标识变量

$--color-theme: #0083ff;
$border: 1px solid #000;
$width: 100px;

.div1{
	color: $--color-theme;
}
.div2{
	color: $--color-theme;
}

/* 编译后 */
.div2{
	color: #0083ff;
}

嵌套

避免重复写选择器

<div class="search">
	<input class="search-input"/>
	<button class="search-button"></button>
</div>

/* css */
.search{}
.search .search-input{}
.search .search-button{}
.search .search-button:hover{}

/* scss */
.search{
	.search-input{}
	.search-button{
		&:hover{}
	}
}

父选择器的标识符&当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：

混合

在开发过程中，有大量的样式被重复的使用，可以通过scss的混合器@mixin实现代码复用

/* 清除浮动 */
@mixin clearFloat {
  &::after {
    display: block;
    content: '';
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
  }
}

.div{
	@include clearFloat;
}

导入

导入公共样式文件
scss的@import规则在生成css文件时就把相关文件导入进来
scss的@import规则并不需要指明被导入文件的全名。你可以省略.scss文件后缀

@import "@/assets/css/variable.scss";
@import "@/assets/css/mixin.scss";

运算

支持加减乘除运算

/* 清除浮动 */
.div {
  font-size: 10px + 4px;
  $width: 1000px;
  width: $width/2;
  height: (500px/2);
  margin-left: 5px + 8px/2px;
  color: #010203 + #040506;
}

函数

@function

条件

@if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

div {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { color: #000; }
}

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

$color: blue;
p {
  @if $type == qqq {
    color: red;
  } @else if $color == www {
    color: red;
  } @else if $color == eee {
    color: green;
  } @else {
    color: black;
  }
}

@for @each…