sass and compass workshop

SASS & COMPASS WORKSHOPFeb. 21, 2014 | Ver. 8

Shaho Toofani

Sass and Compass Workshop - ©2014 Shaho Toofani

https://twitter.com/shaho

Toolscodepen.io

SassMeister

Grunt/LiveReload


http://codepen.io/

http://sassmeister.com/

https://github.com/gruntjs/grunt-contrib-livereload

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


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


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;}


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);}


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);}


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; } }}


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; }}


WHAT IS SASS?Style with attitude


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;}


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


http://www.hamptoncatlin.com/

http://nex-3.com/

http://chriseppstein.github.io/

WHAT IS SASS?

— Official Website: http://sass-lang.com

— The project's GitHub development homepage: https://github.com/nex3/sass


http://sass-lang.com/

https://github.com/nex3/sass

INSTALLATIONDon't panic!


Installing RubyBefore we can install Sass and Compass, we need Ruby installed. If you are on OS X, you already haveit.


http://rubyinstaller.org/downloads/

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

http://sass-lang.com/install

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


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.


http://mhs.github.com/scout-app

http://mhs.github.com/scout-app


CodeKit - http://incident57.com/codekit


http://incident57.com/codekit/

http://incident57.com/codekit/


LiveReload - http://livereload.com


http://livereload.com/

http://livereload.com/

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


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; }


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


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; }


sass --watch --style compact screen.scss:screen.css


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


sass --watch --style compressed screen.scss:screen.css


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.


VARIABLESallow you to use the same value in multiple places, as well as perform basic maths and functions.


Variables— Using variables:

Colors - for example shades of a particular color

Font Stacks

Margin & Padding - consistency in design

Border Widths

Border Radius


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;


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;


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;}


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.


Variables— The Default ValueSCSS

$title: 'My Blog';$title: 'About Me';

h2:before { content: $title;}

CSS

h2:before { content: 'About Me';}


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';}


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"


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;}


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;


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.


http://www.w3.org/TR/css-variables/

OPERATIONS


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;}


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;}


Variables & Operations— NegativesSCSS

$margin: 10px;

.moveup { margin:-$margin*4 -$margin*2 0 $margin;}

CSS

.moveup { margin: -60px 0 10px;}


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;}


NESTINGSass avoids repetition by nesting selectors within one another. The same thing works with properties.


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; } }

}


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; }}


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 }


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; }}


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;}


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; }}


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}


http://modernizr.com/

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;}


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;}


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.


MIXINSmixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them

arguments.


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; }}


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 ...


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;}


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;}



too few arguments

SCSS


.btn-a { @include button(4px);}

ruby

Syntax error: Mixin button is missing argument $color.



Optional arguments

SCSS

@mixin button($radius, $color: #000) { border-radius: $radius; color: $color;}


CSS




Optionals come last!

SCSS

@mixin button($color:#000, $radius) { border-radius: $radius; color: $color;}


ruby

Syntax error: Required argument$color must come before anyoptional 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



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);}


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.


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;}


Mixins - Variable Arguments— Variable arguments in reverse

Previous example: passing a list which is split into arguments by the mixin

SCSS


$properties: 4px, #000;

.btn-a { @include button($properties...);}

CSS



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);}


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);}


@EXTENDThe @extend directive (tells) Sass that one selector should inherit the styles of another selector.


@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;}


@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;}


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;}


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;}


PLACEHOLDER


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;}


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;}


.sassIndented Sass


.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


.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?


http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

FUNCTIONS


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%;}


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;}


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()


http://zerosixthree.se/create-css-grid-using-calc/

COLORS


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;}


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)


http://sass-lang.com/documentation/Sass/Script/Functions.html#rgb-instance_method

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


Colors— Manipulating Colors


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


http://css-tricks.com/yay-for-hsla/

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%);


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);


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);


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


http://codepen.io/atelierbram/pen/rziAg

http://codepen.io/jason-kinney/pen/AqbCi

http://codepen.io/awesomephant/pen/ALrsb

http://codepen.io/markmurray/pen/qcsvA

http://codepen.io/DanielJLewis/pen/aECbD

http://codepen.io/search?q=sass+color&limit=all&depth=everything&show_forks=false

http://thesassway.com/intermediate/mixins-for-semi-transparent-colors

http://robots.thoughtbot.com/controlling-color-with-sass-color-functions

http://thesassway.com/advanced/how-to-programtically-go-from-one-color-to-another-in-sass

MATH


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


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.


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


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


CONTROL DIRECTIVE


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


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


Control DIRECTIVE— @if statement

Using @if, we can conditionally output code

SCSS

$theme: dark;

header { @if $theme == dark { background: #000; }}

CSS

header { background: #000;}


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;}


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;}


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)}


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?!


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; }


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


http://hugogiraudel.com/2013/07/15/understanding-sass-lists/

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


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


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


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);}


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; }






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;}


PARTIALSImporting the right way


@import, The Legacy way

master.css containes:

CSS

@import 'reset.css';@import 'base.css';@import 'layout.css';@import 'typography.css';..


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


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";


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.


http://meyerweb.com/eric/tools/css/reset/

http://necolas.github.io/normalize.css/

Media Query@media directives in Sass behave just like they do in plain CSS, with one extra capabilities.


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%; }}


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


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; }}


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; }}


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; }}


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; }}


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; } }}


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; }}


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; }}


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; }}


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%; }}



SCSS

@mixin respond-to { @media (min-width: 700px) { @content }}

.sidebar { border: 1px solid #ccc; @include respond-to { float: right; width: 30%; }}

CSS





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





SCSS

@mixin respond-to($query) { @media (min-width: $query) { @content }}

.sidebar { border: 1px solid #ccc; @include respond-to(900px) { float: right; width: 30%; }}

CSS




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




COMPASSCompass is an open-source CSS Authoring Framework.


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


WHAT IS Compass?

— Official Website: http://compass-style.org

— GitHub development homepage: https://github.com/chriseppstein/compass


http://compass-style.org/

https://github.com/chriseppstein/compass

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)


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


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


http://compass-style.org/install/

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.


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"


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


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";


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


http://meyerweb.com/eric/tools/css/reset/

http://necolas.github.io/normalize.css/

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; }


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);}


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);}


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...


http://compass-style.org/examples/compass/css3/text_shadow/

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;}


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


http://nicolasgallagher.com/micro-clearfix-hack/

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; }


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;}


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...


http://compass-style.org/reference/compass/

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');


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...');}


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 ...


http://compass-style.org/reference/compass/helpers/urls/#image-url

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


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);}


http://css-tricks.com/snippets/css/css-triangle/

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...


http://compass-style.org/reference/compass/helpers/

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; }


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 ...


http://compass-style.org/help/tutorials/spriting/

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"); }}


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"


http://susy.oddbird.net/

960.gs— Building 960.gs grid system from scratch with Sass


http://960.gs/

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


http://www.manning.com/netherland/

http://thesassway.com/

http://www.abookapart.com/products/sass-for-web-designers

http://css-tricks.com/sass-style-guide/

http://zerosixthree.se/create-css-grid-using-calc/

http://tallpixels.com/advanced-sass-mixins/

http://css-tricks.com/the-extend-concept/

http://jackiebalzer.com/color

http://www.sitepoint.com/sass-mixin-placeholder/

http://hugogiraudel.com/2013/07/15/understanding-sass-lists/

http://12devs.co.uk/articles/handy-advanced-sass/

http://roytomeij.com/blog/2013/having-fun-with-sass-lists-and-strings.html

http://jakearchibald.github.io/sass-ie/

http://www.hongkiat.com/blog/tag/sass/

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!


http://shaho.info/

https://twitter.com/shaho

sass and compass workshop

Software