将CSS重写为SASS问题:两个CSS文件中的类别定义

Question

我被分配将现有的CSS代码重写为SASS。这是我第一次对Sass的经历，仍然是初学者。

所以，我首先开始的第一件事，我将所有CSS文件合并到一个文件中。现在，我正在仔细研究它，并尝试将内容分为不同的.scss文件。

我根据" 7-1"模式将我的Sass文件夹的体系结构布局，该模式由7个文件夹组成：摘要，基础，布局，模块，页面，主题和供应商。到目前为止还不错。

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

说我有2个CSS文件-Main.css和Admin.css。css中有一个定义的类：

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

和具有相同名称的类

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

正如我从在线的SASS教程中了解的那样(如果我错了，请纠正我(，Sass代码应仅导致一个Main.scs。我导入所有粒子，模块等，并且将其汇编为单个main.cs.css.css file。如果是这样，我该如何解决这样的问题，在其中我需要一个类别的类别的定义？

Answer 1

尝试在两个文件中嵌套。/p>

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