SASS Variable for Image Path
I'm building out a new site in Statamic which is my go to CMS for smaller sites that don't all the power that ExpressionEngine or CraftCMS have to offer. With Statamic your images, css, and javascript files are required to be in specific folders. This is not an issue except that I'm a lazy typer.
In my sites I usually keep images in a folder at root so that all I need to type is /images/file_name.jpg and it works. However images are required to be in /_themes/theme_name/img/ which is a whole lot longer to type and I know I'll have typos. My solution was to set a variable
$imgpath: /_themes/etf/img;
And then in the relevant css have this:
header {
background: url($imgpath/hero-image.jpg) no-repeat left bottom;
}
That however resulted in errors.
Error: Invalid CSS after \"...path/hero-image\": expected \")\", was \".jpg) no-repeat...\
The solution is to code the variable slightly different when putting it in a path by adding curly braces around it and a proceeding pound sign like this:
header {
background: url(#{$imgpath}/hero-image.jpg) no-repeat left bottom;
}
