2022.7.27 - Sass的注意点以及几个常用语法

安装 Sass 后，您可以使用 命令将 Sass 编译为CSS 。

例如，sass input.scss output.css从您的终端运行将获取一个 Sass 文件input.scss，并将该文件编译为output.css.
您还可以使用该 --watch标志查看单个文件或目录。watch 标志告诉 Sass 监视源文件的更改，并在每次保存 Sass 时重新编译CSS 。如果您想查看（而不是手动构建）您的input.scss文件，您只需将 watch 标志添加到您的命令中，如下所示：

sass --watch input.scss output.css

您可以通过使用文件夹路径作为输入和输出并用冒号分隔它们来监视和输出到目录。在这个例子中：

sass --watch app/sass:public/stylesheets

Sass 会监视文件夹中所有文件的更改，并将CSSapp/sass编译到 文件夹中。public/stylesheets

Sass 有两种语法！

SCSS语法 ( ) 是最.scss常用的。它是CSS的超集，这意味着所有有效的CSS也是有效的SCSS
。 缩进语法 ( .sass) 更不寻常：它使用缩进而不是花括号来嵌套语句，并使用换行符而不是分号来分隔它们和使用(stylus差不多)。我们所有的示例都可以在这两种语法中使用。

变量

Sass 使用该$ 符号使某些东西成为变量

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

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

部分文件

您可以创建包含小片段的部分 Sass 文件CSS可以包含在其他 Sass 文件中。这是模块化你的好方法CSS并帮助使事情更容易维护。partial 是一个以下划线开头的 Sass 文件。你可以把它命名为_partial.scss下划线让 Sass 知道该文件只是一个部分文件，不应将其生成为CSS文件。Sass partials 与@use 规则

定义模块

// _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 */ 
/*用use引入的CSS代码是默认导入的，变量是按需引入的*/
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}
.inverse {
  background-color: #333;
  color: white;
}

styles.scss文件中使用。当您使用文件时，您不需要包含文件扩展名。Sass 很聪明，会为您解决。

混入

CSS中的一些东西写起来有点乏味，尤其是CSS3 和存在的许多供应商前缀。一个 mixin 可以让你创建一组你想要在你的站点中重用的 CSS声明。它有助于保持你的 Sass 非常干燥。您甚至可以传入值以使您的 mixin 更加灵活。这是 theme.

// theme.scss
@mixin theme($theme: DarkGray) {
  @if $theme == 'DarkGray' {
    background: $theme;
    box-shadow: 0 0 1px rgba($theme, 0.25);
    color: #fff;
  } @else {
    background: $theme;
    box-shadow: 0 0 1px rgba($theme, 0.25);
    color: rgb(94, 236, 244);
  }
}

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

/* theme.css */
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: rgb(94, 236, 244);
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: rgb(94, 236, 244);
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: rgb(94, 236, 244);
}

/*# sourceMappingURL=top.css.map */

要创建一个 mixin，你可以使用@mixin指令并为其命名. 我们已经命名了我们的 mixin theme。我们还在 $theme括号内使用变量，所以我们可以传入theme我们想要的任何东西。创建 mixin 后，您可以将其用作CSS 声明，开头@include后跟 mixin 的名称。

扩展/继承

使用@extend允许您从一个选择器共享一组CSS属性到另一个选择器。在我们的示例中，我们将使用另一个与扩展占位符类密切相关的功能来创建一系列简单的错误、警告和成功消息传递。占位符类是一种特殊类型的类，仅在扩展时打印，并且可以帮助保持编译CSS干净整洁。

/* 这个CSS会打印出来，因为%message-shared消息共享被扩展了。 */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// 这个CSS不会打印出来，因为%equal-heights永远不会被扩展。
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

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

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

/*编译后CSS*/ 
.warning, .nice {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.warning {
  border-color: yellow;
}

上面的代码所做的是告诉.message, .success,.error和.warning表现得像%message-shared. 这意味着任何%message-shared出现的地方，.message, .success, .error, & .warning也会出现。魔术发生在生成的CSS中，其中每个类都将获得与%message-shared. 这可以帮助您避免在HTML 元素上编写多个类名。

除了 Sass 中的占位符类之外，您还可以扩展大多数简单的CSS选择器，但使用占位符是确保您没有扩展嵌套在样式中其他地方的类的最简单方法，这可能会导致 CSS 中出现意外的选择器。请注意，不会生成CSS in ，因为从未扩展。%equal-heights``%equal-heights

标签：scss,27,Sass,color,theme,2022.7,message,CSS
来源： https://www.cnblogs.com/yehuda/p/16525936.html