SASS documentation - Gizra/KnowledgeBase GitHub Wiki

# Converting CSS to to SASS:

sass-convert --F css -T scss style.css style.scss

# Configure SASS with PhpStrom:

In order to work with SASS we need to add a "watcher", which will automatically compile SCSS files into CSS files.

That's how it's done using PhpStorm:

Preparation

If there are currently no scss files in your Drupal project and you're the first to add scss to the website, you need to follow the preparation steps before adding a watcher. If there are already scss files in the project, skip to the "Adding a watcher" section.

  • First you need to find your custom theme directory, for example themes/custom/bootstrap_subtheme.
  • Add the directories css and scss to your theme directory, for example themes/custom/bootstrap_subtheme/css and themes/custom/bootstrap_subtheme/scss.
  • In the scss directory you created, add the file style.scss (You don't have to write anything in it).

Adding a watcher

  • Using PhpStorm, open the file style.scss which should be located in themes/custom/YOUR_THEME/scss.
  • On the top you will see a green message saying File watcher 'SCSS' is available for this file, click on the link "Add watcher".
  • Now the watcher has been created, but we still need to configure it...
  • Go to: File -> Settings.
  • On the list, choose "File Watchers".
  • Double-click on SCSS.
  • Replace the content of the "Arguments" field with the following code:
--no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css
  • Press "OK", then press "Apply" and "OK". That's it! :)