要点
这些 css 语言(我更喜欢,但是 frameworks 或 extensions)的意义在于将您的工作流程整合到您的 css 中,从而节省您的时间。怎么样?
让我们想象一下,你有一个带有 some-long-class-to-be-sure-what-it-does 类的 div,而那个 div 有 h3 child、p child、.some-other-class child 和其他东西 (span child)。
现在,如果您想为所有这些设置样式,您必须执行以下操作:
.some-long-class-to-be-sure-what-it-does { width: 120px; }
.some-long-class-to-be-sure-what-it-does h3 { font-size: 20px; }
.some-long-class-to-be-sure-what-it-does p { margin-bottom: 30px; }
.some-long-class-to-be-sure-what-it-does .some-other-class { width: 120px; }
通知浏览器(即)只有h3 的.some-long-class-to-be-sure-what-it-does 有font-size: 20px;。
使用这些解析器/框架中的大多数,您手头有(仍然只是一个示例)嵌套:
.some-long-class-to-be-sure-what-it-does {
width: 120px;
@ h3 { font-size: 20px; }
@ p {
margin-bottom: 30px;
@ .subclass { color: red; }
}
@ .some-other-class { width: 120px; }
}
这让你的 css 更小,从长远来看更容易编辑(这是主观的,你可能会发现它更难处理)。
此外,除了嵌套之外,它们还以其他方式扩展 css:常量(分配一些东西给 @col1 并在三个地方使用它,然后你决定,你需要更轻的东西...... bam!你编辑一次),标志,输出格式等等,所以我想你会找到自己的使用方式。
如何使用它
大多数情况下,您不会将其安装在您的 PC 上,而是安装在您的服务器上。代替经典的 CSS,您将站点与已安装的 CSS 解析器/框架/语言链接起来,在每次调用时都会计算(或将使用缓存版本,如果可用)正常 css - 但是当您编辑它时,您会编辑 css 的简化/扩展版本.
编辑:您不会以用户身份将其安装到您的 PC 上,但您需要将其安装到您的开发环境中。如果它是您 PC 上的 localhost,那么是的,您将其安装在您的 PC 中 - 但不是作为用户,而是在您本地运行的服务器上。
鲁比?
我认为,对于 ruby,这些对 css 的扩展是最先出现的。但是现在你也可以找到它用于其他语言 - 作为 PHP 程序员,我找到了 Anthony Short 的 CSScaffold:
github 很少描述
http://github.com/anthonyshort/csscaffold
scaffold 的网站,目前离线
http://scaffoldframework.com/
编辑:它有什么用?
在该示例中,您会看到使用多个常量进行计数。这样,如果您将 !sidebar 从 200px 更改为 300px,则 css 的每个部分都会使用它重新计算。每个地方都提到了这个常数,无论是单独还是在计算中。
另一个:
.NET 中的 SASS - Better CSS in .NET?
.NET 中的较少 css - http://www.dotlesscss.com/