Question

我想知道是否有办法在单个文件中“分离”部分/部分CSS，使其更有条理，更具可读性。例如，当我们为元素设置一些样式时，它看起来像： Nodes (plus and minus icon) that can be closed/opened

所以，我想知道的是，有一种方法可以创建像节点或'区域'之类的东西来关闭/打开CSS的部分，例如：想要在单个部分中分离我用于DIV的所有样式，另一部分的按钮等等。然后我可以专门关闭/打开这些部分。

有可能吗？我知道我可以在很多文件中分离CSS，但我想把它放在一个文件中。

Answer 1

显然，Visual Studio已经为CSS支持此功能，如Steven Follis' blog上所示。

您可以添加定义区域的特定注释。

语法为：

/*#region Description of the region*/

.your.css.goes.here {
}

/*#endregion*/

其他编辑当然可以支持类似的语法，尽管很多人都不会。 CSS没有区域的原生语法，因此这些注释在CSS中没有任何语法价值，只是由这个特定的IDE使用。

但除了使用区域之外，您还可以使用单独的文件来组织代码并使用脚本将它们连接在一起。这可以是一个简单的脚本，也可以是其他人建议的更高级的预处理器，但一般来说，您可以以更灵活的方式组织CSS，并且在页面中仍然只有一个（最好是最小化的）文件。

如果您开始使用这些，我可以根据个人经验推荐SCSS。它比CSS更接近CSS。我之前使用过LESS，但我认为它的一些功能缺乏或只是含糊不清。 SCSS的逻辑设计更为合理。

Answer 2

简短的回答是否定的。

仅在CSS上我不认为你可以拥有你想要的东西（除非你对单独的部分的评论感到满意）。但是有一些预处理器，如SASS / SCSS或LESS，旨在能够嵌套你的样式并以这种方式组织它们。

例如，使用SCSS，您可以使用此CSS：

.a {
  /*some styles*/
}
.a.b {
  /*some styles*/
}
.a .c {
  /*some styles*/
}

看起来像这样：

.a {
  /*some styles*/
  &.b {
    /*some styles*/
  }

  .c {
    /*some styles*/
  }
}

但是为了能够使用它，您需要将此代码预编译为CSS并在HTML页面上引用它。

您可以在自己的网站上看到更多Sass/Scss和Less。

Answer 3

据我所知，你不能在CSS，LESS或SASS中使用任何类型的区域。

我建议使用LESS和这种方法：

<强> main.less

@import "header.less";
@import "footer.less";

<强> header.less

.headerContainer { ... }
.header { ... }
.title { ... }

<强> footer.less

.footerContainer { ... }
.footer { ... }
.contact { ... }

我知道你说你不想要单独的文件，但这是保持代码正确的一种非常好的方法，但它仍然会编译成一个main.css文件。

第二种选择是简单的评论。

/****** Header ***********/

.headerContainer { ... }
.header { ... }
.title { ... }


/****** Footer ***********/

.footerContainer { ... }
.footer { ... }
.contact { ... }

但这不可折叠。

或者第三个也是最差的选项......因为您提供的两个示例是将所有div和所有button分开。

div {
  &.header { ... }
  &.headContainer { ... }
}

button {
  &.submit { ... }
  &.cancel { ... }
  &.whatever { .. }
}

我真的不推荐这个选项。看起来很笨重。

CSS将代码

3 个答案: