Click here to Skip to main content
11,577,643 members (21,832 online)
Click here to Skip to main content

Sass in Drupal

, 16 Jul 2014 CPOL 7.2K 2
Rate this:
Please Sign up or sign in to vote.
How to use SASS in Drupal ?

In this post I wanted to share my knowledge of how could be create Sass CSS 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 a open-source and coaded 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 installed RubyGems first.

Install SASS

sudo gem install sass

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 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 very useful features 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 useble 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 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 to 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 like 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. Also can 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 overide 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 overide 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 help 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 supports 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 refered 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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Latika surse
Software Developer (Senior) Fulcrum World Wide
India India
No Biography provided

You may also be interested in...

Comments and Discussions

 
QuestionWrong Chapter/Section? Pin
.dan.g.17-Jul-14 21:04
mvp.dan.g.17-Jul-14 21:04 
QuestionMessage Removed Pin
Latika surse17-Jul-14 22:50
memberLatika surse17-Jul-14 22:50 
AnswerRe: Wrong Chapter/Section? Pin
.dan.g.18-Jul-14 17:18
mvp.dan.g.18-Jul-14 17:18 
GeneralRe: Wrong Chapter/Section? Pin
Latika surse21-Sep-14 19:59
groupLatika surse21-Sep-14 19:59 
GeneralComment Pin
Member 1005415117-Jul-14 0:03
memberMember 1005415117-Jul-14 0:03 
GeneralGood Stuff.. Pin
Member 1095267616-Jul-14 23:01
memberMember 1095267616-Jul-14 23:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150603.1 | Last Updated 17 Jul 2014
Article Copyright 2014 by Latika surse
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid