A Quick Guide To Using SASS & Compass In Drupal Theming
Drupal is a robust content management system (CMS) for designing and developing everything from simple websites to advanced portals. It offers a wide variety of themes, layouts, and templates which are highly flexible and customizable. One of the main benefits of leveraging Drupal customization services is that it lets you create your own theme, customize the template, and use SASS and Compass in a Drupal theming workflow. In this article, you can learn about using SASS and Compass in Drupal.
SASS:
SASS (Syntactically Awesome Stylesheets) is a scripting language that enables you to generate CSS code which is more powerful and elegant. It is widely known for speeding up CSS development. It makes your code easier to read and reuse. With SASS, you can create a clean, simple and structural syntax for CSS using some extra features like variables, nested rules, mixins, and selector inheritance. Here’s what SASS looks like:
For adding SASS features, you must add this code to .scss file (consider it as SASS-CSS) and run it through. You will then require Compass.
Compass:
Compass is a simple, open-source SASS framework. It includes basic design patterns like setting vertical rhythm and converting between pixels and ems. It even provides tools like automatic browser-prefixing of CSS3 rules. Compass is a SASS extension used for automatically compiling your SASS with a simple compass watch command.
The best part about using Compass is that each valid CSS file is also a valid SCSS file. So, all you need to do is copy and paste all the existing CSS files and add the features you require. Now let’s get started with SASS and Compass installation and using it as part of a Drupal theme.
Set up the theme folder:
For installing Compass, you need to have Ruby installed in your environment. Now install SASS and Compass through the command line above.
Create a new file in your Drupal theme folder, name it as “config.rb” and ensure it includes the following:
Alternatively, the command below generates config.rb within your theme directory (themes/THEME-NAME):
Move the existing stylesheet to SASS:
As every valid CSS file is also a valid SCSS file, you just need to rename the file, put it in the right place, and run it in order to start using the SASS features in it.
Now add SASS support to your theme's css/style.css. Compass will parse each file placed in sass/FILE.scss with the configurations added into config.rb. It will then output a corresponding css/FILE.css.
Create a new directory within the theme folder named sass
Shift css/style.css file to the new sass/ folder
Rename the style.css file to style.sass
For adding css/style.css in your Drupal 8 theme, you must ensure that THEME-NAME.libraries.yml includes the following:
The theme folder will have the following set up:
/css/ - Where the CSS files will be generated
/sass/ - Where the source SASS files will be placed
/config.rb - The configuration file that Compass will use to run in the theme folder.
Go to a console and “cd” into the theme folder:
Now run the following command:
Compass watch will then check for the changes in /sass folder. Ensure you keep the Terminal/Console window open when developing with SASS. Compass watch will passively wait for the changes in SASS files to recompile again.
Now, save changes to style.scss file. To check the results, open the /css/style.css file.
Your CSS now compiles with Compass! SASS usage is becoming a popular trend in web development. So bookmark this guide and get started with moving your front-end framework to SASS.
If you have any feedback or suggestions for using SASS in Drupal theming, let us know in the comments below.