【问题标题】:How to use these ruby based CSS stylsheet frameworks languages?如何使用这些基于 ruby​​ 的 CSS 样式表框架语言?
【发布时间】:2011-02-09 03:18:33
【问题描述】:

我阅读了许多需要 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-on-rails css xhtml rubygems


    【解决方案1】:

    要点

    这些 css 语言(我更喜欢,但是 frameworksextensions)的意义在于将您的工作流程整合到您的 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-doesfont-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/

    编辑:它有什么用?

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

    另一个:

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

    【讨论】:

    • @Adam - +1 感谢您的解释。看起来比以通常的风格编写 css 更复杂。也需要其他语言的支持:ruby, php
    • @metal.. - 是的,看起来可能是这样。但是从我的 POV(作为一个每周花费 20 多个小时只编辑 css 的 web 开发人员)来看,我在这些框架中看到的东西很少我经常想到 - “如果 css 有 此功能”跨度>
    • @Adam - “你没有在你的电脑上安装它”但我刚刚找到了这个教程net.tutsplus.com/tutorials/html-css-techniques/… 它说要在电脑上安装 ruby​​。
    • @Adam - 你的意思是 Anthony Short 的 CSScaffold 不需要安装 ruby​​。这些天我主要使用 ASP.NET 项目,所以我认为没有可用的解决方案。以及这个 Sass 工具有什么用处sass-lang.com/try.html
    • 这是一个 PHP 版本的 LESS - leafo.net/lessphp 和 Wordpress 插件 wordpress.org/extend/plugins/wp-less
    【解决方案2】:

    你的电脑上不需要任何东西,这些应该安装在你的网络服务器上,你必须根据框架的规则编写 css 代码。

    一旦您将 web 应用程序部署到服务器时执行此操作,这些框架就会编译您的样式并将它们转换为传统样式表。

    据我所知,这主要是他们所做的。

    思南。

    【讨论】:

    • 所以如果我的网络服务器没有安装 ruby​​,那么我不应该浪费时间去使用和学习这些语言。
    • 不错的答案@Adam Kiss,@metal-gear-solid 是的,您的网络服务器必须能够在您的情况下运行框架,它必须有 ruby​​,这里还有一个在 Python 上运行的: sandbox.pocoo.org/clevercss
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-12-12
    • 2013-08-21
    • 2011-10-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多