Sass and Compass: An Introduction

SASS and Compass

Presenter: @anthonyalbertyn #drupalcambs

What is SASS?

SASS is a system that extends CSS and can make you more efficient and make your CSS more organised.

SASS has two main parts

•  SassScript •  SASS CSS pre-‐processor

What is SassScript?

SassScript is a scripCng language that extends the CSS syntax, adding nested rules, variables, mixins, selector inheritance and more.

What does the pre-‐processor do?

The pre-‐processor interprets your SassScript and produces well formaHed standard CSS.

What is Compass?

Compass is a SASS Framework consisCng of a collecCon of helpful tools and SASS library that produces baHle-‐tested cross-‐browser CSS.

Three leading CSS Pre-‐processors

•  SASS and Compass hHp://sass-‐lang.com hHp://compass-‐style.org

•  LESS hHp://lesscss.org

•  Stylus & Nib hHp://learnboost.github.io/stylus hHp:/visionmedia.github.com/nib

The process

Write your SassScript

@import Compass libraries into your SassScript file (opConal)

Use a CSS Pre-‐processor to interpret your SassScript

CSS files are produced by the pre-‐processor (use these in your website)

Don’t get confused with terminology

•  Some people say “SASS” when they mean “SassScript” and/or when they refer to the CSS Pre-‐processor.

•  Others use “Compass” to refer to “SassScript” and/or the Compass framework and/or the CSS Pre-‐processor.

Origins of SASS and Compass

•  Born in the Ruby on Rails community. •  They are both Ruby gems. •  SASS invented by Hampton Catlin and further developed by Nathan Weizenbaum and others.

•  Compass was created by Chris Eppstein.

Let’s give them some credit

Hampton Catlin @hcatlin www.hamptoncatlin.com

He is the inventor of: SASS, Haml, m.wikipedia.org and Moovweb and the author of "The PragmaCc Guide to Sass” ISBN-‐10: 1934356840 | ISBN-‐13: 978-‐1934356845


Nathan Weizenbaum @nex3 www.nex-‐3.com

He is currently working for Google on Dart and is the lead developer of Haml and Sass.


Chris Eppstein @chriseppstein hHp://chriseppstein.github.com

He is the creator of Compass and on the core team for Sass. Chris is currently an engineer at LinkedIn.


Nathan and Chris are authors of the book "Sass and Compass in AcCon" ISBN-‐10: 1617290149 | ISBN-‐13: 978-‐1617290145

PS. LinkedIn has more than 1,100 Sass files with 230,000+ lines of Scss and 90+ developers using Sass.

SassScript comes in two syntaxes

•  SCSS (SassyCSS) •  SASS (the indented syntax)

SCSS syntax

•  Superset of CSS syntax and uses brackets and semicolons. ie valid CSS is valid SCSS.

•  SCSS Stylesheets get an .scss extension. •  Most commonly used.

SASS syntax

•  Instead of brackets and semicolons, it uses indentaCon of lines to specify blocks of code.

•  SassScript stylesheets get a .sass extension. •  Older syntax of the two.

PS. A project would normally only use one of the two syntaxes.

SASS and Compass somware opCons

•  Download SASS and Compass and install on your computer, then use the command line – requires Ruby to be installed (Mac should already have Ruby).

OR •  Download a SASS/Compass GUI and use the graphical version.

SASS/Compass downloads

•  If you install Compass, it will already come with SASS and a CSS Pre-‐processor hHp://compass-‐style.org/install

•  If you only want SASS hHp://sass-‐lang.com/download.html

SASS/Compass GUI opCons

•  Compass.app (USD 10) – does not need Ruby hHp://compass.handlino.com

•  Koala (open source) -‐ used for Less, Sass, Compass and CoffeeScript – needs Ruby hHp://koala-‐app.com

•  Scout (open source) – does not need Ruby hHp://mhs.github.io/scout-‐app

SASS/Compass GUI opCons

•  Codekit (USD 25) – does not need Ruby but only available for Mac OS 10.7+ hHp://incident57.com/codekit

Other SASS pre-‐processors

•  Scssphp hHps://github.com/leafo/scssphp

•  sass-‐java hHps://github.com/darrinholst/sass-‐java

•  libsass -‐ wriHen in C++ hHps://github.com/hcatlin/libsass

•  node-‐sass -‐ a node js library to use libsass with node js hHps://npmjs.org/package/node-‐sass

•  SassAndCoffee for .NET hHps://github.com/xpaulbeHsx/SassAndCoffee

SASS and Compass Drupal Modules

•  hHp://drupal.org/project/sass •  hHp://drupal.org/project/compass •  hHp://drupal.org/project/sassy

PS. You don’t need any of these if you want to pre-‐compile you SassScript with one of the GUI’s or from the command line or if you are not using Drupal ;-‐)

Using Scout GUI

1 • Fire up Scout (press start buHon amer step 2)

2 • Point Scout to your SASS/SCSS directory and to the directory where generated CSS files should go.

3 • Add your SassScript to your .scss or sass file

4 • CSS file will be generated when you save your .sass/.scss file

Warning

•  SASS/Compass will override the CSS files (that it creates) every Cme you update your sass/scss files.

•  Don’t make any direct edits to the generated CSS files.

•  Consider using some form of version control somware (like GIT) for the sass/scss files as well as the generated css files.

Learning Resources for SASS and Compass

•  SASS hHp://sass-‐lang.com

•  Compass hHp://compass-‐style.org

PS. Examples that follow do not cover everything – just a taster – so please visit above resources to learn more.

NesCng

#nav { li { padding: 5px; a { color: #000; } a:hover { color: #fff; } } }

CSS output

#nav li {padding: 5px; } #nav li a {color: #000; } #nav li a:hover {color: #fff; }

NesCng Parent References

a { color: #000; &:hover {color: #fff; } &:visited {color: ff0000; } }

CSS output

a { color: #000; } a:hover {color: #fff; } a:visited {color: #ff0000; }

NesCng properCes #main { border: { style: doHed; top: { color: #000; width: 2px; } } }

CSS output

#main { border-‐style: doHed; border-‐top-‐color: #000; border-‐top-‐width: 2px; }

Variables

$myred: #ff0000; $myother: #d4d4d4; h1 { color: $myred; } h2 { color: $myother; }

CSS output

h1 { color: red; } h2 { color: #d4d4d4; }

OperaCons and FuncCons

•  Math operators + -‐ * / % are supported for variable values.

•  There are many funcCons for working with colours like: RGB funcCons for mixing or extracCng colours, HSL funcCons -‐ for adjusCng lightness, hue, saturaCon -‐ opacity funcCons and more.

OperaCons

$page: 960px; $sidebar: 220px; #main { width: $page -‐ $sidebar; }

CSS output

#main { width: 740px; }

FuncCons (one of many)

$links: #0000ff; a { color: $links; &:hover { lighten($links, 20%); } }

CSS output

a { color: blue; } a:hover { color: #6666ff; }

InterpolaCon

•  Use #{ } to insert variables into property names.

•  Like this #{$somevariable}

InterpolaCon

$rad: 5px; $ver: top; $hor: lem; .rounded-‐#{$ver}-‐#{$hor} { border-‐#{$ver}-‐#{$hor}-‐radius: $rad; }

CSS output

.rounded-‐top-‐lem { border-‐top-‐lem-‐radius: 5px; }

Mixins

@mixin box1 { border: 1px doHed #000; background-‐color: #f4f4f4; padding: 15px; } .myblock { @include box1; }

CSS output

.myblock { border: 1px doHed #000; background-‐color: #f4f4f4; padding: 15px; }

Mixin Arguments

@mixin round($radius) { border-‐radius: $radius; -‐webkit-‐border-‐radius: $radius; -‐moz-‐border-‐radius: $radius; -‐ms-‐border-‐radius: $radius; -‐o-‐border-‐radius: $radius;

} buHon { @include round(5px); }

CSS output

buHon { border-‐radius: 5px; -‐webkit-‐border-‐radius: 5px; -‐moz-‐border-‐radius: 5px; -‐ms-‐border-‐radius: 5px; -‐o-‐border-‐radius: 5px;

}

Mixin arguments

You can also set default values for mixin arguments. @mixin round($radius: 5px) { … } buHon1 { @include round(); } buHon2 {@include round(10px);}

Mixin arguments

You may also use mulCple arguments in a mixin @mixin round($radius: 5px, $colour) { … } buHon { @include round(10px, #ff0000); }

Compass Core Framework

•  CSS3 – cross browser CSS mixins. •  Typography – mixins for typography paHerns. •  UCliCes – mixins for common styling paHerns. •  Can import the framework by using: @import “compass” in your sass/scss stylesheet.

Example using a Compass library

Visit hHp://compass-‐style.org

Find the Compass mixin that you want to use in your script

Add an import statement to your sass/scss file, example: @import "compass/css3/border-‐radius"

Then use the mixin in your sass/scss script, example: bu>on { @include border-‐radius(5px); }

#DrupalCambs

•  Cambridge (UK) Drupal Community •  We have monthly meetups •  Join us on hHp://www.meetup.com/drupalcambs

•  Free to join and free to come to meetups •  The best way to learn is Drupal is to do, and to ask quesCons – we are a friendly group J

Technology

Sass and Compass: An Introduction