Using SCSS/SASS in Shopify

Solved
Highlighted
New Member
1 0 0

Can't seem to get SCSS working in Shopify.

My CSS file name 'styles.scss.liquid':

$turquoise: #35d7db;

#toolbar {
  width: 100%;
  display: inline-block;
  background-color: $turquoise;
}

And my HTML in Shopify:

{{ 'styles.scss' | asset_url | stylesheet_tag }}

<div id='toolbar'>
    <p>Tools go here</p>
</div>
0 Likes
Highlighted
Shopify Partner
165 34 60

This is an accepted solution.

Try this please
{{
'styles.scss.css' | asset_url | stylesheet_tag }} <div id='toolbar'> <p>Tools go here</p> </div>
Problem Solved? ✔️Accept the solution so you can help others.
* Email: fayyazraza@gmail.com * Skype: fayyaz_raza
1 Like
Highlighted
New Member
1 0 0

I'm having the same problem. 

 

in theme.liquid i got

 

{{ 'application.scss.css' | asset_url | stylesheet_tag }}
 
and in my application.scss.liquid I have 
 
// put your styles here
$black: #000000;
$white: #FFFFFF;

$light-black: #333333;

$text-color: #555555;
$text-color-white: #CCCCCC;
$text-color-light: #707070;
$text-color-light-white: #AAAAAA;

$gold: #BEA482;

$background-color: #F7F2EA;
$header-background-color: #EEE6DD;
$footer-background-color: #F4EDE6;
$border-color: rgba(0,0,0,0.15);
$border-color-white: rgba(255,255,255,0.15);

$standard-border: 1px solid $border-color;
$standard-border-white: 1px solid $border-color-white;

$line-global: 20px;
$gutter-global: $line-global;
$offset-global: $line-global*2; // 40px

$header-height: $line-global*4; // 80px;

$type-headline-lg: 50px;
$type-headline-med: 30px;
$type-body-med: 15px;
$type-body-sm: 13px;

$type-bold: 700;
$type-book: 400;


//base

* {
font-family: $text-font;
box-sizing: border-box;
}

html,
body {
width: 100%;
margin: 0;
padding: 0;
color: $black;
$line-height: $line-global;
}

body {
font-size: $type-body-med;
background-color: $background-color;
background-image: url('{{ "background.jpg" | asset_url }}');
}
 
This is not the first time I have had a problem with sass and Shopify
0 Likes
Highlighted
Shopify Partner
18 0 2
html,
body {
width100%;
margin0;
padding0;
color$black;
$line-height$line-global;
}
 
$line-height: $line-global;
 should be 
line-height: $line-global;
0 Likes