我想知道是否有办法在单个文件中“分离”部分/部分CSS,使其更有条理,更具可读性。例如,当我们为元素设置一些样式时,它看起来像: Nodes (plus and minus icon) that can be closed/opened
所以,我想知道的是,有一种方法可以创建像节点或'区域'之类的东西来关闭/打开CSS的部分,例如:想要在单个部分中分离我用于DIV的所有样式,另一部分的按钮等等。然后我可以专门关闭/打开这些部分。
有可能吗? 我知道我可以在很多文件中分离CSS,但我想把它放在一个文件中。
答案 0 :(得分:3)
显然,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的逻辑设计更为合理。
答案 1 :(得分:1)
简短的回答是否定的。
仅在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页面上引用它。
答案 2 :(得分:0)
据我所知,你不能在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 { .. }
}
我真的不推荐这个选项。看起来很笨重。