在构建时转换 CSS。我可以用 SASS 或 LESS 做到这一点吗？答案

【问题标题】：Transform CSS at build time. Can I do this with SASS or LESS?在构建时转换 CSS。我可以用 SASS 或 LESS 做到这一点吗？
【发布时间】：2015-10-26 21:50:34
【问题描述】：

我对 SASS 和 LESS 都是全新的（我知道这个概念，但从未使用过它们），但我知道 CSS。这个问题是关于想法或方向是好的，还是我应该寻找其他的？

我面临以下任务：我需要像往常一样创建 .CSS 文件除了所有选择器都必须在单个 div 中具有选择性（及其 id）。所以正常的重置应该是这样的：

/* ...*/
div#mydivid h1, div#mydivid h2, div#mydivid h3, div#mydivid h4, div#mydivid div#mydivid h5 {
    /* ...*/
}

instead of:
/* ...*/
h1, h2, h3, h4, h5 {
    /* ...*/
}
/* ...*/

显然我可以手动维护它，并重写我（和其他人的）标准 CCS-s，但我希望我仍然可以以标准方式编写我的 CSS（并使用现有的），并且构建时间为预处理器生成转换后的，我将实际链接到我的页面。

这可能吗？有人有更好的主意吗？（我认为这无关紧要，但这是 VS 2013 和 C#/ASP.NET）

【问题讨论】：

听起来是个奇怪的要求。 CSS 范围还没有真正有用，但这看起来像是一个用例：developer.mozilla.org/en-US/docs/Web/CSS/%3Ascope & davidwalsh.name/scoped-css
你想做什么？你在这里问什么会导致 CSS 臃肿。
是的，我知道。这不是一个普通的网站。这是一个或多个常用网站中的一项特殊任务，不得干扰现有的任何内容
您还可以使用iframe 封装网站的特定部分（例如广告横幅）
不要在同一个问题中询问多种不相关的语言：选择一种或另一种。此外，您需要在提出问题之前对相关语言进行研究。

标签： css sass less

【解决方案1】：

使用 Less 或 SASS/SCSS，您可以将整个样式表包装到 div 中。但是SASS has a feature to break out of any wrappers called @at-root。

您甚至可以包装包含以获取任何样式表 (SCSS) 的包装器：

div#mydivid {
    @include _layout.scss
    @include _module1.scss
}

/* or */
div#mydivid {
    #{headings(1,6)} {
        color: #333;
    }
}

后者导致：

div#mydivid h1,
div#mydivid h2,
div#mydivid h3,
div#mydivid h4,
div#mydivid h5,
div#mydivid h6 {
    color: #333;
}

【讨论】：