SCSS offers all the features of CSS along with additional features that are useful for Shopify developers. Though SCSS is the advanced version of CSS, it is not understandable by web browsers. You will have to convert SCSS to CSS liquid theme. Keep reading and we help you quickly convert SCSS to CSS through a series of steps:
What is CSS?
Cascading Style Sheets (CSS) is a scripting language used in developing web pages as well as styling them to make them attractive. It is one of the popular technologies used with HTML and JavaScript. It is used with the extension ‘.css’.
What is SCSS?
SCSS refers to Sassy Cascading Style Sheets which is the more advanced version of CSS. It has a pre-processor language that is interrupted into the CSS files. The SCSS liquid theme files have a file extension of .scss.
How to convert theme SCSS to CSS liquid?
Unfortunately, the SCSS features aren’t introduced yet in the CSS specs and the web browsers don’t understand the SCSS and SASS code directly. Therefore, you have to transform the code SCSS to CSS code. Also, the SCSS support has depreciated in themes. To make sure that your Shopify online store and theme editor perform better, you would have to convert the .scss liquid files into .css liquid files.
- First, remove all the liquid variables from the .scss liquid file.
- Create the .css liquid file.
- Insert all the liquid variables on the .css liquid file
- The file is now converted to .css liquid theme.
Convert SCSS to CSS manually:
- Rename the storepickup.scss.liquid to storepickup.css.liquid
- In storepickup.liquid, change ####{{ ‘storepickup.scss.css’| asset_url | stylesheet_tag }} to ####{{‘storepickup.css’ | asset_url | stylesheet_tag }}
Rename storepickup.scss.liquid to storepickup.css.liquid:
- Proceed to Online store> Themes> [Theme name]> Edit code.
- Click Assets>storepickup.scss.liquid.
- Select Rename.
- Change the file name to storepickup.css.liquid.
Make sure that storepickup.liquid is loading the correct CSS file. Verify it with the following steps:
- Go to Online store>Themes> [Theme name] > Edit code.
- Go to Snippets> storepickup.liquid
- Replace ####{{‘storepickup.scss.css’ | asset_url | stylesheet_tag }}
- Select Save
Note:
SASS syntax no longer works. If you use any SASS syntax, you must manually convert the file into CSS syntax.
For example, the above code no longer works and when converted to CSS, your code looks like this:
Any comments need to be modified from // comment to/* Comment */.
Conclusion
If you are looking for an online SCSS to CSS converter, there are plenty of tools like JSON formatter, CSS Portal, Code Beautify, bfotool, etc available online. You can choose any of them and convert the files from SCSS to CSS right away. Thanks for reading!