ruby-on-rails - 如何使用这些基于 ruby​​ 的 CSS 样式表框架语言？

Question

我读到了许多需要 ruby​​ 的 CSS 相关语言和工具。

• 这些的目的是什么语言和工具这些如何保存时间并改进我们的 CSS 编码。
• 在ruby语言中的作用是什么这些语言和工具。
• 我需要安装和学习吗ruby 语言来使用这些语言和工具。
• 我需要安装 ruby​​ 吗网站所在的网络服务器主持。

我说的是这些语言

http://lesscss.org/

http://sass-lang.com/

http://compass-style.org/

这里提到了一些:

http://www.ruby-toolbox.com/categories/css_frameworks.html

我在 Windows XP PC 上，我如何使用这些基于 Ruby 的语言，哪些是首选？我不懂 ruby 语言。

Answer 1

重点

CSS 的这些语言(我更喜欢框架或扩展)的要点是将您的工作流合并到您的 CSS 中，从而节省您的时间。怎么办？

让我们想象一下，你有一个 div 类 some-long-class-to-be-sure-what-it-does 并且那个 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; }

通知浏览器关于(即)只有 .some-long-class-to-be-sure-what-it-does 的 h3 有 font -尺寸: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 并在三个地方使用它，然后你决定，你需要更轻的东西......砰!你编辑一次)，标志，输出格式等等，所以我想您会找到使用它的方式。

如何使用它

大多数情况下，您不会将其安装在您的 PC 上，而是安装在您的服务器上。您可以使用已安装的 CSS 解析器/框架/语言链接您的站点，而不是经典的 CSS，它在每次调用时都会计算(或者如果可用的话将使用缓存版本)普通 css - 但是当您编辑它时，您编辑的是 css 的简化/扩展版本.

编辑:您无需以用户身份将其安装到您的 PC 上，但您需要将其安装到您的开发环境中。如果它是您 PC 上的本地主机，那么是的，您将它安装在您的 PC 中 - 但不是作为用户，而是在您本地运行的服务器上。

ruby ？

我认为，对于 ruby​​，首先是这些对 css 的扩展。但现在您也可以找到其他语言的它 - 作为 PHP 程序员，我找到了 Anthony Short 的 CSScaffold:

几乎没有描述的github
http://github.com/anthonyshort/csscaffold

脚手架的网站，目前离线
http://scaffoldframework.com/

编辑:它有什么用？

在那个 try 示例中，您会看到使用多个常量进行计数。这样，如果您将 !sidebar 从 200px 更改为 300px，您的 css 的每个部分都会用它重新计算。每个地方都提到了这个常数，无论是单独提到还是在计算中。

另一个:

.NET 中的 SASS - Better CSS in .NET?
.NET 中的 css 更少 - http://www.dotlesscss.com/