Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Compile sass into liquid
// Escape Liquid in scss.
//
// Expected output:
// a{
// color: {{ settings.link-color }};
// }
a{
color: #{'{{ settings.link-color }}'};
}
// Reuasble liquid:
$myVar: #{'{{ settings.font-family }}'};
h1{
font-family: $myVar;
}
// Using a sass variable from the current file:
$var1: #fff;
$var2: #{'{% if settings.colour %}{{ settings.colour }}{% else %}'}$var1#{'{% endif %}'};
// Liquid if statement:
body{
/* {% if settings.background-image %} */
background: url(#{'{{ settings.background-image | asset_url }}'}) center no-repeat;
/* {% else %} */
background: whitesmoke;
/* {% endif %} */
}
// Liquid outside a css statement:
// If we wrote /* {{ settings.custom-css }} */ then our compiled liquid would be inside the comments making it useless.
// We need liquid to create the ending and opening comments when its compiled,
// however if we wrote /* {{ settings.custom-css | prepend: '*/' | append: '/*' }} */ the string: ' | append: '
// is still seen as being outside the comments.
// We need to escape them untill liquid can create them so we add an extra character and then remove it.
/* {{ settings.custom-css | prepend: '*\/' | append: '\/*' | remove: '\' }} */
/* {% if settings.custom-css %}{{ settings.custom-css | prepend: '*\/' | append: '\/*' | remove: '\' }}{% endif %} */
@vfonic

This comment has been minimized.

Copy link

vfonic commented Jun 23, 2016

It's also possible to have scss functions working:

  1. Include your stylesheet file with both .scss.css extension: {{ 'application.scss.css' | asset_url | stylesheet_tag }}

Now you can use the scss functions like this:

/* {{ settings.color_secondary | prepend: '*\/ $colorSecondary: ' | append: '; \/*' | remove: '\' }} */
.jadada {
    background-color: #{'darken($colorSecondary, 10%)'};
}

or

.jadada {
    background-color: #{'darken({{ settings.color_secondary }}, 10%)'};
}
@stewartknapman

This comment has been minimized.

Copy link
Owner Author

stewartknapman commented Dec 3, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.