Drupal + Sass & Compass, a perfect match!


Use CSS for a web project is now in common use; remember that the CSS was created back!

During the last years, however, they have been created framework to make it more functional … more clean … more powerful.

Among the most important frameworks we are:




Today we will see how to use sass + compass in our web project with Drupal.

What Compass?

Compass is a CSS framework that only works with Sass and allows the use of CSS 3 more quickly and, not to forget, it is Sass Compass work with Ruby. (Ruby on Mac OS X is installed by default on Windows you have to install it by hand.

How, then, to use Sass + Compass in our project if you do not have the skills required to install these frameworks?

Browsing the web I found this application quite interesting, it is called Scout

Use Scout is very simple, because once you get to this screen – See more at:

In order to submit a new site you must click on the + in the lower left.

A window will appear where you must select the folder of your theme.

Once in this screen, the input folder, we have to select the folder that contains the files.scss , and the folder output folder , insert the folder that will contain the css file .

After filling the two folder, you will find other settings not mandatory , except for one:

These two values are very important, because if we let Development, the css file that will be created with Scout will contain comments to indicate where to find the file .scss selectors . And ‘ possible to remove comments, select Production.

If you now try to click on the play button to the right of the name of your project, the Scout will give you an error because there is actually nothing to fill .

First you need to create a file .scss and after we click again on the play button.

If the file does not contain errors .scss , a message appears with the creation of the css file .

After setting and created our file .scss and our .css , to see the changes on Drupal , you have to enter ONLY the css file in the file of the theme .info .

Example:stylesheets[all][] = style.css

After editing the file info , to see the changes , you need to clear the cache of Drupal .

Want to see some of the websites created by us?You can view the projects of the websites that we created the website design portfolio, and if our advisory web and web designer is interesting for the construction or redesign of your website or, to collaborate on the development of web projects: contact us without obligation.

Mobile Site Creation DubaiOur web agency in Dubai specializes in creating mobile sites responsive. Every website is developed with the prerogative to be fully navigable from any device in use by the customer. The creation of a mobile site with us is synonymous with quality!

We love MinimalWe love the iconography, cleanliness and freshness in the language but that, without ever neglecting the impact that your brand will have in the market sector. Remember, your logo is the dress that your company as the global market.


stylesheets[all][] = style.css