【问题标题】:Is there a SASS.js? Something like LESS.js?有 SASS.js 吗?像 LESS.js 之类的东西?
【发布时间】:2011-05-25 02:41:27
【问题描述】:

我以前用过LESS.js。它易于使用,类似于

<link rel="stylesheet/less" href="main.less" type="text/css">
<script src="less.js" type="text/javascript"></script>

我看到了SASS.js。我怎样才能以类似的方式使用它?解析 SASS 文件以在 HTML 中立即使用。似乎 SASS.js 更适合与 Node.js 一起使用?

var sass = require('sass')
sass.render('... string of sass ...')
// => '... string of css ...'

sass.collect('... string of sass ...')
// => { selectors: [...], variables: { ... }, mixins: { ... }}

【问题讨论】:

  • 生产环境是万恶之源,开发环境是sass watch
  • 我喜欢这个想法,因为“sass watch”的问题是您有时会在“sass watch”开始运行之前意外测试页面。使用 less.js,您可以加载页面并确保在看到页面时已编译 css。当然只在开发环境中。
  • 查看 SassMeister:sassmeister.com - 免费的在线 SASS 编译器
  • 确实有sass.js
  • @Hauleth sass 手表(比如少手表)有时不是一种选择。特别是当您的源文件由第三方构建/依赖项处理时,您只能在打包或部署 Web 应用程序并部署其缓慢时才能拥有完整的源文件。 (即...java web 应用程序)

标签: css sass less


【解决方案1】:

没有官方认可的 sass 或 scss 的 JavaScript 实现。我已经看到了一些正在进行中的实现,但目前没有一个我可以推荐使用。

不过,请注意几点:

  1. 既然可以为所有用户编译一次样式表,为什么还要让所有用户编译样式表。
  2. 如果禁用 JavaScript,您的网站会是什么样子。
  3. 如果您决定将来更改为服务器端实现,则必须相应更改所有模板。

因此,虽然开始需要更多设置,但我们(sass 核心团队)认为服务器端编译是最好的长期方法。同样,较少的开发人员更喜欢对生产样式表进行服务器端编译。

【讨论】:

  • 我的用例:开发 html+css 模板,将被放入 rails 项目。将 sass.js 用于 localhost 开发会很好,这样我就不必摆弄服务器的东西了。
  • 在很多情况下客户端编译很有用。例如,如果您想让用户使用他们的页面外观并只将他们选择的结果保存回服务器。
  • 我 100% 同意 chriseppstein(你为什么要让用户编译样式表),这里没有涉及,简单明了:开发。我想要缩小和压缩我部署的所有 js 代码,就像我的 css 一样。但是在开发过程中,访问代码而不是“编译”版本会有所帮助。我不确定我是否代表所有前端工程师,但我可以说我们中的很多人都使用我们的浏览器和编辑器作为开发阶段所需的唯一工具。我不想在开发过程中“编译”sass/scss。部署/CI/生产是另一回事
  • 在作者方面投入一些东西;我想考虑使用 SASS,但我不使用也不想使用 Ruby;因此,客户端解决方案总比没有解决方案更可取。用 Ruby 编写它仅限于 ruby​​ 用户使用;如果它是用 JS 编写的,它可以在客户端或服务器上使用(使用节点、经典 asp、asp.net 和可能的其他)。
  • JavaScript 实现也可以在服务器端与 node/rhino 等一起使用,而不必依赖于 ruby​​
【解决方案2】:

由于 visionmeda/sass.js 不再可用,而且 scss-js 已经有 2 年没有更新了,我可能会对 sass.js 感兴趣。它是使用 Emscripten 编译为 JavaScript 的 C++ 库 libsass(也被 node-sass 使用)。可以在sass.link.js 找到编译链接或内联在 html 中的 scss 样式表的实现。

使用 interactive playground 试用 sass.js

【讨论】:

  • 现在我们只需要一个 C++ 到 Ruby 的编译器,我们就可以统一代码库了。
  • sass.js 的大小 670KB(gzipped)与 less.js 143kb 大小(gzipped)相比似乎相当大。与less.js相比,我在sass.js中也看不到任何动态设置css变量的选项。当您拥有可访问的网站时,这非常有用
【解决方案3】:

正如我们所料,在C++上重写后,可以通过Emscripten用Javascript编译它。

这是浏览器版本:https://github.com/medialize/sass.js/

按照他们的建议,对于节点,您可以使用这个:https://github.com/sass/node-sass

【讨论】:

  • 这个和(当前接受的)答案的组合应该是实际接受的答案。
  • 我想在repl.it上写SASS,想出了一个解决方案在浏览器中编译: 1. 添加到 HTML 2. 找到所有 link[type="text/scss"] 元素并通过 AJAX 获取它们的 href 3. 使用 github.com/medialize/sass.js 编译 SASS -> CSS 4. 将链接替换为包含已编译 CSS 的 .结果:minesweeper.duzun.repl.co
【解决方案4】:

我刚刚发现了一个有趣的 Sass.js Playground。这些年来,有些事情可能发生了变化。看看这个:

http://medialize.github.io/playground.sass.js/

【讨论】:

    【解决方案5】:

    您绝对不应该让所有用户都编译样式表,但是 javascript 实现也可以在服务器上运行。我也在寻找一个 javascript sass 实现 - 在 node.js 应用程序中使用。这是 sass 团队正在考虑的事情吗?

    【讨论】:

    • 我不想在生产中使用 SASS.js!我希望能够部署开发机器而无需仅为 SASS 安装 ruby​​。开发完成后,我可以在任何机器上处理 SASS 并将结果 CSS 移动到生产服务器。
    • 我建议你看看在 Node 项目上使用 Stylus 而不是 sass。
    【解决方案6】:

    GitHubscss-js 上进行了尝试。但是,它是不完整的,并且在五个月内没有任何提交。

    【讨论】:

    • 这看起来像一个node js模块?最初的问题是关于客户端的实现,不是吗?
    【解决方案7】:

    为什么选择 LibSass

    虽然没有官方认可的 sass JavaScript 实现,但有一个官方的 Sass 引擎 C/C++ 端口,称为LibSass。因为 LibSass 是官方实现,所以最好选择在底层使用 LibSass 的 JavaScript 库。


    在服务器上

    对于在 Node.js 环境中运行的 JavaScript,有 Node-sass

    在底层,Node-sass 使用 LibSass 本身。


    在浏览器中

    对于在浏览器中运行的 JavaScript,有 Sass.js

    在底层,Sass.js 使用了一个 LibSass 版本(在我撰写本文时为 v3.3.6),该版本已通过 Emscripten 转换为 JavaScript。

    【讨论】:

      猜你喜欢
      • 2013-12-20
      • 2020-01-10
      • 1970-01-01
      • 2012-06-04
      • 1970-01-01
      • 2011-11-28
      • 1970-01-01
      • 2014-02-08
      相关资源
      最近更新 更多