小编war*_*art的帖子

使用指南针和Sass购物主题

有没有人有使用Compass和Sass开发Shopify主题的工作流程?我非常接近,我只需要弄清楚如何不在CSS液体标签上制作Sass barf.

这是我得到的:

  • 目录中的sass/compass项目(例如:"/ newwebsite /)
  • 包含我的Shopify主题的子目录("/ newwebsite/newwebsite-theme /")
  • 一个Compass config.rb,它将css,_dir images_dir和javascripts_dir指向它们的资产文件夹("/ newwebsite/newwebsite-theme/assets /")
  • 指南针观看
  • shopify_theme gem也会观看,上传主题文件到shopify(https://github.com/Shopify/shopify_theme)
  • EDIT Sass插值(见下面的anser)
  • 编辑指南针回调以重命名为.css.liquid

问题:指南针barf当你需要使用Shopify的液体模板标签时,例如背景图片 - 例如,背景:url("{{"splash-1.jpg"| asset_url}}")

有谁知道如何指示Compass/Sass吐出液体模板标签,因为它们进入CSS?如果我有,那么我有一个可靠的工作流程,在本地编辑Sass,并在shopify商店之后立即实现更改.

谢谢

编辑:通过使用Hopper在Sass中的液体标签的答案,并将Compass输出.css文件重命名为.css.liquid,我现在有一个瞬间工作流程,用于设计Compass和Sass的Shopify主题!以下是config.rb中Compass回调的代码:

on_stylesheet_saved do |filename|
  s = filename + ".liquid"
  puts "copying to: " + s
  FileUtils.cp(filename, s)
  puts "removing: " + filename
end
Run Code Online (Sandbox Code Playgroud)

sass liquid shopify compass-sass

26
推荐指数
2
解决办法
4146
查看次数

Handlebars.js的条件"if语句"帮助器

我正在尝试为Handlebars.js编写一个条件if语句帮助器.基本上,如果是Apply Now页面,我想在链接上放置一个"活动"类.

帮手:

  Handlebars.registerHelper('isApplyNow', function(block) {
    if(this.title == "Apply Now") {
      return block(this);
    } else {
      return block.inverse(this);
    }
  });
Run Code Online (Sandbox Code Playgroud)

和模板:

  <ul>
    {{#each pages}}
      <li>
        {{#isApplyNow}}
          <a href="{{url}}" class ='active'>{{this.title}}</a>
        {{else}}
          <a href="{{url}}">{{this.title}}</a>
        {{/if}}
      </li>
    {{/each}}  
  </ul>
Run Code Online (Sandbox Code Playgroud)

但是,我得到一个非常简单的javascript错误:

Uncaught [object Object] in handlebars-1.0.0.beta.2.js:595
Run Code Online (Sandbox Code Playgroud)

任何人都可以看到我写这个不正确吗?

谢谢!

参考文章:

在Handlebars模板中的If块中调用帮助器

http://thinkvitamin.com/code/handlebars-js-part-2-partials-and-helpers/

handlebars.js

16
推荐指数
1
解决办法
2万
查看次数

标签 统计

compass-sass ×1

handlebars.js ×1

liquid ×1

sass ×1

shopify ×1