- ， 5 5月 2021
- 作者 847954981@qq.com
- 前端学习, 我的编程之路
SCSS基础
SASS 是一款 CSS 预编译器，它定义了一种新的编程语言，为CSS 增加了一些编程的特性，开发者使用这种语言进行编码后，代码需要被编译成 CSS 才能被浏览器理解。
而Scss 其实是 Sass 3 为了兼容 CSS 引入的新语法。
SCSS变量
SassScript 最普遍的用法就是变量，变量以美元符号”$”开头，赋值方法与 CSS 属性的写法一样：
代码语言：javascript复制$width:10px;
使用变量：
#main{
width:$width/2; //通过变量进行运算
}除了简单的赋值，Sass中变量还可以定义类似数组的变量：
代码语言：javascript复制$animals: puppy kitty chick;插值法
在SCSS中通过#{ }语法可以将变量插入任意位置：
$name: "mail";
$top-or-bottom: "top";
$left-or-right: "left";
.icon-#{$name} {
background-image: url("/icons/#{$name}.svg");
position: absolute;
#{$top-or-bottom}: 0;
#{$left-or-right}: 0;
}嵌套规则：
与CSS不同，SCSS的语法呈现的是嵌套规则，即将外层的样式作为父选择器，子标签写在父标签里面来更直观地表现出样式结构。
父选择器 &
在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，可以用 & 代表嵌套规则外层的父选择器，比如：
或者特殊一点的用法：
复用：mixin/include
在使用中，我们可能存在需要复用的样式，如flex：left等等
@mixin square {
width: 100px;
height: 100px;
}
// 应用：
.user-avatar {
@include square;
}
.admin-avatar {
@include square;
}@mixin定义复用样式
@include应用复用样式
这样在scss中就可以复用样式了。
复用的样式也可以传入参数，效果如下：
代码语言：javascript复制@mixin square($size) {
width: $size;
height: $size;
}
// 应用
.avatar {
@include square(100px);
}
