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:

1. Open and read the Scss file
2. 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 ♥