css - 在 SASS 中重新排序我的代码？

Question

我现在正在尝试学习 SASS，但我无法准确想象我安排代码的方式有何不同。例如，我如何将以下代码安排到 SASS 中以避免重复？

a: link {color: #000; text-decoration: none;}<br/>
a: visited {color: #000; text-decoration: none;}<br/>
a: acive {color: #000; text-decoration: none;}

目前我能想到的唯一方法是添加两个具有以下适当属性的不同变量，但这对我来说仍然是重复的。我也考虑过 mixins，但不确定如何将它们合并到这个例子中。

��在此先感谢您的帮助。另外，据我所知，SASS 并不是为了提高网络性能，只是为了工作流程。它是否正确？我之所以这样说，是因为在处理时，代码最终在 CSS 上看起来是一样的。

Answer 1

重复的部分是 a 和样式 color: #000;文本装饰:无。

因此，使用 SASS，您可以嵌套样式，因此您只需编写一次 a。 :link 等的语法是&:link。

因此，你可以这样写:

a {
  &:link,
  &:visited,
  &:active {
    color: #000;
    text-decoration: none;
  }
}

或者如果您确实有变量，例如$black: #000; 你可以交换它们。color: $black.

它不仅适用于工作流程。使用 SASS(或 LESS)的主要优点之一是您可以单独组织您的 SASS 文件，例如_buttons.scss、_layout.scss 等，然后将它们全部导入(使用 @import)到一个 'theme.scss' 中，然后让 SASS 编译 'theme.scss'。

此编译的完成方式取决于您的设置，但 Compass(Compass.app 适合像我这样的 UI 爱好者)是一个非常受欢迎的选项。您最终得到的是浏览器只请求 1 个样式文件，而不是很多。