SCSS基础

• ， 5 5 月 2021
• 作者 847954981@qq.com
• 前端学习, 我的编程之路

SCSS基础

SASS 是一款 CSS 预编译器，它定义了一种新的编程语言，为CSS 增加了一些编程的特性，开发者使用这种语言进行编码后，代码需要被编译成 CSS 才能被浏览器理解。

而Scss 其实是 Sass 3 为了兼容 CSS 引入的新语法。

SCSS变量

SassScript 最普遍的用法就是变量，变量以美元符号”$”开头，赋值方法与 CSS 属性的写法一样：

$width:10px;
使用变量：
#main{
  width:$width/2; //通过变量进行运算
}

除了简单的赋值，Sass中变量还可以定义类似数组的变量：

$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中就可以复用样式了。

复用的样式也可以传入参数，效果如下：

@mixin square($size) {
  width: $size;
  height: $size;
}

// 应用
.avatar {
  @include square(100px);
}