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

Question

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

因此，首先要做的是，我将所有css文件合并为单个文件。现在，我要遍历它，并尝试将它们分成不同的.scss文件。

我已经按照“ 7-1”模式对SASS文件夹的体系结构进行了布局，该模式由7个文件夹组成：摘要，基础，布局，模块，页面，主题和供应商。到目前为止一切顺利。

在将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文件。如果是这样，我该如何解决这样的问题，我只需要为单个页面定义一个不同的类？

Answer 1

尝试将.first-line类嵌套在两个文件中（嵌套时父对象将是diff）...因此，在编译为单个文件时，不会造成问题

Answer 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';
  }
}