Sass基础

简介

Sass是一种stylesheet 语言，可以被编译成CSS 。Sass允许你使用诸如variabels ，nested rules ，mixins ，functions等等语法，这些都将在本篇的接下来进行讲解。

因为之前一直学的后端，前端只是因为项目需要，简单的写过一些前端样式和界面 (javaScript,html,css) 。通过对Sass基础的了解后，感觉前端借助Sass具备了一点面向过程的感觉。

Variables

在原生的css中是没有变量这种说法的，当我们想要写一个样式时只能像这样：

css 复制代码

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

但是当我们在.scss中却可以借助变量来实现。

scss 复制代码

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

如果后端熟悉的你，是不是有点感觉了呢？😎

当Sass被处理时，将$font-stack和$primary-color放置到css中。

Nesting

当我们在写HTML 时，可能会注意到我们会写一些基于视觉层次结构 (visual hierarchy) 的代码。你或许注意到这是一个嵌套 (nest) 的结构，但是在css 中却不提供嵌套的写法。就变成下面这样，显而易见相当的麻烦。

css 复制代码

<nav>
    <ul></ul>
    <li></li>
</nav>

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}

基于这个原因 ➡️ Sass提供了解决方法，你可以在写css 的时候使用Sass语法来完成嵌套。可以看到ul，li被嵌套写入了nav中。

css 复制代码

nav {
  ul { margin: 0;  }

  li { display: inline-block; }
}

Modules

Sass提供了模块化支持，我们并不需要把所有的Sass 写在单个文件里。听上去似乎很像C语言里的.h文件🤔是吧？

下面给出一个例子

css 复制代码

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

我们可以通过在styles.scss中使用 @use关键字来引入_example.scss来达到复用的效果。

注意❗当一个.scss要被 @use到主样式表styles.scss时，那么给他取名的时候应该在最前面**+**一个_下划线。

当一个_aaa.scss文件没有被 @use到另一个不完整的scss文件 中，那么在执行sass --watch scss:css命令构建项目时就不会生成该文件为aaa.css。

css 复制代码

// _example.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'example';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

Mixins

在css 中写一些prefixes 时总是会有点无聊，这就是我大一时发誓"再也不碰前端"的原因🤣🤣🤣繁琐的prefixes写起来真的有够让人难受😿的。

但是Sass提供了Mixins 功能，这个功能就很像函数了。

@mixin指令允许我们定义一个可以在整个样式表中重复使用的样式。比如当我们遇到下面这种令人无聊🫤的情况时！

css 复制代码

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

通过 @mixin来写Mixins 然后再用 @include引入样式。

css 复制代码

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}

Extend/Inheritance

使用 @extend让你的样式分享到1个或者多个选择器上。我们来看一个简单Demo。

css 复制代码

.error, .success, .message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

可以看到.success和.error的样式和.warning几乎相同，这种情况下使用 @extend就非常好了。

相同的样式通过%stylesheet的格式命名，然后让选择器 @extend这些样式就🆗了。

css 复制代码

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

注意如果一个%stylesheet没有被extend的话就不会被编译生成。

Operators

Sass让数学运算在css 中成为可能。Sass提供了诸如+，-，*，math.div()，%的运算符号，至于代表什么运算我觉得没必要再说了。

css 复制代码

.container {
  display: flex;
}

article[role=main] {
  width: 62.5%;
}

aside[role=complementary] {
  width: 31.25%;
  margin-left: auto;
}

需要 @use sass:math。

scss 复制代码

@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

本篇参考Sass官方文档Sass: Sass Basics (sass-lang.com)

更多内容可移步🏃Sass: Documentation (sass-lang.com)