Skip to content

  • Home
  • About Us
  • Add-ons
  • Services
    • Shopify Development Services
    • Shopify Maintenance services
    • Shopify PageSpeed Optimization
    • Shopify Training
    • Shopify App Development
    • Shopify App Integration Services
    • Shopify Email Marketing
    • Shopify Web Design Agency
  • Blog
  • Contact Us
  • Search button

How to convert theme SCSS to CSS liquid theme?

Feb 6, 2023Feb 6, 2023

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.    

  1. First, remove all the liquid variables from the .scss liquid file.
  2. Create the .css liquid file.
  3. Insert all the liquid variables on the .css liquid file
  4. The file is now converted to .css liquid theme. 

Convert SCSS to CSS manually:

  1. Rename the storepickup.scss.liquid to storepickup.css.liquid
  2. 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:

  1. Proceed to Online store> Themes> [Theme name]> Edit code.
  2. Click Assets>storepickup.scss.liquid.
  3. Select Rename.
  4. 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:

  1. Go to Online store>Themes> [Theme name] > Edit code.
  2. Go to Snippets> storepickup.liquid
  3. Replace ####{{‘storepickup.scss.css’ | asset_url | stylesheet_tag }}
  4. 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! 

Posted in Shopify TutorialsTagged Shopify, shopifydevelopmentservice, shopifytutorials

Post navigation

Prev Shopify vs Squarespace: Which Is Best for Your Business in 2023?
Next Shopify Theme Detector: Uncover the Perfect Shopify Theme for Your Store

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Shopify winter edition
    Understanding The Shopify Winter Edition 2023 UpdatesMar 14, 2023
  • Steps To Set Up Shopify Test Order For Quality Assurance
    Steps To Set Up Shopify Test Order For Quality AssuranceMar 1, 2023
  • Why You Should Implement Shopify Inventory Management for Increased EfficiencyFeb 16, 2023
  • Shopify theme detector
    Shopify Theme Detector: Uncover the Perfect Shopify Theme for Your StoreFeb 10, 2023

Subscribe Now

Follow Us

  • facebook
  • twitter
  • instagram
  • linkedin2

OriginateWeb.com is the realization of a dream. Our founder previously spent several years working for a large website development company.

Quick Links

  • Shopify Services
  • About Us
  • Shopify Theme Add-ons
  • Blog
  • Contact Us
  • Careers

Services

  • Shopify Theme Add-ons
  • Website Development
  • Page Speed Optimization
  • App Development
  • Maintenance
  • Training

Need Help?

  • Licensing Agreement
  • Terms and Conditions
  • Privacy Policy
  • Sitemap
  • facebook
  • twitter
  • instagram
  • linkedin2

© 2023 Originate Web. All Rights Reserved