SASS in Drupal

In this post, I wanted to share my knowledge of how Sass CSS could be created in Drupal 7 theme.

What is SASS?

SASS is a Syntactically Awesome Stylesheets created by Hampton Catlin.
It is a scripting language that is interpreted into Cascading Style Sheets (CSS).

SASS

It is open-source and coded in Ruby including PHP using C libraries called libSass and Java called Jsass.

SassScript provides the following solutions: variables, nesting, mixins, and selector inheritance.

SASS looks similar to CSS without the semicolons.

Installing SASS

You have to install RubyGems first.

Install SASS:

sudo gem install sass

Move Your Existing Stylesheet to SASS

Because every valid CSS file is also a valid SCSS file, you only need to rename the file, put it in the right place, and run. You can start using SASS features in it. Let's see how to add SASS support to your theme's css/style.css. With the configuration we put into config.rb, compass will parse each file located in sass/FILE.scss and output a corresponding css/FILE.css.

1. Create a new directory inside your theme folder named sass.
2. Move css/style.css to the new sass/ folder
3. Rename the file from style.css to style.sass

In your Drupal theme folder, create a new file and name it "config.rb".

Now, we will have the following set up in our theme folder:

/css/ Where 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 our theme folder.

If you using Windows 10 v1607 (latest update as March 2017), you need to follow the steps given below:

1. Right-click on start menu & select System
2. Click on Advanced System Settings (left hand column)
3. Click on Environment variables button
4. In top section, select Path (or PATH), then click on Edit button
5. Inside opened window, click on New button
6. In selected input area, type (for example) C:\Ruby22-x64\bin\ (it must be path to ruby's bin folder)
7. Click OK, twice
8. Re-open Command-Prompt, now sass is ready to watch and compile your sass files.

Compiling SASS

The SASS interpreter translates SassScript into CSS. Alternately, Sass can monitor the .sass or .scss file and translate it to an output .css file. For that, you have to navigate your theme folder.

For D7:

cd sites/all/themes/myTheme/

For D8:

cd /themes/myTheme/

For viewing your changes, you have to run the following command:

sass--watch sass:css

Here, your first parameters option is name of the folder that holds our .scss files, here sass.

The second parameters option is the name of the folder where our .scss will get compiled into regular CSS.

When writing normal CSS, we will find repeating CSS.

.content p{
 font-size:10px;
 color:#FFF;
 margin-top:5px;
}
.content h2{
 font-size:14px;
 color:#FFF;
}

But, in SASS:

.content{
 p{
  font-size:10px;
  color:#FFF;
  margin-top:5px;
 }
 h2{
   font-size:14px;
   color:#FFF;
 }
}

SASS Variables

You can use variables in your SASS.

For example:

$yellow:#FFCB05;
.content
 a{
  color:$yellow;
 }

This would compile to:

.content
 a{
  color:#FFCB05;
 }

This is a very useful feature in a Drupal theme, where a standard colour format is re-used throughout the CSS. You can define this once in SASS, and then apply to a number of selectors. If you want to modify this colour, you only need to change it in one place and it will be updated everywhere.

You can also use SASS variables in selectors and property names using #{}:

$name: bar;
$attr: border;
p.#{$name} {
  #{$attr}-color: black;
}

It would be compiled to:

p.bar {
 border-color: black; 
}

SASS Importing

Another usable function is to import other SASS files without rendering their output in your main file, these are called base partials.

@import "mixin";

You can import variables into your main layout SASS file. If you have to prevent the file's output from being rendered in your main CSS file, then you can use underscore.

@import _mixinn.scss

SASS Mixins

Another most useful feature in SASS is to reuse large line of code, known as "mixins".

@mixin radius($radius){
 webkit-border-radius : $radius;
 -moz-border-radius : $radius;
 -o-border-radius : $radius;
 border-radius : $radius;
}

Then to use the mixin, we simply do the following:

.content {
 .content_box{
   @include
    radius(10px);
  }
}

It would compile to:

.content {
 .content_box {
  webkit-border-radius : 10px;
 -moz-border-radius : 10px;
 -o-border-radius : 10px;
 border-radius : 10px;
 } 
}

SASS Partials

Partial is nothing but the SASS file name with heading underscore like _layout.scss. The leading underscore means, the file is only a partial file and it should not be generated into a CSS file. The main purpose of the partial SASS files is to modularize your CSS into an easy way. It is used with @import diective. It contains small snippets of CSS which you can include in other SASS files.

Extend/Inheritance SASS

This is one of the most useful features of SASS. Using @extend, you can share a set of CSS properties from one selector to another. It helps the reusability of your CSS classes.

.content a {
 font-family:  'Gotham Light' , 'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 text-decoration : none;
 color : white;
 @include transition;
 &:hover ,&:link , &:visited {
  @extend a;
 }
}

Here, the ampersand (&) character to refer parent selectors.

SASS Media

@media directives in SASS behave just the same as the plain CSS, with one extra capability: they can be nested in CSS rules. If a @media directive appears within a CSS rule, it will be mumbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet.

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

It should be compiled to:

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

It can be nested using the 'and' operator. It can also contain SASS expressions (including variables, functions, and operators) in place of the feature names and feature values.

Operators

SASS has a handful of standard math operators like +, -, *, /, and %. You can do little bit math operations.

.container { 
 width: 100%; 
}
.grid-1 {
  float: left;
  width: 450px / 820px * 100%;
}

Comments in SASS

You can use basic CSS comments like /* */ and //. The multiline comments /* */ are stored in the CSS output, while the single-line // comments are removed.

/**
  **This Page Consists Css information for the basic layout of the theme and Global Settings 
======================================================
               TABLE OF CONTENTS 
       ----------------------------------------
  		*1 - General Page layout scss
  		*2 - Css Used to override default css 
=======================================================
***/
@font-face {
	font-family: 'Open Sans light';
	src: url('../fonts/opensans-light.woff') format('woff');
}
// Comment for body background
body {
 background : url(../images/body-bg.jpg) ;
}

It would compile to:

/**
**This Page Consists Css information for the basic layout of the theme and Global Settings
======================================================
TABLE OF CONTENTS
----------------------------------------
*1 - General Page layout scss
*2 - Css Used to override default css
=======================================================
***/
@font-face {
 font-family: 'Open Sans light';
 src: url('../fonts/opensans-light.woff') format('woff');
}

body {
 background : url(../images/body-bg.jpg) ;
}

Caching SASS Files

By default, SASS caches compiled templates and partials. This helps to speed up re-compilation of large collections of SASS files. SASS puts the cached templates in the .sass-cache directory. In Drupal, they go in /themes/myTheme/sass-cache.

Data Types in SASS

SASS files support six main data types:

• numbers (e.g. 1.2, 10, 12px)
• strings of text, with and without quotes (e.g. "foo", 'bar', baz)
• colors (e.g. red, #ff0000, rgba(255, 0,0))
• booleans (e.g. true, false)
• nulls (e.g. null)
• lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em,Times New Roman,Arial, sans-serif)
• maps from one value to another (e.g. (key1: value1,key2: value2))

SASS also supports other types of CSS property value, such as Unicode ranges and !important declarations. They’re treated just like unquoted strings.

Control Directives and Expressions in SASS

SASS supports control directives and expressions also.

For more information, you can refer to this link: http://sass-lang.com/documentation/.

You can use SASS CSS for Responsive theming also.

Other Way to Integrate SASS

There is also another way to integrate SASS with your Drupal project. For that, you’ll need the following modules:

• Prepro (http://www.drupal.org/project/prepro)
• Sassy (http://drupal.org/project/sassy)

and:

• Libraries (http://www.drupal.org/project/libraries)

Just install and enable modules and add the PHPSass library into sites/all/libraries.

References

• Sass documentation
• http://sass-lang.com/
• http://www.previousnext.com.au/blog/up-and-running-with-sass-in-drupal-7