无法将具有液体语法的Shopify SCS转换为CSS

Shopify最近已决定退出。我想把所有的SCSS文件都改成CSS，但由于其中包含的液态语法，这已经成为一场噩梦。下面是一个例子：

//覆盖
$color overlay title text:{{settings.color_image_overlay_text}；
$color image overlay:{{settings.color_image_overlay}}；
$opacity image overlay:{{settings.image_overlay_opacity |除以：100.00}；
{%-comment-%}
根据图像叠加不透明度，在悬停时使图像变亮或变暗
{%-endcomment-%}
{%assign image_overlay_opacity=settings.image_overlay_opacity |除以：100.00%}；
{如果图像覆盖不透明度>0.85%，则为%
{%assign image_overlay_opacity_hover=image_overlay_opacity |减：0.3%}；
{%else%}
{%assign image_overlay_opacity_hover=image_overlay_opacity |加上：0.4%}；
{%endif%}
$hover overlay opacity:{{image_overlay_opacity_hover |最多：1}}；

当我尝试通过联机找到的scss编译器运行此过程时，它在第一个

{{

、

{%

或

{%-

时失败，因为这不是有效的scss语法。我想要的最终结果是一个保留液态语法的有效css文件

我的下一个想法是预编译该文件，并将液态语法包装在

unquote（“”

）或稍后要删除的css注释中，然后将其传递给派生的ruby scss编译器。类似如下：

require'tempfile'
需要“fileutils”
files=ARGV[0]
输入文件，输出文件=[files.split（“：”[0]，files.split（“：”[1]]
放入“转换文件：#{input_file}”
路径到编译器=“./lib/ruby-sass/bin/scss”
tmp_path=“/tmp”
#用SCSS可以解析的东西替换液体语法
temp_file=Tempfile.new（'tmpscss'）
开始
打开（输入_文件，'r'）do|文件|
file.each_line do| temp_line|
线=温度线
#尝试用流动语法解释边缘情况
如果第[0..1]行==“{{”
line=line.gsub（“{{”、“/*lsc{{”）.gsub（“}}}”、“}}}lsc*/”）
其他的
line=line.gsub（“{{”，“unquote（\“{”）.gsub（“}}}”，“}}\”）
结束
如果行。包括？（“注释”）
line=line.gsub（“{%-comment-%}”和“/*lsc{%-comment-%}”）.gsub（{%-endcomment-%}”和“{%-endcomment-%}lsc*/”）
其他的
line=line.gsub（“{%”，“/*lsc{%”）.gsub（“%}”，“%}lsc*/”）
结束
temp_file.puts行
结束
结束
temp_file.close
mv（temp_file.path，tmp_path）
放置“#{temp_file.path}:#{output_file}”
#传递给SCSS编译器
系统“ruby{path_to_compiler}-C.{temp_file.path}:{output_file}”
确保
temp_file.close
temp_file.unlink
结束
将“输出文件放入：#{Dir.pwd}/#{Output_file}”

---

这在几行代码中是成功的，但是对于我试图解析它的原始逻辑来说，有太多的边缘案例，scss到css的转换将不可避免地失败。一定有更好的方法来做到这一点。有人有什么想法吗？我希望Shopify允许我们使用他们的scss编译器。

没有程序可以转换据我所知，

scss.liquid

。

scss.liquid

通常有一个变量链接到您商店中的

settings\u data.json

，这个变量是独一无二的，还有许多混合功能。除了以下几点之外，我看不到任何整体方法：

获取更新的主题

在呈现文件时从页面源抓取文件

从SCS中取出所有

液体

，然后转换

用CSS和liquid重新编码文件。使用sass代替变量。这是最痛苦的方法

 {% assign image_overlay_opacity = settings.image_overlay_opacity | divided_by: 100.00 %};

 {% if image_overlay_opacity > 0.85 %}
   {% assign image_overlay_opacity_hover = image_overlay_opacity | minus: 0.3 %};
 {% else %}
   {% assign image_overlay_opacity_hover = image_overlay_opacity | plus: 0.4 %};
 {% endif %}

 // Overlays

 :root {
     --color-overlay-title-text: {{ settings.color_image_overlay_text }};
     --color-image-overlay: {{ settings.color_image_overlay }};
     --opacity-image-overlay: {{ settings.image_overlay_opacity | divided_by: 100.00 }};
     --hover-overlay-opacity: {{ image_overlay_opacity_hover | at_most: 1 }};
 }

---

运气好吗？我也希望将shopify主题从SCS迁移到css，但liquid正在阻挠

我正在使用以下命令成功转义“{{”：

$product-accordion-title-size: #{'"{{ settings.font_product_accordion_title_size }}"'}px;

但我遇到了大量其他边缘情况问题。即在通过scss函数时让编译器接受注释掉的值：

      border-color: darken($color-button-bg,10%);

其中提到：

$color-button-bg: #{'"{{ settings.color_btn_bg }}"'};

这最终会破坏编译器，因为它期望那里有一个值

目前，我正在考虑实际处理每一个有scss函数的情况，找到相应的值并手动输入，因为我没有幸使用任何声称将json配置文件转换为SCS的npm包

---

我意识到这本身就是一个问题，但希望有关评论的部分能帮助你解决问题，并算作答案“\_(ツ)_/“”.关于注释出一些液体。

更新：我刚刚将我的函数包装在

{''darken（$color，6%）；“}；

中，并成功编译。