-
Notifications
You must be signed in to change notification settings - Fork 13
SASS documentation
Yaron edited this page Jan 14, 2015
·
2 revisions
sass-convert --F css -T scss style.css style.scss
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:
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
andscss
to your theme directory, for examplethemes/custom/bootstrap_subtheme/css
andthemes/custom/bootstrap_subtheme/scss
. - In the
scss
directory you created, add the filestyle.scss
(You don't have to write anything in it).
- Using PhpStorm, open the file
style.scss
which should be located inthemes/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! :)