sass and compass workshop
TRANSCRIPT
SASS & COMPASS WORKSHOPFeb. 21, 2014 | Ver. 8
Shaho Toofani
Sass and Compass Workshop - ©2014 Shaho Toofani
Toolscodepen.io
SassMeister
Grunt/LiveReload
Sass and Compass Workshop - ©2014 Shaho Toofani
Why you should use Sass and Compass— CSS is crafted to be simple, but scaling simplicity is difficult.
At Scale
Slight variations of colors, fonts, numbers & other properties arise
Stylesheet size may become unmanageable
— With power of Sass (Sass NOT SASS)
Keep your stylesheet DRY
Revision are waaaay easier (no more find & replace all)
Fancy new CSS3 properties becaome production-ready
Build reusable mixins and functions
Create your own stylesheet framework
Sass and Compass Workshop - ©2014 Shaho Toofani
Why do we need CSS preprocessors?CSS is a declarative, not a programming language.
variables — placeholders for something reusable.
functions — manipulate values with operations (for example, make this color 20 percent lighter).
it’s faster to write — for example nesting
it’s more manageable — for example partials
Sass and Compass Workshop - ©2014 Shaho Toofani
The DRY principle— Use variables (only define a value once)CSS
a { color: blue;}nav { background-color: blue;}
— DRY: don’t repeat yourselfSCSS
$brand-color: blue; a { color: $brand-color;}nav { background-color: $brand-color;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Why you should use Sass and Compass— Automatic RGBA color values and conversionsCSS
.color-traditional { color: #11c909; color: rgba(17, 201, 9, 0.9);}
SCSS
.color-modern { color: $green; color: rgba($green, 0.9);}
Sass and Compass Workshop - ©2014 Shaho Toofani
Why you should use Sass and Compass— Forget about vendor prefixesCSS
.rounded { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
SCSS
.rounded { @include border-radius(4px);}
Sass and Compass Workshop - ©2014 Shaho Toofani
Why you should use Sass and Compass— Nesting rulesCSS
nav a { color: #ff0b13;}nav a:hover { color: #11c909;}nav a:visited { color: #091fff;}
SCSS
nav { a { color: $red; &:hover { color: $green; } &:visited { color: $blue; } }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Why you should use Sass and Compass— Media queries the simple wayCSS
@media only screen and (min-width: 280px) and (max-width: 479px) { .h1 { font-size: 1.1em; }}@media only screen and (min-width: 480px) and (max-width: 599px) { .h1 { font-size: 0.9em; }}
SCSS
h1 { @include MQ(XS) { font-size: 1.1em; } @include MQ(S) { font-size: 0.9em; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
WHAT IS SASS?Style with attitude
Sass and Compass Workshop - ©2014 Shaho Toofani
WHAT IS SASS?— CSS with superpowers - (it looks like CSS!)SCSS
$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
Sass and Compass Workshop - ©2014 Shaho Toofani
WHAT IS SASS?
— Sass is a CSS preprocessor
A layer between the stylesheets you author and the .css files you serve to the browser.
Sass is short for Syntactically Awesome Stylesheets.
Created by , Primary developers are and .Hampton Catlin Nathan Weizenbaum Chris Eppstein
Sass and Compass Workshop - ©2014 Shaho Toofani
WHAT IS SASS?
— Official Website: http://sass-lang.com
— The project's GitHub development homepage: https://github.com/nex3/sass
Sass and Compass Workshop - ©2014 Shaho Toofani
INSTALLATIONDon't panic!
Sass and Compass Workshop - ©2014 Shaho Toofani
Installing RubyBefore we can install Sass and Compass, we need Ruby installed. If you are on OS X, you already haveit.
Sass and Compass Workshop - ©2014 Shaho Toofani
INSTALLING SASS— Command prompt (line) install
Install Sass
ruby
gem install sass
ruby
Fetching: sass-3.2.12.gem (100%)Successfully installed sass-3.2.121 gem installedInstalling ri documentation for sass-3.2.12...Installing RDoc documentation for sass-3.2.12...
You’ve just installed Sass. Double-check:
ruby
sass -vSass and Compass Workshop - ©2014 Shaho Toofani
Monitor & convert the Sass files to CSS— To run Sass from the command lineruby
sass input.scss output.css
— Telling Sass which files to WATCHruby
sass --watch screen.scss:screen.css
— You can also tell Sass to watch an entire directoryruby
sass --watch sass:css
Sass and Compass Workshop - ©2014 Shaho Toofani
USING APPS INSTEAD OF THE COMMAND LINE— Graphical tools for working with Sass and Compass
Scout app - http://mhs.github.com/scout-app
Scout is a free Adobe Air-based application.
Sass and Compass Workshop - ©2014 Shaho Toofani
USING APPS INSTEAD OF THE COMMAND LINE— Graphical tools for working with Sass and Compass
CodeKit - http://incident57.com/codekit
Sass and Compass Workshop - ©2014 Shaho Toofani
USING APPS INSTEAD OF THE COMMAND LINE— Graphical tools for working with Sass and Compass
LiveReload - http://livereload.com
Sass and Compass Workshop - ©2014 Shaho Toofani
Useful Commands— Check which versions of Sass are availableruby
gem list sass –a –r
— Installing the latest pre-release versionruby
gem install sass --pre
— Uninstall a specific version of Sass
versionnumber is the release you want to remove (for example, 3.2.0.alpha.103).
ruby
gem uninstall sass --version versionnumber
Sass and Compass Workshop - ©2014 Shaho Toofani
Choosing an output style— Nested (the default)CSS
ol { margin: 10px 0; padding: 10px 0; } ol li { font-size: 2em; line-height: 1.4; } ol li p { color: #333; }
Sass and Compass Workshop - ©2014 Shaho Toofani
CHOOSING AN OUTPUT STYLE— ExpandedCSS
ol { margin: 10px 0; padding: 10px 0;}
ol li { font-size: 2em; line-height: 1.4;} ol li p { color: #333;}
— Add a flag to the Watch commandruby
sass --watch --style expanded screen.scss:screen.css
Sass and Compass Workshop - ©2014 Shaho Toofani
CHOOSING AN OUTPUT STYLE— CompactCSS
ol { margin: 10px 0; padding: 10px 0; }ol li { font-size: 2em; line-height: 1.4; }ol li p { color: #333; }
— Add a flag to the Watch commandruby
sass --watch --style compact screen.scss:screen.css
Sass and Compass Workshop - ©2014 Shaho Toofani
CHOOSING AN OUTPUT STYLE— CompressedCSS
ol{margin:10px 0;padding:10px 0;}ol li{font-size:2em;line-height:1.4;}ol li p{color:#333
— Add a flag to the Watch commandruby
sass --watch --style compressed screen.scss:screen.css
Sass and Compass Workshop - ©2014 Shaho Toofani
DON’T EDIT YOUR OUTPUT!N O T E !
it’s important to note that when you’re using Sass, you’ll no longer be editing any .css files. The .scss files are where you’ll live and breathe.
The reason being, any changes you make to the .css file will eventually get overridden as soon as you update the .scss and Sass compiles the output.
Sass and Compass Workshop - ©2014 Shaho Toofani
VARIABLESallow you to use the same value in multiple places, as well as perform basic maths and functions.
Sass and Compass Workshop - ©2014 Shaho Toofani
Variables— Using variables:
Colors - for example shades of a particular color
Font Stacks
Margin & Padding - consistency in design
Border Widths
Border Radius
Sass and Compass Workshop - ©2014 Shaho Toofani
Variable Declaration— Numbers - can be set with or without units:SCSS
$rounded: 4px;$line-height: 1.5;$font-size: 3rem;
— ColorsSCSS
$base: purple;$border: rgba(0, 255, 0, 0.5);$shadow: #333;
— BooleansSCSS
$rounded: false;$shadow: true;
Sass and Compass Workshop - ©2014 Shaho Toofani
Variable Declaration— Strings - can be set with or without quotes:SCSS
$header: 'Helvetica Neue';$callout: Arial;$message: "Loading...";
— ListsSCSS
$colors: red, green, blue, yellow;$margin: 40px 0 20px 100px;
— NullSCSS
$shadow: null;
Sass and Compass Workshop - ©2014 Shaho Toofani
Declaring and Referencing variables— Declaring a Sass variable:SCSS
$highlight-color: #abcdef;
$highlight-border: 1px $highlight-color solid;
— Referencing:SCSS
.selected { border: $highlight-border;}
CSS
.selected { border: 1px #abcdef solid;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Variable names: dashes or underscores?N O T E !
Different people prefer different styles; some use dashes to separate words within variables ($highlight-color), and some use underscores ($highlight_color).
SCSS
$link-color: blue;
a { color: $link_color;}
In this example, $link-color and $link_color both refer to the same variable.
In fact, dashes and underscores are interchangeable most places in Sass, including mixins and Sassfunctions.
N O T E !
They aren’t interchangeable in the plain-CSS parts of Sass like class, ID, or property names, though.
Sass and Compass Workshop - ©2014 Shaho Toofani
Variables— The Default ValueSCSS
$title: 'My Blog';$title: 'About Me';
h2:before { content: $title;}
CSS
h2:before { content: 'About Me';}
Sass and Compass Workshop - ©2014 Shaho Toofani
Variables, The Default Flag— Variable definitions can optionally take the !default flag:SCSS
$title: 'My Blog';$title: 'About Me' !default;
h2:before { content: $title;}
CSS
h2:before { content: 'My Blog';}
Sass and Compass Workshop - ©2014 Shaho Toofani
Variables ScopeVariables set inside a declaration (within { }) aren't usable outside that block
SCSS
p { $border: #ccc; border-top: 1px solid $border;}
h1 { border-top: 1px solid $border;}
ruby
Syntax error: Undefined variable: "$border"
Sass and Compass Workshop - ©2014 Shaho Toofani
Variables ScopeSetting new values to variables set outside a declaration changes future instances
SCSS
$color-base: #777;
.sidebar { $color-base: #222; background: $color-base;}p { color: $color-base;}
CSS
.sidebar { background: #222222;}p { color: #222222;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Variables in real world
SCSS
$page_width: 960px;$nav_tabs: 6;$tab_width: round($page_width - $nav_tabs) - 1;
SCSS
$page_width: 960px;$nav_tabs: 7;$tab_width: round($page_width - $nav_tabs) - 1;
Sass and Compass Workshop - ©2014 Shaho Toofani
What about CSS variables?N O T E !
Currently a W3C working draft, “CSS Variables Module Level 1,” is being developed: http://www.w3.org/TR/css-variables
— Define a CSS variable:CSS
:root { var-color-main: #333;}
— Use the variable within a declaration:CSS
#main p { color: var(color-main);}
The proposal uses a var prefix to define the variable but a var(variable-name) syntax for values.
Sass and Compass Workshop - ©2014 Shaho Toofani
OPERATIONS
Sass and Compass Workshop - ©2014 Shaho Toofani
OperationsSCSS
$column: 10%;$margin: 16px;
.island { width: $column*4; margin: $margin*2 $margin/2 $margin+20 $margin; padding: $margin*0.25;}
CSS
.island { width: 40%; margin: 32px 8px 36px 16px; padding: 4px;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Variables & Operations— Interpolation (escaping)CSS
p { font: 1em/1.5em "Open Sans", Arial, Sans-Serif;}
— Wrap with #{ }
Interpolation brackets #{} : That’s a special way to alert Sass to compile something within a selector orproperty name; useful for paths & long strings.
SCSS
$basetypesize: 1em;
p { font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Variables & Operations— NegativesSCSS
$margin: 10px;
.moveup { margin:-$margin*4 -$margin*2 0 $margin;}
CSS
.moveup { margin: -60px 0 10px;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Variables & Operations— Negatives
Wrap in brackets: (-$variable*value)
SCSS
$margin: 10px;
.moveup { margin:(-$margin*4) (-$margin*2) 0 $margin;}
CSS
.moveup { margin: -40px -20px 0 10px;}
Sass and Compass Workshop - ©2014 Shaho Toofani
NESTINGSass avoids repetition by nesting selectors within one another. The same thing works with properties.
Sass and Compass Workshop - ©2014 Shaho Toofani
NESTING RULES— Nest & indent
Nest CSS rules inside each other instead of repeating selectors in separate declarations
CSS
header[role="banner"] { margin: 20px 0 30px 0; border-bottom: 4px solid #333;}header[role="banner"] #logo { float: left; margin: 0 20px 0 0;}header[role="banner"] #logo img { display: block; opacity: .95;}
SCSS
header[role="banner"] { margin: 20px 0 30px 0; border-bottom: 4px solid #333; #logo { float: left; margin: 0 20px 0 0; img { display: block; opacity: .95; } }
}
Sass and Compass Workshop - ©2014 Shaho Toofani
NESTING RULES— Nesting namespacesCSS
h4 { font-family: Georgia, Serif; font-style: normal; font-weight: bold; font-variant: small-caps;}
SCSS
h4 { font: { family: Georgia, Serif; style: normal; weight: bold; variant: small-caps; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
NESTING RULES— Nest child and sibling combinatorsSCSS
article { > h2 { border-top: 1px dashed #eee } // child combinator ~ section { padding-top: 1.5em } // general sibling combinator + footer { margin-top: 0 } // adjacent sibling combinator * { color: #000 }}
CSS
article > h2 { border-top:1px dashed #eee }article ~ section { padding-top: 1.5em }article + footer { margin-top: 0 }article * { color: #000 }
Sass and Compass Workshop - ©2014 Shaho Toofani
REFERENCING PARENT SELECTORS WITH &— Pulls the parent selector into the &
CSS
a { font-weight: bold; text-decoration: none; color: red; border-bottom: 2px solid red;}a:hover { color: blue; border-color: blue;}
SCSS
a { font-weight: bold; text-decoration: none; color: red; border-bottom: 2px solid red; &:hover { color: blue; border-color: blue; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
REFERENCING PARENT SELECTORS WITH &— While nesting, the & symbol references the parent selector
SCSS
.content { border: 1px solid #ccc; padding: 20px; .info { border-color: red; } &.info { border-color: green; }}
CSS
.content { border: 1px solid #ccc; padding: 20px;}.content .info { border-color: red;}.content.info { border-color: green;}
Sass and Compass Workshop - ©2014 Shaho Toofani
REFERENCING PARENT SELECTORS WITH &— Ampersand & prepends before parent selector
CSS
section.main p { margin: 0 0 20px 0; font-size: 18px; line-height: 1.5;}
body.store section.main p { font-size: 16px; line-height: 1.4;}
SCSS
section.main p { margin: 0 0 20px 0; font-size: 18px; line-height: 1.5; body.store & { font-size: 16px; line-height: 1.4; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
REFERENCING PARENT SELECTORS WITH &— & loves working with ModernizrSCSS
button { background: linear-gradient(#444,#222); .no-cssgradients & { background: #333 }}
CSS
button { background: linear-gradient(#444, #222);}.no-cssgradients button { background: #333}
Sass and Compass Workshop - ©2014 Shaho Toofani
Wrap up! - Variables, NestingSCSS
$size :16px;h1 { font: { family: Arial, sans-serif; size: $size; } .introduction & { font: { family: "monaco", Arial, sans-serif; size: $size*1.5; } }}
CSS
h1 { font-family: Arial, sans-serif; font-size: 16px;}.introduction h1 { font-family: "monaco", Arial, sans-serif; font-size: 24px;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Nesting PitfallsN O T E !
Nesting is easy, but dangerous!
Do not nest unnecessarily; Try limiting your nesting to 3 or 4 levels and consider refactoring anythingdeeper.
SCSS
.content { background: #ccc; .cell { h2 { a { &:hover { color: red; } } } }}
CSS
.content { background: #ccc;}.content .cell h2 a:hover { color: red;}
Sass and Compass Workshop - ©2014 Shaho Toofani
COMMENTING IN SASS— Multi-line commentsSCSS
/* This is a multi-line comment that willappear in the final .css file. */
— Multi-line (Loud) commentsSCSS
/*! This is a multi-line comment that willappear in the final .css file. Even in compressed style. */
— Single-line (Silent) comments
Single-line comments use the // prefix at the beginning of each line and aren’t included in the finaloutput
SCSS
// This is a single-line comment.// Single-line comments are removed from the .css file.
Sass and Compass Workshop - ©2014 Shaho Toofani
MIXINSmixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them
arguments.
Sass and Compass Workshop - ©2014 Shaho Toofani
MIXINS— Mixins allow you to easily share styles among different parts of thestylesheet.CSS
ul.plain { color: #444; list-style: none;}ul.plain li { list-style-image: none; list-style-type: none; margin-left: 0;}
SCSS
@mixin no-bullets { list-style: none; li { list-style-image: none; list-style-type: none; margin-left: 0; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
MIXINS— Mixins allow you to define and reuse blocks of stylesSCSS
@mixin round-corner ($radius: 4px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}
begin with @mixin
give it a name
add your $variable(s)
give (an) optional default value(s)
and ...
Sass and Compass Workshop - ©2014 Shaho Toofani
MIXINS— Call it with @includeSCSS
.message { width: 100px; @include round-corner(10);}
CSS
.message { width: 100px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
Sass and Compass Workshop - ©2014 Shaho Toofani
MIXINS— Mixin with Multiple Arguments
arguments are comma-seperated and passed in order
SCSS
@mixin button($radius, $color) { border-radius: $radius; color: $color;}
.btn-a { @include button(4px, #000);}
CSS
.btn-a { border-radius: 4px; color: #000;}
Sass and Compass Workshop - ©2014 Shaho Toofani
MIXINS— Mixin with Multiple Arguments
too few arguments
SCSS
@mixin button($radius, $color) { border-radius: $radius; color: $color;}
.btn-a { @include button(4px);}
ruby
Syntax error: Mixin button is missing argument $color.
Sass and Compass Workshop - ©2014 Shaho Toofani
MIXINS— Mixin with Multiple Arguments
Optional arguments
SCSS
@mixin button($radius, $color: #000) { border-radius: $radius; color: $color;}
.btn-a { @include button(4px);}
CSS
.btn-a { border-radius: 4px; color: #000;}
Sass and Compass Workshop - ©2014 Shaho Toofani
MIXINS— Mixin with Multiple Arguments
Optionals come last!
SCSS
@mixin button($color:#000, $radius) { border-radius: $radius; color: $color;}
.btn-a { @include button(4px);}
ruby
Syntax error: Required argument$color must come before anyoptional arguments.
Sass and Compass Workshop - ©2014 Shaho Toofani
MIXINS— Mixin with Multiple Arguments
Keyword arguments allow passing in any order
SCSS
@mixin button($radius, $color: #000) { border-radius: $radius; color: $color;}@include button($color: #777,$radius: 5px);}
CSS
.btn-a { border-radius: 5px; color: #777777;}
Sass and Compass Workshop - ©2014 Shaho Toofani
CSS3 LOVES MIXINS— box-shadowSCSS
@mixin shadow($x, $y, $blur, $color) { -webkit-box-shadow: $x $y $blur $color; -moz-box-shadow: $x $y $blur $color; box-shadow: $x $y $blur $color;}
SCSS
#sidebar { @include shadow(0, 1px, 2px, rgba(0,0,0,.5));}
CSS
#sidebar { -webkit-box-shadow: 0, 1px, 2px, rgba(0,0,0,.5); -moz-box-shadow: 0, 1px, 2px, rgba(0,0,0,.5); box-shadow: 0, 1px, 2px, rgba(0,0,0,.5);}
Sass and Compass Workshop - ©2014 Shaho Toofani
Mixins - Variable ArgumentsCSS
.btn-a { -webkit-transition: color 0.3s ease-in, background 0.5s ease-out; -moz-transition: color 0.3s ease-in, background 0.5s ease-out; transition: color 0.3s ease-in, background 0.5s ease-out;}
— Passing valid, comma-separated CSS as a single valueSCSS
@mixin transition($val) { -webkit-transition: $val; -moz-transition: $val; transition: $val;}.btn-a {@include transition(color 0.3s ease-in, background 0.5s ease-out);}
— will throw an ERROR ...ruby
Mixin transition takes 1 argument but 2 were passed.
Sass and Compass Workshop - ©2014 Shaho Toofani
Mixins - Variable Arguments— Variable Arguments
Adding ... to an argument creates a variable argument (vararg)
SCSS
@mixin transition($val...) { -webkit-transition: $val; -moz-transition: $val; transition: $val;}
.btn-a { @include transition(color 0.3sease-in, background 0.5s ease-out);}
CSS
.btn-a { -webkit-transition: color 0.3sease-in, background 0.5s ease-out; -moz-transition: color 0.3sease-in, background 0.5s ease-out; transition: color 0.3s ease-in,background 0.5s ease-out;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Mixins - Variable Arguments— Variable arguments in reverse
Previous example: passing a list which is split into arguments by the mixin
SCSS
@mixin button($radius, $color) { border-radius: $radius; color: $color;}
$properties: 4px, #000;
.btn-a { @include button($properties...);}
CSS
.btn-a { border-radius: 4px; color: #000;}
Sass and Compass Workshop - ©2014 Shaho Toofani
CSS3 LOVES MIXINS— gradientSCSS
@mixin linear-gradient($from, $to) { background-color: $to; background-image: -webkit-linear-gradient(top, $from, $to); background-image: -moz-linear-gradient(top, $from, $to); background-image: -ms-linear-gradient(top, $from, $to); background-image: -o-linear-gradient(top, $from, $to); background-image: linear-gradient(to bottom, $from, $to); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$from', endColorstr='$to' -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='$from', endColorstr=}
SCSS
.demo { width:300px; height:300px; @include linear-gradient(#444, #0000ff);}
Sass and Compass Workshop - ©2014 Shaho Toofani
INTERPOLATION— Use interpolation inside Mixins - gradient revisitedSCSS
@mixin linear-gradient($from, $to) { background-color: $to; background-image: -webkit-linear-gradient(top, $from, $to); background-image: -moz-linear-gradient(top, $from, $to); background-image: -ms-linear-gradient(top, $from, $to); background-image: -o-linear-gradient(top, $from, $to); background-image: linear-gradient(to bottom, $from, $to); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr= -ms-filter: quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr=}
SCSS
.demo { width:300px; height:300px; @include linear-gradient(#444, #0000ff);}
Sass and Compass Workshop - ©2014 Shaho Toofani
@EXTENDThe @extend directive (tells) Sass that one selector should inherit the styles of another selector.
Sass and Compass Workshop - ©2014 Shaho Toofani
@extend directive— The @extend directive is used to extend another style.
Nest @extend .classname
Goes inside another class
Don’t have to use multiple classes
Association is in CSS not HTML
CSS
.button { background: blue; color: white; padding:0.2em 0.8em; border-radius:0.4em;}
SCSS
.button-delete { @extend .button; background: red;}
Sass and Compass Workshop - ©2014 Shaho Toofani
@extend directive— Selector inheritance
SCSS
.box { padding: 2em; color: black; background-color: white;}.warning-box { @extend .box; border: 2px dotted red;}.success-box { @extend .box; border: 2px dotted chartreuse;}.info-box { @extend .box; border: 2px dotted blue;}
CSS
.box, .warning-box,
.success-box, .info-box { padding: 2em; color: black; background-color: white;}.warning-box { border: 2px dotted red;}.success-box { border: 2px dotted chartreuse;}.info-box { border: 2px dotted blue;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Multiple @extendsYou can also @extend multiple classes within a declaration, which chains together all the styles fromeach class:
SCSS
$color-accent: #ea4c89;
.alert { padding: 15px; font-size: 1.2em; text-align: center; background: $color-accent;}.important { font-size: 4em;}
SCSS
.alert-positive { @extend .alert; @extend .important; background: #9c3;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Multiple @extendsWhich will compile to:
CSS
.alert, alert-positive { padding: 15px; font-size: 1.2em; text-align: center; background: #ea4c89;}.important, .alert-positive { font-size: 4em;}.alert-positive { background: #9c3;}
Sass and Compass Workshop - ©2014 Shaho Toofani
PLACEHOLDER
Sass and Compass Workshop - ©2014 Shaho Toofani
Using placeholder selectors with@extendPlaceholder selectors allow you to define classes that won’t appear in the outputted CSS on their own.You can reference placeholders using @extend.
SCSS
%button { padding: 10px; font-weight: bold; border-radius: 6px;}
SCSS
.submit { @extend %button; background: green;}
CSS
.submit { padding: 10px; font-weight: bold; border-radius: 6px; background: green;}Sass and Compass Workshop - ©2014 Shaho Toofani
Using placeholder selectors with@extend— Use placeholder selectors to extend styles only when needed
SCSS
%box { padding: 2em; color: black; background-color: white;}.warning-box { @extend %box; border: 2px dotted red;}.success-box { @extend %box; border: 2px dotted chartreuse;}.info-box { @extend %box; border: 2px dotted blue;}
CSS
.warning-box,
.success-box,
.info-box { padding: 2em; color: black; background-color: white;}.warning-box { border: 2px dotted red;}.success-box { border: 2px dotted chartreuse;}.info-box { border: 2px dotted blue;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Using placeholder selectors with@extend— Define clearfix as placeholder
Output will be:SCSS
%clearfix { &:after { content: " "; display: block; clear: both; }}
SCSS
#container { position: relative; min-width: 42.5em; @extend %clearfix;}
CSS
#container:after { content: " "; display: block; clear: both;}#container { position: relative; min-width: 42.5em;}
Sass and Compass Workshop - ©2014 Shaho Toofani
.sassIndented Sass
Sass and Compass Workshop - ©2014 Shaho Toofani
.scss vs .sass— Indented syntax (.sass) relies on whitespace to simplify
SCSS
.content { border: 1px solid #ccc; padding: 20px; h2 { font-size: 3em; margin: 20px 0; }}
SASS
.content border: 1px solid #ccc padding: 20px h2 font-size: 3em margin: 20px 0
Sass and Compass Workshop - ©2014 Shaho Toofani
.scss vs .sass— Mixin declaration
SCSS
@mixin box-sizing($x) { -webkit-box-sizing: $x; -moz-box-sizing: $x; box-sizing: $x;}
.content { @include box-sizing(border-box);}
SASS
=box-sizing($x) -webkit-box-sizing: $x -moz-box-sizing: $x box-sizing: $x
.content +box-sizing(border-box)
Read more: Sass vs. SCSS: which syntax is better?
Sass and Compass Workshop - ©2014 Shaho Toofani
FUNCTIONS
Sass and Compass Workshop - ©2014 Shaho Toofani
Writing functions in SassA function is a self contained tool to generate a value that can be used elsewhere.
The result of a function can be used in a mixin or directly into the style sheet.
SCSS
@function fluid-it() { @return 35%; // always return 35%}
.sidebar {width: fluid-it();}
The @return directive tells Sass to return something:
CSS
.sidebar {width: 35%;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Writing functions in Sass— Function with argumentsSCSS
@function square($value) { @return ($value*$value);}
p { margin-left: square(2px);}
Will return:
CSS
p { margin-left: 4px;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Writing functions in Sass— Use functions
target / context
For example, If the target size of our sidebar is 400px and the context of its parent is 1000px:
SCSS
@function fluid-it($target, $context) { @return ($target / $context) * 100%;}
.sidebar { width: fluid-it(400, 1000);}
CSS
.sidebar { width: 40%;}
Create a CSS grid using calc()
Sass and Compass Workshop - ©2014 Shaho Toofani
COLORS
Sass and Compass Workshop - ©2014 Shaho Toofani
Colors— Built-in color functions
SCSS
$linkcolor: #ce4dd6;
a { color: $linkcolor; &:hover { color: lighten($linkcolor, 30%); } &:active { color: darken($linkcolor, 30%); }}
CSS
a { color: #ce4dd6;}a:hover { color: #f0c9f3;}a:active { color: #6b1a70;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Colors— RGB FunctionsSCSS
rgb($red, $green, $blue)
Creates a Color from red, green, and blue values.
Creates a Color from red, green, blue, and alpha values.
SCSS
rgba($red, $green, $blue, $alpha)
Gets the red component of a color.
SCSS
red($color)
Mixes two colors together.
SCSS
mix($color-1, $color-2)
Sass RGB Functions (List)
Sass and Compass Workshop - ©2014 Shaho Toofani
Colors— The RGBA functionSCSS
a { color: rgba(blue, 0.75) }p { background: rgba(#ffa, 0.25) }
CSS
a { color: rgba(255, 255, 170, 0.25) }p { background: rgba(255, 255, 170, 0.25) }
— Inspecting ColorsSCSS
$color: red; // #ff0000hue($color); // 0 degsaturation($color); // 100%lightness($color); // 50%red($color); // 100green($color); // 0blue($color); // 0alpha($color); // 100
Sass and Compass Workshop - ©2014 Shaho Toofani
Colors— Manipulating Colors
Sass and Compass Workshop - ©2014 Shaho Toofani
ColorsN O T E !
HSLA Colors
HueHue is a degree on the color wheel; 0 (or360) is red, 120 is green, 240 is blue.Numbers in between reflect different shades.
Saturationis a percentage value; 100% is the full color.0% is completely denatured (grayscale).
Lightnessis also a percentage; 0% is dark (black),100% is light (white), and 50% is theaverage.
AlphaOpacity/Transparency value. 0 is fullytransparent. 1 is fully opaque. 0.5 is 50%transparent.
Yay for HSLa
Sass and Compass Workshop - ©2014 Shaho Toofani
Colors— HSLA Manipulations
SCSS
adjust-hue(#77a7f9, 90);
SCSS
saturate(#9b8a60, 50%);
SCSS
darken(#6cf620, 30%);
SCSS
adjust-hue(#77a7f9, -90);
SCSS
desaturate(#d9a621, 50%);
SCSS
lighten(#2e7805, 50%);
Sass and Compass Workshop - ©2014 Shaho Toofani
Colors— change-color: Set any property of a colorSCSS
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
SCSS
change-color(#ba5637, $hue:60);
SCSS
change-color(#8e9cb3, $saturation:100);
SCSS
change-color(#6cf620, $green: 60, $blue: 100);
Sass and Compass Workshop - ©2014 Shaho Toofani
Colors— adjust-color: Incrementally manipulate any property of a colorSCSS
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
SCSS
adjust-color(#d3fa7b, $hue:60, $lightness: -20%);
N O T E !Last example produce: rgba(95, 255, 227, 0.75);
SCSS
adjust-color(#5f8fe3, $green:100, $alpha: -0.25);
Sass and Compass Workshop - ©2014 Shaho Toofani
Color online examplesSassMe - Visualize SASS color functions in real-time without compiling
How color works in Sass
Flatt sassy butons
Sass Button Generator
Sass mixin for inner shadow
Sass color function comparisons
Sass and color manipulation on Codepen.io
Read more:
Mixins for semi-transparent colors
Controlling color with Sass color functions
How to programmatically go from one color to another in Sass
Sass and Compass Workshop - ©2014 Shaho Toofani
MATH
Sass and Compass Workshop - ©2014 Shaho Toofani
Math— Basic Arithmetic
+ addition
- subtraction
* multiplication
/ division
% modulo = remainder from a division operation. 12 % 3 results in 0, while 12 % 5 returns 2.
Math operators ( +, -, *, /, % ) work with numbers
SCSS
1em + 1em; // 2em1em - 1em; // 0em1in + 72pt; // 2in6px * 4; // 24px18 % 5; // 3
Sass and Compass Workshop - ©2014 Shaho Toofani
Math— Division a special case
The trickiest of the number operations, due to font:
SCSS
font : 18px / 1.45em; // 18px/1.45emfont : (20px / 5); // 4pxfont : 20px / 5 + 1; // 5pxfont : $base / 5; // 4px$size : 20px / 5; // 4pxwidth: 20px * 5 / 2; // 50px
Sass defaults to returning (up to) five digits after a decimal point.
Sass and Compass Workshop - ©2014 Shaho Toofani
Math— String Addition
Addition on strings concatenates them:
SCSS
$family: "Helvetica " + "Neue"; // "Helvetica Neue"
Initial left-side string determines post-concatenation quotes:
SCSS
$family: 'sans-' + serif // 'sans-serif'$family: sans- + 'serif' // sans-serif
Sass and Compass Workshop - ©2014 Shaho Toofani
Math— Pre-Defined Math Utilities
round($number) - round to closest whole number
ceil($number) - round up
floor($number) - round down
abs($number) - absolute value
min($list) - minimum list value
max($list) - maximum list value
percentage($number) - convert to percentage
Number Functions
SCSS
percentage(13/25) // 52%round(2.4) // 2ceil(2.2) // 3floor(2.6) // 2abs(-24) // 24
Sass and Compass Workshop - ©2014 Shaho Toofani
CONTROL DIRECTIVE
Sass and Compass Workshop - ©2014 Shaho Toofani
Logic Operators— Comparison (Equality) operators
The equality operators can be used on everything (strings of text and numbers).
== means equal to
!= not equal to
— Relational operators
Sass allows the use of relational operators on numbers:
> greater than
>= greater than or equal to
< less than
<= less than or equal to
Sass and Compass Workshop - ©2014 Shaho Toofani
Logic OperatorsRelational operators ( <, >, <=, >= ) evaluate numbers
SCSS
1 < 20 // true10 <= 20 // true4 > 1 // true4 >= 1 // true
Comparison operators ( ==, != ) evaluate all data types
SCSS
1 + 1 == 2 // truesmall != big // true#000 == black // truewhite != #fff // false
Sass and Compass Workshop - ©2014 Shaho Toofani
Control DIRECTIVE— @if statement
Using @if, we can conditionally output code
SCSS
$theme: dark;
header { @if $theme == dark { background: #000; }}
CSS
header { background: #000;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Control DIRECTIVE— The @if and @else if control directives
@else provides a fallback if everything evaluates false or null
SCSS
$theme: light;
header { @if $theme == dark { background: #000; } @else { background: #fff; }}
CSS
header { background: #fff;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Control DIRECTIVE— The @if and @else if control directives
@else if allows for multiple comparisons:
SCSS
$theme: pink;
header { @if $theme == dark { background: #000; } @else { background: #fff; } @else if $theme == pink { background: pink; }}
CSS
header { background: pink;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Control DIRECTIVE— The Single-line if function
if( condition, "true value", "false value" )
SCSS
$theme: light;
header { @if $theme == dark { color: #000; } @else { color: #fff; }}
SCSS
$theme: light;
header { color:if($theme == dark, #000, #fff)}
Sass and Compass Workshop - ©2014 Shaho Toofani
Control DIRECTIVE— The @for loop
The @for directive repeatedly outputs a set of styles.
A counter variable is just a placeholder for the current state of the loop; it increments with eachiteration of the loop.
SCSS
@for $i from 1 to 6 { span-#{$i} { width: 20px + ($i * 20px); }}
CSS
span-1 { width: 40px; }span-2 { width: 60px; }span-3 { width: 80px; }span-4 { width: 100px; }span-5 { width: 120px; }
So, where is the span-6?!
Sass and Compass Workshop - ©2014 Shaho Toofani
Control DIRECTIVE— The @for loopSCSS
@for $i from 1 through 6 { span-#{$i} { width: 20px + ($i * 20px); }}
CSS
span-1 { width: 40px; }span-2 { width: 60px; }span-3 { width: 80px; }span-4 { width: 100px; }span-5 { width: 120px; }span-6 { width: 140px; }
Sass and Compass Workshop - ©2014 Shaho Toofani
Lists— Lists: A comma- or space-separated group of values
Lists are just a series of other values, separated by either spaces or commas.
SCSS
$colors: red, green, blue, yellow;
$margin: 40px 0 20px 100px;
$items: "item-1" "item-2" "item-3";
$items-comma: "item-1", "item-2", "item-3";
$my-font-face: Helvetica, Arial, sans-serif;
Read more: Understanding Sass lists
Sass and Compass Workshop - ©2014 Shaho Toofani
Lists— Sass list functions
length - number of items in a list:
SCSS
$colors: red green blue yellow;$size: length($colors); // 4
append - adds a value to the end of a list:
SCSS
$colors: red green blue yellow;$all: append($colors, black); // red green blue yellow black
join - combines two lists together:
SCSS
$colos1: red green;$colors2: blue yellow;$all: join($colors1, $colors2) // red green blue yellow
Sass and Compass Workshop - ©2014 Shaho Toofani
Lists— Sass list functions (continued)
index - returns a value's list position or false:
SCSS
$colors: red green blue yellow;$i: index($colors, red); // 1 (starts at 1 not 0)$i: index($colors, black); // false
nth - return the item at list position n:
SCSS
$colors: red green blue yellow;$i: nth($colors, 3); // blue
Sass and Compass Workshop - ©2014 Shaho Toofani
Lists— Sass list functions (continued)
zip - combines lists in comma-separated pairs:
SCSS
$colors: red blue;$sense: warm cold;$all: zip($colors, $sense);
red warm
blue cold
Sass and Compass Workshop - ©2014 Shaho Toofani
Control DIRECTIVE— The @each loops
The @each directive is useful to loop through a list of items.
SCSS
$logos: puma nike adidas;
@each $logo in $logos { .#{$logo} { background: url(#{$logo}.jpg); }}
CSS
.puma { background: url(puma.jpg);}
.nike { background: url(nike.jpg);}
.adidas { background: url(adidas.jpg);}
Sass and Compass Workshop - ©2014 Shaho Toofani
Control DIRECTIVE— The @while loop
@while requires manually updating the index.
SCSS
$level: 0;@while $level < 5 { .tag-#{$level + 1} { font-size: .7em + ($level * .5em); } $level: $level + 1;}
CSS
.tag-1 { font-size: 0.7em; }
.tag-2 { font-size: 1.2em; }
.tag-3 { font-size: 1.7em; }
.tag-4 { font-size: 2.2em; }
.tag-5 { font-size: 2.7em; }
Sass and Compass Workshop - ©2014 Shaho Toofani
Control DIRECTIVE— The @while loop
SCSS
$i: 2;
.grid { position: relative; display: block; @while $i <= 6 { &.span-#{$i} { width: $i * 30px; float: left; }
$i: $i + 2; }}
CSS
.grid { position: relative; display: block;}.grid.span-2 { width: 60px; float: left;}.grid.span-4 { width: 120px; float: left;}.grid.span-6 { width: 180px; float: left;}
Sass and Compass Workshop - ©2014 Shaho Toofani
PARTIALSImporting the right way
Sass and Compass Workshop - ©2014 Shaho Toofani
@import, The Legacy way
master.css containes:
CSS
@import 'reset.css';@import 'base.css';@import 'layout.css';@import 'typography.css';..
Sass and Compass Workshop - ©2014 Shaho Toofani
Partials, Importing the right wayEnter the @import rule, which Sass extends to allow the importing of multiple SCSS files, mergingthem into a single CSS file when compiled.
A single CSS means fewer HTTP connections. Performance!
Variables can be defined in their own file, then imported whenever needed.
Imported SCSS files can contain project-agnostic mixins that can be shared and reused.
Filename starts with an underscore, for example _mixins.scss
Sass and Compass Workshop - ©2014 Shaho Toofani
Partials— Use @import to merge chunks of your SCSS into one file.
OR
SCSS
@import "colors.scss";@import "mixins.scss";@import "grid.scss";
SCSS
@import "colors";@import "mixins";@import "grid";
Sass and Compass Workshop - ©2014 Shaho Toofani
Partials— Separate partials for:
and
grids, typography, colors, forms,
tables
mixins & variables
different post types for blogs
media queries
site sub-sections
reset normalize
On compile, Sass will import the partialsand output the relevant CSS where theyare placed.
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query@media directives in Sass behave just like they do in plain CSS, with one extra capabilities.
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— CSS Media Query
One of the foundations of building responsive websites is the CSS media query. The ability to “listen” tothe browser’s viewport for varying dimensions and then apply certain styles based on those dimensionsis the cornerstone of creating flexible layouts that adapt to different devices.
CSS
.sidebar { float: right; width: 300px;}@media screen and (max-width: 480px) { .sidebar { float: none; width: 100%; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— Responsive Web Design in Sass — @media Directive
CSS
.sidebar { float: right; width: 300px;}@media screen and (max-width: 480px){ .sidebar { float: none; width: 100%; }}
SCSS
.sidebar { float: right; width: 300px; @media screen and (max-width:480px){ float: none; width: 100%; }}
begin with @media
write media queries as normal
if it appears within a rule, it will ‘bubble up’ and put the selectors within the rule.
media queries can be nested
combined with the and rule
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— Nested Media Queries
In Sass, you can nest media queries inside the original declaration, and they will “bubble up” into theirown separate declarations when the stylesheet is compiled.
SCSS
section.main { float: left; width: 65%; font-size: 16px; line-height: 1.4; @media screen and (max-width: 800px) { float: none; width: auto; } @media screen and (max-width: 500px) { font-size: 12px; line-height: 1.4; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media QueryNesting media queries avoids rewriting the selector (section.main in this example) each time you’d liketo make adjustments for various breakpoints.
CSS
section.main { float: left; width: 65%; font-size: 16px; line-height: 1.4;}@media screen and (max-width: 800px) { section.main { float: none; width: auto; }}@media screen and (max-width: 500px) { section.main { font-size: 12px; line-height: 1.4; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— Using variables to define breakpointsSCSS
$width-small: 500px;$width-medium: 800px;$width-large: 1200px;
section.main { font-size: 16px; line-height: 1.4; @media screen and (max-width: $width-large) { float: left; width: 65%; } @media screen and (max-width: $width-medium) { float: none; width: auto; } @media screen and (max-width: $width-small) { font-size: 12px; line-height: 1.4; }}Sass and Compass Workshop - ©2014 Shaho Toofani
Media QueryOutput:
CSS
section.main { font-size: 16px; line-height: 1.4;}@media screen and (max-width: 1200px) { section.main { float: left; width: 65%; }}@media screen and (max-width: 800px) { section.main { float: none; width: auto; }}@media screen and (max-width: 500px) { section.main { font-size: 12px; line-height: 1.4; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media QueryGoing a step further, you can also define an entire media query as a variable:
SCSS
$mobile-first: "screen and (min-width: 300px)"; @media #{$mobile-first} { .content { font-size: 14px; line-height: 1.5; }}
CSS
@media screen and (min-width: 300px) { .content { font-size: 14px; line-height: 1.5; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— Combining @content blocks and mixins
By using Sass’s @content directive, you can pass entire blocks of styles to a mixin, and Sass will placethose blocks back into the declaration that calls the mixin.
SCSS
$width-small: 400px;$width-medium: 760px;$width-large: 1200px; @mixin responsive($width) { @if $width == wide-screens { @media only screen and (max-width: $width-large) { @content; } } @else if $width == medium-screens { @media only screen and (max-width: $width-medium) { @content; } } @else if $width == small-screens { @media only screen and (max-width: $width-small) { @content; } }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query@content - pass a block of properties to a mixin
SCSS
.leftside { float: left; width: 70%; @include responsive(wide-screens) { width: 80%; } @include responsive(medium-screens) { width: 50%; font-size: 14px; } @include responsive(small-screens) { float: none; width: 100%; font-size: 12px; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media QueryWill output:
CSS
.leftside { float: left; width: 70%;}@media only screen and (max-width: 1200px) { .leftside { width: 80%; }}@media only screen and (max-width: 760px) { .leftside { width: 50%; font-size: 14px; }}@media only screen and (max-width: 400px) { .leftside { float: none; width: 100%; font-size: 12px; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Queryand ...
SCSS
h1 { font-size: 40px; @include responsive(wide-screens) { font-size: 48px; } @include responsive(medium-screens) { font-size: 32px; } @include responsive(small-screens){ font-size: 20px; }}
CSS
h1 { font-size: 40px; }
@media only screen and (max-width: 1200px) { h1 { font-size: 48px; }}@media only screen and (max-width: 760px) { h1 { font-size: 32px; }}@media only screen and (max-width: 400px) { h1 { font-size: 20px; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— Media Query Retrofitting
SCSS
.sidebar { border: 1px solid #ccc; @media (min-width: 700px) { float: right; width: 30%; }}
CSS
.sidebar { border: 1px solid #ccc;}
@media (min-width: 700px) { .sidebar { float: right; width: 30%; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— Media Query Retrofitting
SCSS
@mixin respond-to { @media (min-width: 700px) { @content }}
.sidebar { border: 1px solid #ccc; @include respond-to { float: right; width: 30%; }}
CSS
.sidebar { border: 1px solid #ccc;}
@media (min-width: 700px) { .sidebar { float: right; width: 30%; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— Media Query Retrofitting
SCSS
@mixin respond-to ($media) { @if $media == tablet { @media (min-width: 700px) { @content } }}
.sidebar { border: 1px solid #ccc; @include respond-to(tablet) { float: right; width: 30%; }}
CSS
.sidebar { border: 1px solid #ccc;}
@media (min-width: 700px) { .sidebar { float: right; width: 30%; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— Media Query Retrofitting
SCSS
@mixin respond-to($query) { @media (min-width: $query) { @content }}
.sidebar { border: 1px solid #ccc; @include respond-to(900px) { float: right; width: 30%; }}
CSS
.sidebar { border: 1px solid #ccc;}
@media (min-width: 900px) { .sidebar { float: right; width: 30%; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Media Query— General Respond-To Mixin
SCSS
@mixin respond-to($value, $query) { @media ($value: $query) { @content }}
.sidebar { border: 1px solid #ccc; @include respond-to(max-width, 600px) { float: right; width: 30%; }}
CSS
.sidebar { border: 1px solid #ccc;}
@media (min-width: 600px) { .sidebar { float: right; width: 30%; }}
Sass and Compass Workshop - ©2014 Shaho Toofani
COMPASSCompass is an open-source CSS Authoring Framework.
Sass and Compass Workshop - ©2014 Shaho Toofani
WHAT IS Compass?— Compass is an open-source CSS Authoring Framework.
Looks like an extension to Sass
Compass was the first Sass-based framework
We get access to lots and lots of reusable patterns and tools for easily creating CSS
Compass lets you write CSS3 goodies like box-shadow, gradients and ... with a single syntax
It magically creates cross-browser compatible CSS of everything
It provides Mixins, helpers, New Functions, reset and more
Sass and Compass Workshop - ©2014 Shaho Toofani
WHAT IS Compass?
— Official Website: http://compass-style.org
— GitHub development homepage: https://github.com/chriseppstein/compass
Sass and Compass Workshop - ©2014 Shaho Toofani
INSTALLING COMPASS— Command prompt(line) installruby
gem install compass
You’ve just installed Compass. Double-check:
ruby
Fetching: compass-0.12.2.gem (100%)Successfully installed compass-0.12.21 gem installedInstalling ri documentation for compass-0.12.2...Installing RDoc documentation for compass-0.12.2...
ruby
compass -v
It should return:
ruby
Compass 0.12.2 (Alnilam)
Sass and Compass Workshop - ©2014 Shaho Toofani
Useful Commands— Check which versions of Compass are availableruby
gem list compass –a –r
— Installing the latest pre-release versionruby
gem install compass --pre
— Uninstall a specific version of Compass
versionnumber is the release you want to remove (for example, 0.12.2).
ruby
gem uninstall compass --version versionnumber
Sass and Compass Workshop - ©2014 Shaho Toofani
Create a Sass and Compass project— Compass's built-in create command to make a project in the folder specifiedruby
compass create new-project
— Or just run following inside a folderruby
compass create
— Set up an existing project with compass - ( )moreruby
compass install compass
— Automatic compile to CSS from the Command Lineruby
compass watch
Sass and Compass Workshop - ©2014 Shaho Toofani
Default Workflow in Compass— What are the generated files in a Compass project for?
.sass-cache: This folder will contain the cache files that Sass uses to build your CSS files faster. You don'tneed to do anything with it.
sass: This folder will store the Sass files that will be written or amended. This folder can be calledanything, but 'sass' is the default name.
stylesheets: This folder will contain the compiled CSS files that Sass will generate. It can be calledanything, but stylesheets is the default folder name in Compass projects.
config.rb: This file contains the configuration defaults for a project, what the various folders are called,and where they are located. It also controls the compression style of the generated CSS.
Sass and Compass Workshop - ©2014 Shaho Toofani
Customizing Compass project— Create a customized Compass projectruby
compass create --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir
— Creating a bare Compass projectruby
compass create --bare --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"
Sass and Compass Workshop - ©2014 Shaho Toofani
Understanding the config.rb fileThe config.rb file is the brain of a Compass project. It defines the relationship between files and theirassets, how and where the CSS should be generated, and any dependencies for a project.
ruby
http_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"output_style = :compressed
fonts_dir = "fonts"
N O T E !
Clean .sass-cache folder via Compass:
ruby
compass clean
Sass and Compass Workshop - ©2014 Shaho Toofani
Importing CompassCompass comprises five main modules:
utilities
typography
css3
layout
reset
— Importing
Once installed, use @import to make Compass available:
SCSS
@import "compass"; // utilities, typography, css3@import "compass/layout";
Sass and Compass Workshop - ©2014 Shaho Toofani
Importing ResetAdds a set of rules based on after compiling:Eric Meyer's reset
SCSS
@import "compass/reset";
Avoid if you plan on using Normalize.css
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass Mixins— Example with CSS3 MixinsSCSS
@import "compass";
.message { @include background(linear-gradient(#9b9592, #3c3733)); @include border-radius(5px);}
CSS
.message { background: -webkit-linear-gradient(#9b9592, #3c3733); background: -moz-linear-gradient(#9b9592, #3c3733); background: -ms-linear-gradient(#9b9592, #3c3733); background: linear-gradient(#9b9592, #3c3733); -moz-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass Mixins— Radial Gradient MixinSCSS
@import "compass";
.message { @include background(radial-gradient(center, #9b9592, #3c3733));}
CSS
.message { background: -webkit-gradient(radial, 50%, 0, 50%, 100, color-stop(0%, #9b9592), color-stop(100%, #3c3733)); background: -webkit-radial-gradient(center, #9b9592, #3c3733); background: -moz-radial-gradient(center, #9b9592, #3c3733); background: -o-radial-gradient(center, #9b9592, #3c3733); background: radial-gradient(center, #9b9592, #3c3733);}
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass MixinsMore robust color stops are also supported:
SCSS
@import "compass";
.message { @include background(linear-gradient(top, #9b9592, #e79e23 75%, #3c3733));}
CSS
.message { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9b9592), color-stop(75%, #e79e23), color-stop(100%, #3c3733)); background: -webkit-linear-gradient(top, #9b9592, #e79e23 75%, #3c3733); background: -moz-linear-gradient(top, #9b9592, #e79e23 75%, #3c3733); background: -o-linear-gradient(top, #9b9592, #e79e23 75%, #3c3733); background: linear-gradient(top, #9b9592, #e79e23 75%, #3c3733);}
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass Mixins— Text shadow with default valuesSCSS
@import "compass";
$default-text-shadow-color: #ccc;$default-text-shadow-blur: 0;$default-text-shadow-h-offset: 3px;$default-text-shadow-v-offset: 4px;
SCSS
.headline { @include text-shadow;}
CSS
.headline { text-shadow: 3px 4px 0 #cccccc;}
More...
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass Mixins— Multiple columnsSCSS
@import "compass";
p.three-cols { @include column-count(4); @include column-gap(100px); @include column-rule(1px, dotted, lighten(blue, 14%));}
CSS
p.three-cols { -moz-column-count: 4; -webkit-column-count: 4; column-count: 4; -moz-column-gap: 100px; -webkit-column-gap: 100px; column-gap: 100px; -moz-column-rule: 1px dotted #4747ff; -webkit-column-rule: 1px dotted #4747ff; column-rule: 1px dotted #4747ff;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass mixins— Clearfix, different approaches
SCSS
@import "compass";
.box { @include clearfix;}
CSS
.box { overflow: hidden; *zoom: 1;}
SCSS
@import "compass";
.other-box { @include pie-clearfix;}
CSS
.other-box { *zoom: 1;}.other-box:after { content: ""; display: table; clear: both;}
Micro clearfix hack
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass's text replacement mixins— The hide-text mixinSCSS
@import "compass";
.hideme { @include hide-text;}
CSS
.hideme { text-indent: -119988px; overflow: hidden; text-align: left; }
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass's text replacement mixins— The squish-text mixin
squish-text is to squish text inline if you want it to be visually hidden but still accessible to screenreaders.
SCSS
@import "compass";
.ir { @include squish-text;}
CSS
.ir { font: 0/0 serif; text-shadow: none; color: transparent;}
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass mixins— General utilities
Browser Hacks
Clearfxes
Resets
— Element styles
Links
Lists
Float
Tables
Text
— CSS3
gradients
background-size
border-radius
box-shadow
box-sizing
CSS3 PIE
font-face
opacity
transform
transition
more...
Sass and Compass Workshop - ©2014 Shaho Toofani
Enable relative assetsruby
# To enable relative paths to assets via compass helper functions. Uncomment:relative_assets = true
This setting (not enabled by default so just uncomment it) allows Compass helpers to know that if animage is specified (for example), it knows where to find it relative to the CSS
— For exampleCSS
background-image: url('../img/image.jpg');
— Do:SCSS
background-image: image-url('image.jpg');
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass Helper functions— Example with helper functionsSCSS
@import "compass";
header { background: image-url('header-bg.png'); h1 { width: image-width('logo.png'); height: image-height('logo.png'); background: inline-image('logo.png') }}
CSS
header { background: url('/images/header-bg.png?1351…');}header h1 { width: 220px; height: 100px; background: url('data:image/png;base64...');}
Sass and Compass Workshop - ©2014 Shaho Toofani
The Compass cache busterN O T E !
The Compass cache buster; it prevents browsers caching assets when they have changed (the valuechanges each time the image's modification time changes).
CSS
background-image: url('../img/logo-small.png?1357598801');
To disable it on a case-by-case basis you can do this:
SCSS
background-image: image-url("logo-small.png", false);
To disable it globally, read more ...
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass Helper functions— Opposite Position
Returns the opposite side (or pair):
SCSS
@import "compass";
$opposite: opposite-position(top); // bottom$opposite: opposite-position(left); // right$opposite: opposite-position(right bottom); // left top
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass Helper functions— Using opposite-position - CSS shapes:
CSS
.arrow { border: 50px solid transparent; border-bottom: 50px solid #ff4136; border-top: 0; height: 0; width: 0;}
CSS Triangle
SCSS
@import "compass";
@mixin arrow($point) { $opposite: opposite-position($point); border: 50px solid transparent; border-#{$opposite}: 50px solid #ff4136; border-#{point}: 0; height: 0; width: 0;}
.arrow { @include arrow(top);}
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass Helper functionsimage-url
image-height
image-width
inline-image
font-url
pi
sin
cos
tan
adjust-lightness, scale-lightness
adjust-saturation, scale-saturation
more...
Sass and Compass Workshop - ©2014 Shaho Toofani
Compass image sprites— Spriting with Compass
Generates the sprite map & the CSS
Easy to configure classes, spacing, etc
Add a new image? updates automatically
SCSS
@import "compass";@import "my-icons/*.png";@include all-my-icons-sprites;
CSS
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
Sass and Compass Workshop - ©2014 Shaho Toofani
Additional sprite configuration options— Add the height and width to each generated HTML selectorSCSS
$my-icons-sprite-dimensions: true;
CSS
.my-icons-save { background-position: 0 -96px; height: 32px; width: 32px;}
— Extra padding around the imagesSCSS
$my-icons-spacing: 10px;
Spriting with Compass, Read more ...
Sass and Compass Workshop - ©2014 Shaho Toofani
Creating data URIs from images— The inline-image syntaxSCSS
@import "compass";.logo { background-image: inline-image("svg/logo.svg");}
— CSS generated by that rule (truncated for brevity)
CSS
.logo { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmN...
— Easy fallbacks for non-SVG capable devicesSCSS
.logo { background-image: inline-image("svg/logo.svg"); .no-svg & { background-image: image-url("png/logo.png"); }}
Sass and Compass Workshop - ©2014 Shaho Toofani
Susy grid systemThe homepage for Susy is http://susy.oddbird.net/
— Installing the Susy Compass pluginruby
gem install susy
ruby
Fetching: susy-1.0.9.gem (100%)
Successfully installed susy-1.0.9
1 gem installed
— Including Susy in a project
Open the config.rb file and enter the following line at the top:
ruby
require "susy"
Sass and Compass Workshop - ©2014 Shaho Toofani
960.gs— Building 960.gs grid system from scratch with Sass
Sass and Compass Workshop - ©2014 Shaho Toofani
ResourcesManning: Sass and Compass in Action
thesassway.com
Sass for Web Designers
Sass Style Guide
Create a CSS grid using calc()
Advanced SASS Mixins & Color Functions
The Extend Concept
Sass & Compass Color Functions
Sass: Mixin or Placeholder?
Understanding Sass lists
Handy Advanced Sass
Having fun with Sass lists and strings
IE-friendly mobile-first CSS with Sass 3.2
Sass tag on hongkiat.com
Sass and Compass Workshop - ©2014 Shaho Toofani
That's itBy | Shaho Toofani @shaho
By becoming web
developers, you agreed on
staying up to date with all
the new cool stuff. Someone
said!
Sass and Compass Workshop - ©2014 Shaho Toofani