在节中使用 JavaScript 和样式表

每个部分都可以包含 JavaScript 和 Stylesheets，这两种语言用于液体标签：{% javascript %}{% endjavascript %}＆{% stylesheet %}{% endstylesheet %}。

当将代码放在这两个标签内时，Shopify 会将每个部分编译成 shopify_compiled.js 和 shopify_compiled.css。这样可以在每个部分的代码中提供更高的可读性，因为你不必搜索长文档来查找每个部分。

如果你不想使用 CSS，则可以使用 {% stylesheet 'scss' %} 代替使用 SCSS。

但是，使用它们还有一些缺点。液体不能用于任何一种，就像它不能用于没有 .liquid 扩展的普通*.js，*.css，*.scss 文件一样。

此外，在使用 SCSS 样式表标记时，这不是全局样式表，因此在主题的 .scss 文档中定义的任何变量都将无法访问，需要重新定义。

用法示例

JavaScript

{% javascript %}
    $( "p" ).click(function() {
      $( this ).slideUp();
    });
{% endjavascript %}

CSS

{% stylesheet %}
    .container {
        width: 100%;
    }
    .container p {
        color: #ff0000;
    }
{% endstylesheet %}

上海社会科学院

{% stylesheet 'scss' %}
    $red: #ff0000;
    .container {
        width: 100%;
        p {
            color: $red;
        }
    }
{% endstylesheet %}