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 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 stewartknapman commented Dec 3, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment