📌  相关文章
📜  在 Sass 中继承一个类到另一个文件

📅  最后修改于: 2021-09-01 01:53:00             🧑  作者: Mango

Sass 或语法上很棒的样式表是一种 CSS 预处理器，它赋予 CSS 如此强大的功能，这是普通 CSS 所不具备的。它提供了使用表达式、变量、嵌套、mixins(函数的 Sass 形式)、继承等的能力。其他著名的 CSS 预处理器示例包括 Less 和 Stylus，但 Sass 更受欢迎。

Sass 包含两种语法：

  • SCSS(Sassy CSS)
  • 萨斯

SCSS 或时髦的 CSS

SCSS 使用.scss语法，它与常规 CSS 非常相似。 SCSS 完全符合 CSS。 SCSS 可以被假定为 CSS 的超集。任何有效的 CSS 样式都是有效的 SCSS。由于与 CSS 的相似性，上手时间较短。

例子： 

$heading-color: #e94e1b; //Using Sass Variables
h4 {
    color: $heading-color;
}

缩进语法或 Sass

这是 Sass 的原始语法。它使用.sass文件扩展名。它使用了 Sass 的所有功能，但不使用花括号，而是使用缩进来描述文档的格式。它不完全符合 CSS。

例子

$heading-color: #e94e1b; 
h4
  color: $heading-color

@import 和 @use：

单个 CSS 文件最终会变大，维护大型样式表将是一项艰巨的工作。因此，如果有一种方法可以将类分成各种文件，那就更容易了。所以只能导入必要的文件。这样样式表会更小，维护也会更容易。样式表还将维护DRY(不要重复自己)规则。

方法 1：要将另一个样式表导入到样式表中，使用@import关键字。要导入的 CSS 或 Scss 文件可以位于同一文件夹或 Internet 上的其他位置。

句法： 

@import 'file-name';
@import url('url of the stylesheet')

例子

@import './buttons.scss';
@import url('https://example.com/css/breadcrumbs.scss');

编译的 CSS

这是将 CSS 文件导入另一个文件的可行解决方案。但是 Sass 已经弃用了@import并且最终会删除它。 Sass 现在不再使用@import ，而是支持@use ，因为 CSS 也有@import功能，并且使用@import还有其他一些主要缺点，这是另一篇文章的主题。

方法 2： @use必须与命名空间一起使用。假设驻留在同一目录中的文件按钮有一个名为primary-color的颜色变量。要在其他文件中使用该变量，将遵循以下语法。

句法： 

@use 'file-name';

例子： 

@use 'buttons';
  
.card {
    color: buttons.$primary-color;
}

编译的CSS： 

.btn-large {
  border-radius: 3rem;
  border: 4px solid black;
  background: black;
  color: white;
  width: 20rem;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

使用命名空间是因为@import中存在命名冲突。如果两个导入的文件包含两个不同的同名变量，@ import将强制使用最后一个导入文件中定义的变量值。

@use还提供了使用用户定义的命名空间的能力。

例子： 

@use 'buttons' as btn;
  
.card {
    color: btn.$primary-color;
}

as关键字允许定义自定义命名空间。

这里需要注意的重要一点是，VS Code 上的 Live Sass 编译器基于LibSass，而LibSass目前不支持@use函数。所以最好使用Dart Sass ，它通常是第一个实现新功能的。安装Dart Sass很容易。这里的这篇文章描述了这些步骤。

从其他类继承样式

上一节简要介绍了如何使用@import和@use运算符导入和使用存储在另一个文件中的样式。要从另一个类或 id 继承样式，请使用@extend关键字。让我们看一个例子，假设按钮类有一个颜色：绿色；和不透明度：0.5；属性，现在要将这些样式继承到另一个类中，将使用@extend关键字。

例子：

button.scss 文件

/* buttons.scss file */
.btn {
  color: red;
  opacity: 0.5;
}

style.scss 文件

/*style.scss file
where the style is to be inherited */
@use 'buttons';
  
.new-btn {
  @extend .btn;
}

因此，上面的代码将从.btn类继承属性到.new-btn类。

现在，让我们看看编译后的 CSS 文件。

编译的 CSS 

/* style.css */
.btn, .new-btn {
  color: red;
  opacity: 0.5;
}

这里要注意的一件事是.btn类的样式不会被复制到new-btn类，而是用逗号分隔原始选择器，从而减少重复代码。

结论

所以，在本文中，对 Sass 中使用的@include 、 @use和@extend关键字进行了简要介绍。也可以使用mixin来实现继承。要了解 mixin，您可以查看这篇文章。虽然如果样式不带任何参数，最好使用@extend方法。