Tutorials

Python 3 libsass Compile Sass/SCSS to Compressed CSS Code

In this tutorial, I’ll provide you with the source code of Python 3 and libsass to compile the raw Sass or SCSS files to compressed CSS code. You can easily run this code on the command line. The full project is written for beginners.

pip install libsass

Converting Raw SCSS to CSS

code1.py

import sass

# Sass Code
sass_code = '''
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}
'''

# Convert
scss_to_css = sass.compile(string=sass_code)

# Result
print(scss_to_css)

Now, if you want to compress the CSS code you have to add the compressed attribute inside the code. For example:-

# Sass Code
sass_code = '''
$bgcolor: lightblue;
$textcolor: darkblue;
$fontsize: 18px;

/* Use the variables */body {
  background-color: $bgcolor;
  color: $textcolor;
  font-size: $fontsize;
}
'''

# Convert and compress
scss_to_css = sass.compile(string=sass_code, output_style='compressed')

# Result
print(scss_to_css)

Converting SASS File to CSS File

code2.py

import sass

# Open File
with open('style.sass', 'r') as f:
    # Read File
    scss_code = f.read()
    # Convert To CSS
    scss_to_css = sass.compile(string=scss_code)
    
# Create CSS File to store
with open('style.css', 'w') as f:
    # Write File
    scss_code = f.write(scss_to_css)
Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.

Recent Posts

How can IT Professionals use ChatGPT?

If you're reading this, you must have heard the buzz about ChatGPT and its incredible…

September 2, 2023

ChatGPT in Cybersecurity: The Ultimate Guide

How to Use ChatGPT in Cybersecurity If you're a cybersecurity geek, you've probably heard about…

September 1, 2023

Add Cryptocurrency Price Widget in WordPress Website

Introduction In the dynamic world of cryptocurrencies, staying informed about the latest market trends is…

August 30, 2023

Best Addons for The Events Calendar Elementor Integration

The Events Calendar Widgets for Elementor has become easiest solution for managing events on WordPress…

August 30, 2023

Create Vertical Timeline in Elementor: A Step-by-step Guide

Introduction The "Story Timeline" is a versatile plugin that offers an innovative way to present…

August 30, 2023

TranslatePress Addon for Automate Page Translation in WordPress

Introduction In today's globalized world, catering to diverse audiences is very important. However, the process…

August 30, 2023