GipBaby270's Blog

Fighting for BAT!

0%

Sass基础

发表于 分类于
本文字数： 5k 阅读时长 ≈ 5 分钟

Sass基础

预处理

CSS 本身可能很有趣，但是样式表正变得越来越大、 越来越复杂、越来越难以维护。这就是预处理可以提供帮助的地方。 Sass 为你提供了 CSS 中还不存在的特性，例如变量、 嵌套、混合、继承和其它实用的功能，让编写 CSS 代码变得再次有趣。

一旦开始对Sass进行修补，它将获取经过预处理的Sass文件，并将其另存为可在网站中使用的普通CSS文件。

最直接的方式就是在命令行中调用 sass 命令。安装 Sass 之后，你就可以用 sass 命令将 Sass 编译为 CSS 了。 首先你需要告诉 Sass 从哪个文件开始构建，以及将生成的 CSS 输出到哪里。 例如，在命令行中执行 sass input.scss output.css 命令， 将会把 Sass 文件 input.scss 编译输出为 output.css。

你还可以利用 --watch 参数来监视单个文件或目录。 --watch 参数告诉 Sass 监听源文件的变化， 并在每次保存 Sass 文件时重新编译为 CSS。如果你只是想监视 （而不是手动构建）input.scss 文件，你只需在 sass 命令后面添加 --watch 参数即可，如下：

1
sass --watch input.scss output.css

可以使用文件夹路径作为输入和输出， 并使用冒号分隔它们，来监听文件并输出到目录。例如:

1
sass --watch app/sass:public/stylesheets

Sass 将会监听 app/sass 目录下所有文件的变动，并 编译 CSS 到 public/stylesheets 目录下。

变量

变量是存储信息并在将来重复利用的一种方式，在整个样式表中都可访问。 你可以在变量中存储颜色、字体 或任何 CSS 值，并在将来重复利用。Sass 使用 $ 符号 作为变量的标志。例如：

SCSS 语法

1
2
3
4
5
6
7
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

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

CSS 输出

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

当Sass代码被处理时，将处理我们为定义的变量$font-stack，$primary-color并输出正常CSS，并将变量值放置在CSS中。当使用品牌色彩并在整个站点中保持色彩一致时，此功能可能非常强大。

嵌套

在编写 HTML 时，您可能已经注意到它有一个清晰的嵌套和可视化层次结构。 而 CSS 则没有。

Sass 允许您嵌套 CSS 选择器，嵌套方式 与 HTML 的视觉层次结构相同。请注意，过度嵌套的规则 将导致过度限定的 CSS，这些 CSS 可能很难维护，并且 通常被认为是不好的做法。

理解了这一点，下面就来看一个典型的网站导航的样式 示例：

SASS语法

1
2
3
4
5
6
7
8
9
10
11
12
13
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

SCSS 语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS 输出

1
2
3
4
5
6
7
8
9
10
11
12
13
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

你将注意到 ul、li 和 a 选择器嵌套在 nav 选择器中。这是组织 CSS 并使其更具可读性的 好方法。

片段

您可以创建部分Sass文件，其中包含一些CSS片段 ，您可以在其他Sass文件中包含这些片段。这是模块化CSS并帮助使事情易于维护的好方法。部分文件是一个Sass文件，名称前带有一个下划线。您可以将其命名为_partial.scss。下划线让Sass知道该文件只是部分文件，不应将其生成为CSS文件。Sass局部函数与@use 规则一起使用。

模组

您不必将所有Sass都写在一个文件中。您可以根据需要将其拆分@use。该规则将另一个Sass文件作为模块加载，这意味着您可以在Sass文件中使用基于文件名的命名空间引用其变量，mixins和函数。使用文件还将在编译输出中包含它生成的CSS！

SCSS 语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
// styles.scss
@use 'base';

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

CSS 输出

1
2
3
4
5
6
7
8
9
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

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

注意我们@use 'base';在styles.scss文件中使用。使用文件时，无需包括文件扩展名。Sass很聪明，会为您解决问题。

混合（Mixins）

CSS中的某些内容编写起来有些繁琐，尤其是使用CSS3 和存在的许多供应商前缀时。使用mixin，您可以创建要在整个站点中重复使用的CSS声明组 。您甚至可以传入值以使混入更加灵活。mixin的一个很好用法是用于供应商前缀。这是的示例 transform。

SCSS 语法

1
2
3
4
5
6
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

CSS 输出

1
2
3
4
5
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

要创建一个mixin，您可以使用@mixin指令并为其命名。我们将其命名为mixin transform。我们还在$property括号内使用了变量 ，因此我们可以传递任何所需的变换。创建混入之后，您可以将其用作CSS 声明@include，以混入的名称开头。

扩展/继承

这是Sass最有用的功能之一。使用@extend使您可以将一组CSS属性从一个选择器共享到另一个选择器。它有助于使Sass保持非常干燥。在我们的示例中，我们将使用扩展，占位符类一起使用的另一个功能，为错误，警告和成功创建一系列简单的消息传递。占位符类是一种特殊的类，仅在扩展时才打印，并且可以帮助保持编译后的CSS整洁。

SCSS 语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 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;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

css语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

什么上面的代码的作用是告诉.message，.success，.error，和.warning做人一样%message-shared。这意味着任何地方%message-shared显示出来，.message，.success，.error，和 .warning也会这样做的。魔术发生在生成的CSS中，其中每个类将获得与相同的CSS属性%message-shared。这可以帮助您避免在HTML 元素上编写多个类名。

除了Sass中的占位符类之外，您还可以扩展最简单的CSS选择器，但是使用占位符是确保不扩展嵌套在样式中其他位置的类的最简单方法，这会导致CSS中意外的选择器 。

请注意，不会生成CSS in %equal-heights，因为%equal-heights它不会被扩展。

操作符

在 CSS 中经常需要做数学计算。Sass 支持一些标准的 数学运算符，例如 +、-、*、/ 和 %。在下面的例子中，我们 将做一些简单的数学运算来计算出 aside & article 的宽度。

###SCSS 语法

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

CSS 输出

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  width: 100%;
}

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

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

上述代码创建了一个非常简单的流式网格，以 960px 作为基准。Sass 中的操作符 让我们可以做一些比如将像素值转换为百分比的操作， 并且使用起来非常简单。

坚持原创技术分享，您的支持将鼓励我继续分享！