Last modified: Feb 15, 2023 By Alexander Williams
Python convert Sass to Css
In this article, we will see how to convert SASS/SCSS to CSS using python. However, after testing many packages, I found that the libsass package is suitable for converting.
Let's get started.
libsass installation
You can install libsass via pip or easy_install.
pip:
pip install libsass
easy_install:
easy_install libsass
Convert SASS/SCSS to CSS
In this part of the tutorial, we will discuss two types of converting:
- Convert SCSS string to CSS
- Convert an SCSS file to CSS
- Convert a directory of SCSS Files to CSS
Convert SCSS string to CSS
In the following example, we'll convert a simple SCSS string to CSS:
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)
Output:
/* Use the variables */
body {
background-color: lightblue;
color: darkblue;
font-size: 18px; }
As you can see, we've used the sass.compile() method for converting. This method can also compress the output code using the output_style='compressed' argument.
# 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)
Output:
body{background-color:#add8e6;color:#00008b;font-size:18px}
Convert an SCSS file to CSS
To covert an SCSS file to CSS, we need to follow these steps:
- Open and read the Scss file
- Convert the output of the file to CSS using sass.compile method
Let's see an example:
# Open File
with open('style.scss', 'r') as f:
# Read File
scss_code = f.read()
# Convert To CSS
scss_to_css = sass.compile(string=scss_code)
print(scss_to_css)
Output:
/* Use the variables */
body {
background-color: lightblue;
color: darkblue;
font-size: 18px; }
To save the result into a CSS file, see the example below.
# Open File To Convert
with open('style.scss', '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)
Convert a directory of SCSS Files to CSS
It's very straightforward to convert a directory of Sass Files to CSS. However, sass_styles is our directory of Sass:
sass_styles
├── contact.scss
├── form.scss
└── style.scss
And css_styes is the directory of the destination.
Here is the line for converting:
sass.compile(dirname=('sass_styles', 'css_styles'))
After running, the program will get the sass files from the sass_styles directory, convert them to CSS, and save them into the css_styles directory.
Note: You can also use this method to convert a single Sass file to CSS.
Happy Coding ♥