将 CSS 重写为 SASS 问题：两个 css 文件中的类定义相同答案

【问题标题】：Rewriting CSS to SASS problem: same class definition in two css files将 CSS 重写为 SASS 问题：两个 css 文件中的类定义相同
【发布时间】：2019-05-25 03:02:26
【问题描述】：

我被分配将现有的 CSS 代码重写为 SASS。这是我第一次接触 SASS，还是个初学者。

所以，我开始的第一件事是将所有 css 文件合并到一个文件中。现在我正在浏览它并尝试将内容分成不同的 .scss 文件。

我已经按照“7-1”模式布局了我的 SASS 文件夹的架构，它由 7 个文件夹组成：abstracts、base、layout、modules、pages、themes 和vendors。到目前为止一切顺利。

在将我的 CSS 分成不同文件的过程中，我遇到了一个问题，我在 google 上找不到答案：

假设我有 2 个 CSS 文件 - main.css 和 admin.css。在 main.css 中定义了一个类：

.first-line {
    padding-bottom:10px; 
    padding-left:30px;  
    padding-right:30px;
}

并且在admin.css中定义了一个同名的类

.first-line {
    padding-left:15x;  
    padding-right:10px;
}

正如我从 SASS 在线教程中了解到的（如果我错了，请纠正我），SASS 代码应该只生成一个 main.scss，我在其中导入所有粒子、模块等，并将其编译为单个 main.css 文件。如果是这样，我该如何解决这样的问题，我需要为单个页面定义不同的类？

【问题讨论】：

标签： css sass

【解决方案1】：

尝试在两个文件中嵌套该 .first-line 类（嵌套时父级将是差异）.....所以在编译成单个文件时，它不会导致问题

【讨论】：

【解决方案2】：

如果它是单页应用程序，则意味着您使用了 JavaScript。

您可以简单地为每个页面定义一个唯一的类并将该类分配给body 或html 元素（我更喜欢后者），并且在运行时您可以简单地动态设置页面类。这样，您可以定义 first-line 类并设置默认值并将其放入共享的 .scss 文件中，然后根据需要为每个单独的页面覆盖现有属性或向该类添加新属性。

例如，您可能希望像这样构造它。：

pages/common.scss:

first-line {
  padding-bottom:10px; 
  padding-left:30px;  
  padding-right:30px;
}

main.scss:

html {
  import 'pages/common';

  &.admin {
    @import 'pages/admin';
  }

  &.other-page {
    @import 'pages/other-page';
  }
}

【讨论】：