Sass and compass workshop

SASS & COMPASS WORKSHOP
Feb. 21, 2014 | Ver. 8
Shaho Toofani
Sass and Compass Workshop - ©2014 Shaho Toofani

Tools
codepen.io
SassMeister
Grunt/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)
Keepyour stylesheet DRY
Revision are waaaay easier (no more find& replace all)
Fancy new CSS3 propertiesbecaome production-ready
Build reusable mixinsandfunctions
Create your own stylesheet framework

Why do we need CSS preprocessors?
CSSis a declarative, not a programminglanguage.
variables — placeholders for something reusable.
functions — manipulate valueswith operations (for example, make this color 20 percent lighter).
it’sfaster towrite — for example nesting
it’smore 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 yourself
SCSS
$brand-color: blue;
a {
color: $brand-color;
}
nav{
background-color: $brand-color;
}

— Automatic RGBA color values and conversions
CSS
.color-traditional {
color: #11c909;
color: rgba(17, 201, 9, 0.9);
}
SCSS
.color-modern {
color: $green;
color: rgba($green, 0.9);
}

— Forget about vendor prefixes
CSS
.rounded {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
SCSS
.rounded {
@includeborder-radius(4px);
}

— Nesting rules
CSS
nava {
color: #ff0b13;
}
nava:hover{
color: #11c909;
}
nava:visited {
color: #091fff;
}
SCSS
nav{
a {
color:$red;
&:hover{
color: $green;
}
&:visited {
color: $blue;
}
}
}

— Media queries the simple way
CSS
@media onlyscreen and(min-width: 280px) and (max-width: 479px){
.h1 {
font-size: 1.1em;
}
}
@media onlyscreen and(min-width: 480px) and (max-width: 599px){
.h1 {
font-size: 0.9em;
}
}
SCSS
h1 {
@includeMQ(XS) {
font-size: 1.1em;
}
@includeMQ(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 youauthor andthe .css filesyouserve to the browser.
Sassisshort for Syntactically Awesome Stylesheets.
Createdby , Primary developers are and .Hampton Catlin Nathan Weizenbaum Chris Eppstein

WHAT IS SASS?
— Official Website: http://sass-lang.com
— The project's GitHub development homepage: https://github.com/nex3/sass

INSTALLATION
Don't panic!

Installing Ruby
Before we can install Sass and Compass, we need Ruby installed. If you are on OS X, you already have
it.

INSTALLING SASS
— Command prompt (line) install
Install Sass
ruby
geminstallsass
ruby
Fetching: sass-3.2.12.gem(100%)
Successfully installedsass-3.2.12
1 gem installed
Installingri documentation for sass-3.2.12...
InstallingRDocdocumentation for sass-3.2.12...
You’ve just installedSass. Double-check:
ruby
sass-v

Monitor & convert the Sass files to CSS
— To run Sass from the command line
ruby
sassinput.scssoutput.css
— Telling Sass which files to WATCH
ruby
sass--watch screen.scss:screen.css
— You can also tell Sass to watch an entire directory
ruby
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 isa free Adobe Air-based application.

CodeKit - http://incident57.com/codekit

LiveReload - http://livereload.com

Useful Commands
— Check which versions of Sass are available
ruby
gemlist sass –a –r
— Installing the latest pre-release version
ruby
geminstallsass --pre
— Uninstall a specific version of Sass
versionnumber is the release youwant toremove (for example, 3.2.0.alpha.103).
ruby
gemuninstall sass--versionversionnumber

Choosing an output style
— Nested (the default)
CSS
ol {
margin: 10px0;
padding: 10px 0; }
ol li{
font-size: 2em;
line-height: 1.4; }
ol li p {
color: #333; }

CHOOSING AN OUTPUT STYLE
— Expanded
CSS
ol {
margin: 10px0;
padding: 10px 0;
}
ol li {
font-size: 2em;
line-height: 1.4;
}
ol li p {
color: #333;
}
— Add a flag to the Watch command
ruby
sass--watch --style expandedscreen.scss:screen.css

— Compact
CSS
ol { margin: 10px 0; padding: 10px 0; }
ol li { font-size: 2em; line-height: 1.4; }
ol li p { color: #333; }
ruby
sass--watch --style compactscreen.scss:screen.css

— Compressed
CSS
ol{margin:10px0;padding:10px 0;}olli{font-size:2em;line-height:1.4;}ol lip{color:#
ruby
sass--watch --style compressed screen.scss:screen.css

DON’T EDIT YOUR OUTPUT!
N O T E !
it’simportant to note that when you’re using Sass, you’ll nolonger be editingany .css files.
The .scss filesare where you’ll live and breathe.
The reason being, any changesyou make to the .cssfile will eventually get overridden as
soon asyouupdate the .scssandSass compilesthe output.

VARIABLES
allow you to use the same value in multiple places, aswell as perform basic mathsandfunctions.

Variables
— Using variables:
Colors - for example shades of aparticular 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;
— Colors
SCSS
$base: purple;
$border: rgba(0, 255, 0, 0.5);
$shadow: #333;
— Booleans
SCSS
$rounded: false;
$shadow: true;

Variable Declaration
— Strings - can be set with or without quotes:
SCSS
$header: 'Helvetica Neue';
$callout: Arial;
$message: "Loading...";
— Lists
SCSS
$colors: red, green, blue, yellow;
$margin: 40px 0 20px 100px;
— Null
SCSS
$shadow: null;

Declaring and Referencing variables
— Declaring a Sass variable:
SCSS
$highlight-color: #abcdef;
$highlight-border: 1px$highlight-colorsolid;
— Referencing:
SCSS
.selected {
border: $highlight-border;
}
CSS
.selected {
border: 1px #abcdefsolid;
}

Variable names: dashes or underscores?
N O T E !
Different people prefer different styles; some use dashestoseparate wordswithin variables ($highlight-
color), andsome use underscores ($highlight_color).
SCSS
$link-color: blue;
a {
color: $link_color;
}
In thisexample, $link-color and $link_color both refer to the same variable.
In fact, dashesand underscores are interchangeable most places in Sass, includingmixinsandSass
functions.
N O T E !
They aren’t interchangeable in the plain-CSS partsof Sass like class, ID, or property names, though.

Variables
— The Default Value
SCSS
$title: 'MyBlog';
$title: 'AboutMe';
h2:before {
content:$title;
}
CSS
h2:before {
content: 'About Me';
}

Variables, The Default Flag
— Variable definitions can optionally take the !default flag:
SCSS
$title: 'MyBlog';
$title: 'AboutMe'!default;
h2:before {
content:$title;
}
CSS
h2:before {
content: 'MyBlog';
}

Variables Scope
Variables set inside adeclaration (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 Scope
Setting new valuestovariables set outside a declaration changesfuture 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 aW3C working draft, “CSS Variables Module Level 1,” isbeingdeveloped:
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.

OPERATIONS

Operations
SCSS
$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: 32px8px36px 16px;
padding: 4px;
}

Variables & Operations
— Interpolation (escaping)
CSS
p {
font: 1em/1.5em "Open Sans", Arial, Sans-Serif;
}
— Wrap with #{ }
Interpolation brackets #{} : That’sa special way to alert Sass to compile something within aselector or
property name; useful for paths & long strings.
SCSS
$basetypesize: 1em;
p {
font: #{$basetypesize}/#{$basetypesize*1.5} $mainfont;
}

— Negatives
SCSS
$margin: 10px;
.moveup{
margin:-$margin*4 -$margin*2 0 $margin;
}
CSS
.moveup {
margin: -60px 0 10px;
}

— Negatives
Wrapin brackets: (-$variable*value)
SCSS
$margin: 10px;
.moveup{
margin:(-$margin*4)(-$margin*2) 0 $margin;
}
CSS
.moveup {
margin: -40px-20px0 10px;
}

NESTING
Sass avoids repetition by nesting selectors within one another. The same thingworkswith properties.

NESTING RULES
— Nest & indent
Nest CSS rulesinside each other insteadof repeatingselectors in separate declarations
CSS
header[role="banner"] {
margin: 20px0 30px0;
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: 20px0 30px0;
border-bottom: 4px solid #333;
#logo {
float:left;
margin: 0 20px0 0;
img{
display:block;
opacity:.95;
}
}
}

NESTING RULES
— Nesting namespaces
CSS
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 combinators
SCSS
article{
> h2 {border-top: 1px dashed #eee } // childcombinator
~ section {padding-top:1.5em } // general siblingcombinator
+ footer {margin-top: 0 } // adjacentsiblingcombinator
* {color: #000 }
}
CSS
article> h2 { border-top:1pxdashed #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;
}
}

— 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 {
padding: 20px;
}
.content .info {
border-color: red;
}
.content.info {
border-color: green;
}

— Ampersand & prepends before parent selector
CSS
section.main p {
margin: 0 0 20px0;
font-size: 18px;
line-height: 1.5;
}
body.storesection.main p {
font-size: 16px;
line-height: 1.4;
}
SCSS
section.main p {
margin: 0 0 20px0;
font-size: 18px;
line-height: 1.5;
body.store &{
font-size: 16px;
line-height: 1.4;
}
}

— & loves working with Modernizr
SCSS
button {
background: linear-gradient(#444,#222);
.no-cssgradients & {
background: #333
}
}
CSS
button {
background: linear-gradient(#444,#222);
}
.no-cssgradients button {
background: #333
}

Wrap up! - Variables, Nesting
SCSS
$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 Pitfalls
N O T E !
Nestingiseasy, but dangerous!
Do not nest unnecessarily; Try limitingyour nesting to 3 or 4 levels and consider refactoring anything
deeper.
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 comments
SCSS
/* Thisisa multi-line comment thatwill
appear in the final .css file. */
— Multi-line (Loud) comments
SCSS
/*!This isa multi-line commentthat will
appear in the final .css file. Evenin compressed style. */
— Single-line (Silent) comments
Single-line comments use the // prefix at the beginning of each line andaren’t included in the final
output
SCSS
// Thisisa single-line comment.
// Single-linecomments are removedfromthe .css file.

MIXINS
mixins allow youtore-use whole chunks of CSS, propertiesor selectors. Youcan even give them
arguments.

MIXINS
— Mixins allow you to easily share styles among different parts of the
stylesheet.
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 styles
SCSS
@mixin round-corner ($radius:4px) {
-webkit-border-radius: $radius;
-moz-border-radius:$radius;
border-radius: $radius;
}
begin with @mixin
give it a name
addyour $variable(s)
give (an) optional default value(s)
and...

MIXINS
— Call it with @include
SCSS
.message {
width: 100px;
@includeround-corner(10);
}
CSS
.message {
width: 100px;
border-radius: 10px;
}

MIXINS
— Mixin with Multiple Arguments
arguments are comma-seperatedand passedin order
SCSS
@mixin button($radius,$color) {
color: $color;
}
.btn-a {
@includebutton(4px,#000);
}
CSS
.btn-a {
border-radius: 4px;
color: #000;
}

MIXINS
toofew arguments
SCSS
color: $color;
}
.btn-a {
@includebutton(4px);
}
ruby
Syntax error: Mixin button is
missingargument $color.

MIXINS
Optional arguments
SCSS
@mixin button($radius,$color: #000){
color: $color;
}
.btn-a {
}
CSS
.btn-a {
border-radius: 4px;
color: #000;
}

MIXINS
Optionals come last!
SCSS
@mixin button($color:#000, $radius){
color: $color;
}
.btn-a {
}
ruby
Syntax error: Required argument
$color mustcome before any
optional arguments.

MIXINS
Keywordarguments allow passing in any order
SCSS
@mixin button($radius,$color: #000){
color: $color;
}
@include button($color: #777,
$radius: 5px);
}
CSS
.btn-a {
border-radius: 5px;
color: #777777;
}

CSS3 LOVES MIXINS
— box-shadow
SCSS
@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 {
@includeshadow(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 Arguments
CSS
.btn-a {
-webkit-transition: color 0.3sease-in, background 0.5sease-out;
-moz-transition: color 0.3sease-in, background 0.5sease-out;
transition: color 0.3s ease-in, background 0.5s ease-out;
}
— Passing valid, comma-separated CSS as a single value
SCSS
@mixin transition($val) {
-webkit-transition:$val;
-moz-transition:$val;
transition: $val;
}
.btn-a {
@include transition(color0.3s ease-in, background0.5s ease-out);
}
— will throw an ERROR ...
ruby
Mixin transition takes1 argument but 2 were passed.

— Variable Arguments
Adding ... to an argument creates avariable argument (vararg)
SCSS
@mixin transition($val...) {
-webkit-transition:$val;
-moz-transition:$val;
transition: $val;
}
.btn-a {
@includetransition(color 0.3s
ease-in, background 0.5s ease-out);
}
CSS
.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,
background0.5sease-out;
}

— Variable arguments in reverse
Previous example: passinga list which is split into arguments by the mixin
SCSS
color: $color;
}
$properties: 4px, #000;
.btn-a {
@includebutton($properties...);
}
CSS
.btn-a {
border-radius: 4px;
color: #000;
}

CSS3 LOVES MIXINS
— gradient
SCSS
@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='$t
-ms-filter:
quote(progid:DXImageTransform.Microsoft.gradient(startColorstr='$from',endColors
}
SCSS
.demo {
width:300px;
height:300px;
@includelinear-gradient(#444, #0000ff);
}

INTERPOLATION
— Use interpolation inside Mixins - gradient revisited
SCSS
@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}',endCol
}
SCSS
.demo {
width:300px;
height:300px;
@includelinear-gradient(#444, #0000ff);
}

@EXTEND
The @extend directive (tells) Sassthat one selector shouldinherit 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 isin 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;
}
.warning-box {
}
.success-box {
}
.info-box {
}

Multiple @extends
Youcan also @extend multiple classes within adeclaration, which chainstogether all the stylesfrom
each 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 @extends
Which 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
@extend
Placeholder selectorsallow you to define classes that won’t appear in the outputted CSS on their own.
Youcan 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

@extend
— Use placeholder selectors to extend styles only when needed
SCSS
%box{
padding: 2em;
color: black;
}
.warning-box {
@extend %box;
}
.success-box {
@extend %box;
}
.info-box {
@extend %box;
}
CSS
.warning-box,
.success-box,
.info-box {
padding: 2em;
color: black;
}
.warning-box {
}
.success-box {
}
.info-box {
}

@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
IndentedSass

.scss vs .sass
— Indented syntax (.sass) relies on whitespace to simplify
SCSS
.content {
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 {
@includebox-sizing(border-box);
}
SASS
=box-sizing($x)
-webkit-box-sizing: $x
-moz-box-sizing: $x
box-sizing: $x
.content
+box-sizing(border-box)
Readmore: Sassvs. SCSS: which syntax is better?

FUNCTIONS

Writing functions in Sass
A function is aself contained tool to generate a value that can be usedelsewhere.
The result of afunction can be usedin a mixin or directly intothe style sheet.
SCSS
@function fluid-it() {
@return 35%; //alwaysreturn35%
}
.sidebar {
width: fluid-it();
}
The @return directive tells Sasstoreturn something:
CSS
.sidebar {
width: 35%;
}

— Function with arguments
SCSS
@function square($value) {
@return ($value*$value);
}
p {
margin-left:square(2px);
}
Will return:
CSS
p {
margin-left: 4px;
}

— Use functions
target / context
For example, If the target size of our sidebar is 400px and the context of itsparent 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()

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 Functions
SCSS
rgb($red, $green, $blue)
Createsa Colorfrom red, green, and blue values.
Createsa Colorfrom red, green, blue, and alpha values.
SCSS
rgba($red,$green,$blue,$alpha)
Getsthe red componentof a color.
SCSS
red($color)
Mixes two colors together.
SCSS
mix($color-1, $color-2)
SassRGB Functions(List)

Colors
— The RGBA function
SCSS
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 Colors
SCSS
$color:red; // #ff0000
hue($color); // 0 deg
saturation($color); // 100%
lightness($color); // 50%
red($color); // 100
green($color); // 0
blue($color); // 0
alpha($color); // 100

Colors
— Manipulating Colors

Colors
N O T E !
HSLA Colors
Hue
Hue is a degree onthe colorwheel; 0 (or
360) is red, 120 is green, 240 is blue.
Numbers inbetweenreflect differentshades.
Saturation
is apercentage value; 100% is the full color.
0% is completely denatured (grayscale).
Lightness
is alsoa percentage; 0% is dark (black),
100% is light (white),and 50% is the
average.
Alpha
Opacity/Transparency value. 0 is fully
transparent. 1 is fully opaque. 0.5 is 50%
transparent.
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 color
SCSS
change-color($color, [$red],[$green], [$blue],[$hue], [$saturation], [$lightness],
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 color
SCSS
adjust-color($color, [$red],[$green], [$blue],[$hue], [$saturation], [$lightness],
SCSS
adjust-color(#d3fa7b,$hue:60, $lightness: -20%);
N O T E !
Lastexampleproduce:rgba(95, 255,227,0.75);
SCSS
adjust-color(#5f8fe3,$green:100, $alpha: -0.25);

Color online examples
SassMe - Visualize SASS color functionsin real-time without compiling
How color worksin Sass
Flatt sassy butons
SassButton Generator
Sassmixin for inner shadow
Sasscolor function comparisons
Sassand color manipulation on Codepen.io
Readmore:
Mixins for semi-transparent colors
Controllingcolor with Sass color functions
How to programmatically 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 returns2.
Math operators( +, -, *, /, % ) work with numbers
SCSS
1em+ 1em; // 2em
1em- 1em; // 0em
1in+ 72pt; // 2in
6px* 4; // 24px
18 %5; // 3

Math
— Division a special case
The trickiest of the number operations, due tofont:
SCSS
font : 18px/ 1.45em; // 18px/1.45em
font : (20px / 5); // 4px
font : 20px/ 5 + 1; // 5px
font : $base /5; // 4px
$size : 20px / 5; // 4px
width: 20px* 5 / 2; // 50px
Sassdefaults to returning (up to) five digitsafter adecimal point.

Math
— String Addition
Addition on strings concatenates them:
SCSS
$family: "Helvetica " + "Neue"; // "Helvetica Neue"
Initial left-side string determinespost-concatenation quotes:
SCSS
$family: 'sans-' +serif //'sans-serif'
$family: sans-+ 'serif' //sans-serif

Math
— Pre-Defined Math Utilities
round($number) - roundtoclosest whole number
ceil($number) - roundup
floor($number) - rounddown
abs($number) - absolute value
min($list)- minimum list value
max($list)- maximum list value
percentage($number) - convert topercentage
Number Functions
SCSS
percentage(13/25) //52%
round(2.4) //2
ceil(2.2) //3
floor(2.6) //2
abs(-24) //24

CONTROL DIRECTIVE

Logic Operators
— Comparison (Equality) operators
The equality operatorscan be used on everything (stringsof text and numbers).
== means equal to
!= not equal to
— Relational operators
Sassallowsthe use of relational operatorson numbers:
> greater than
>= greater than or equal to
< less than
<= lessthan or equal to

Logic Operators
Relational operators ( <, >, <=, >= ) evaluate numbers
SCSS
1 <20 // true
10 <= 20 // true
4 >1 // true
4 >= 1 // true
Comparison operators ( ==, != ) evaluate all data types
SCSS
1 +1 == 2 // true
small !=big // true
#000==black // true
white != #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 providesa fallback if everythingevaluates false or null
SCSS
$theme:light;
header {
background: #000;
} @else{
background: #fff;
}
}
CSS
header {
background: #fff;
}

Control DIRECTIVE
— The @if and @else if control directives
@else if allowsfor multiple comparisons:
SCSS
$theme:pink;
header {
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 {
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 aset of styles.
A counter variable isjust aplaceholder for the current state of the loop; it increments with each
iteration of the loop.
SCSS
@for$ifrom 1to 6 {
span-#{$i} {
width: 20px+ ($i* 20px);
}
}
CSS
span-1 { width: 40px; }
So, where is the span-6?!

Control DIRECTIVE
— The @for loop
SCSS
@for$ifrom 1through 6 {
span-#{$i} {
width: 20px+ ($i* 20px);
}
}
CSS

Lists
— Lists: A comma- or space-separated group of values
Lists are just a series of other values, separatedby 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;
Readmore: Understanding Sasslists

Lists
— Sass list functions
length - number of items in alist:
SCSS
$colors: red greenblue yellow;
$size: length($colors); //4
append - adds avalue to the endof a list:
SCSS
$all: append($colors,black); //redgreen blueyellowblack
join - combinestwo liststogether:
SCSS
$colos1: red green;
$colors2: blueyellow;
$all: join($colors1, $colors2) // red greenblue yellow

Lists
— Sass list functions (continued)
index - returnsa value'slist position or false:
SCSS
$i:index($colors,red); //1 (starts at 1not 0)
$i:index($colors,black); //false
nth - return the item at list position n:
SCSS
$i:nth($colors, 3); //blue

Lists
— Sass list functions (continued)
zip- combineslists in comma-separatedpairs:
SCSS
$colors: red blue;
$sense:warm cold;
$all: zip($colors,$sense);
red warm
blue cold

Control DIRECTIVE
— The @each loops
The @each directive isuseful toloop through alist of items.
SCSS
$logos:puma nike adidas;
@each $logoin$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 requiresmanually 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;
}

PARTIALS
Importingthe right way

@import, The Legacy way
master.csscontaines:
CSS
@import'reset.css';
@import'base.css';
@import'layout.css';
@import'typography.css';
.
.

Partials, Importing the right way
Enter the @import rule, which Sass extends to allow the importingof multiple SCSS files, merging
them into asingle CSS file when compiled.
A single CSS meansfewer HTTP connections. Performance!
Variables can be defined in their own file, then importedwhenever needed.
Imported SCSS files can contain project-agnostic mixins that can be shared and reused.
Filename startswith 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 partials
andoutput the relevant CSS where they
are placed.

Media Query
@media directives in Sassbehave just like they doin plain CSS, with one extracapabilities.

Media Query
— CSS Media Query
One of the foundationsof building responsive websites isthe CSS mediaquery. The ability to “listen” to
the browser’s viewport for varying dimensions and then apply certain stylesbased on those dimensions
is the cornerstone of creating flexible layoutsthat 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;
}
.sidebar {
float: none;
width: 100%;
}
}
SCSS
.sidebar {
float: right;
width: 300px;
@media screenand (max-width:480px){
float:none;
width: 100%;
}
}
begin with @media
write mediaqueries asnormal
if it appears within arule, it will ‘bubble up’ and put the selectors within the rule.
media queries can be nested
combined with the andrule

Media Query
— Nested Media Queries
In Sass, you can nest media queriesinside the original declaration, andthey will “bubble up” into their
own separate declarationswhen the stylesheet is compiled.
SCSS
section.main {
float: left;
width: 65%;
font-size: 16px;
line-height: 1.4;
@media screenand (max-width: 800px) {
float:none;
width:auto;
}
@media screenand (max-width: 500px) {
font-size: 12px;
line-height: 1.4;
}
}

Media Query
Nestingmedia queriesavoidsrewriting the selector (section.main in this example) each time you’d like
to make adjustments for various breakpoints.
CSS
section.main {
float: left;
width: 65%;
font-size: 16px;
line-height: 1.4;
}
section.main {
float: none;
width: auto;
}
}
section.main {
font-size: 12px;
line-height: 1.4;
}
}

Media Query
— Using variables to define breakpoints
SCSS
$width-small: 500px;
$width-medium: 800px;
$width-large: 1200px;
section.main {
font-size: 16px;
line-height: 1.4;
@media screenand (max-width: $width-large) {
float:left;
width: 65%;
}
@media screenand (max-width: $width-medium){
float:none;
width:auto;
}
@media screenand (max-width: $width-small) {
font-size: 12px;
line-height: 1.4;
}
}Sass and Compass Workshop - ©2014 Shaho Toofani

Media Query
Output:
CSS
section.main {
font-size: 16px;
line-height: 1.4;
}
@media screen and (max-width: 1200px) {
section.main {
float: left;
width: 65%;
}
}
section.main {
float: none;
width: auto;
}
}
section.main {
font-size: 12px;
line-height: 1.4;
}
}

Media Query
Going astep further, youcan also define an entire mediaquery as avariable:
SCSS
$mobile-first: "screenand (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, youcan pass entire blocks of stylestoa mixin, and Sasswill place
those blocks back intothe declaration that calls the mixin.
SCSS
$width-small: 400px;
$width-medium: 760px;
$width-large: 1200px;
@mixin responsive($width){
@if $width == wide-screens{
@mediaonly screenand (max-width: $width-large) {@content;}
}
@else if$width == medium-screens {
@mediaonly screenand (max-width: $width-medium){ @content; }
}
@else if$width == small-screens {
@mediaonly screenand (max-width: $width-small) {@content;}
}
}

Media Query
@content - passa block of properties toa mixin
SCSS
.leftside {
float: left;
width: 70%;
@includeresponsive(wide-screens){
width: 80%;
}
@includeresponsive(medium-screens) {
width: 50%;
font-size: 14px;
}
@includeresponsive(small-screens){
float:none;
width: 100%;
font-size: 12px;
}
}

Media Query
Will output:
CSS
.leftside {
float: left;
width: 70%;
}
@media onlyscreenand(max-width: 1200px) {
.leftside {
width: 80%;
}
}
.leftside {
width: 50%;
font-size: 14px;
}
}
.leftside {
float: none;
width: 100%;
font-size: 12px;
}
}

Media Query
and...
SCSS
h1 {
font-size: 40px;
@includeresponsive(wide-screens){ font-size: 48px;}
@includeresponsive(medium-screens) { font-size: 32px; }
@includeresponsive(small-screens){ font-size: 20px;}
}
CSS
h1 { font-size: 40px; }
}
}
}

Media Query
— Media Query Retrofitting
SCSS
.sidebar {
@media (min-width: 700px) {
float:right;
width: 30%;
}
}
CSS
.sidebar {
}
@media (min-width: 700px){
.sidebar {
float: right;
width: 30%;
}
}

Media Query
SCSS
@mixin respond-to {
@media (min-width: 700px) {
@content
}
}
.sidebar {
@includerespond-to{
float:right;
width: 30%;
}
}
CSS
.sidebar {
}
.sidebar {
float: right;
width: 30%;
}
}

Media Query
SCSS
@mixin respond-to ($media) {
@if $media ==tablet{
@media(min-width: 700px){
@content
}
}
}
.sidebar {
@includerespond-to(tablet){
float: right;
width: 30%;
}
}
CSS
.sidebar {
}
.sidebar {
float: right;
width: 30%;
}
}

Media Query
SCSS
@mixin respond-to($query){
@media (min-width: $query){
@content
}
}
.sidebar {
@includerespond-to(900px){
float:right;
width: 30%;
}
}
CSS
.sidebar {
}
.sidebar {
float: right;
width: 30%;
}
}

Media Query
— General Respond-To Mixin
SCSS
@mixin respond-to($value,$query) {
@media ($value: $query){
@content
}
}
.sidebar {
@includerespond-to(max-width,
600px) {
float:right;
width: 30%;
}
}
CSS
.sidebar {
}
.sidebar {
float: right;
width: 30%;
}
}

COMPASS
Compass is an open-source CSS Authoring Framework.

WHAT IS Compass?
— Compass is an open-source CSS Authoring Framework.
Looks like an extension to Sass
Compasswasthe first Sass-basedframework
We get access to lotsandlots of reusable patterns and tools for easily creating CSS
Compasslets you write CSS3 goodieslike box-shadow, gradients and ... with a single syntax
It magically creates cross-browser compatible CSS of everything
It provides Mixins, helpers, New Functions, reset andmore

WHAT IS Compass?
— Official Website: http://compass-style.org
— GitHub development homepage: https://github.com/chriseppstein/compass

INSTALLING COMPASS
— Command prompt(line) install
ruby
geminstallcompass
You’ve just installedCompass. Double-check:
ruby
Fetching: compass-0.12.2.gem(100%)
Successfully installedcompass-0.12.2
1 gem installed
Installingri documentation for compass-0.12.2...
InstallingRDocdocumentation 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 available
ruby
gemlist compass –a –r
— Installing the latest pre-release version
ruby
geminstallcompass --pre
— Uninstall a specific version of Compass
versionnumber is the release youwant toremove (for example, 0.12.2).
ruby
gemuninstall compass--version versionnumber

Create a Sass and Compass project
— Compass's built-in create command to make a project in the folder specified
ruby
compasscreatenew-project
— Or just run following inside a folder
ruby
compasscreate
— Set up an existing project with compass - ( )more
ruby
compassinstallcompass
— Automatic compile to CSS from the Command Line
ruby
compasswatch

Default Workflow in Compass
— What are the generated files in a Compass project for?
.sass-cache: This folder will contain the cache filesthat Sass usestobuild your CSS files faster. Youdon't
needtodoanything with it.
sass: Thisfolder will store the Sass filesthat will be written or amended. This folder can be called
anything, but 'sass' is the default name.
stylesheets: This folder will contain the compiledCSS filesthat Sass will generate. It can be called
anything, but stylesheetsisthe default folder name in Compass projects.
config.rb: Thisfile containsthe configuration defaults for a project, what the various foldersare called,
andwhere they are located. It alsocontrols the compression style of the generated CSS.

Customizing Compass project
— Create a customized Compass project
ruby
compasscreate--sass-dir "sass"--css-dir "css" --javascripts-dir "js"--images-dir
— Creating a bare Compass project
ruby
compasscreate--bare--sass-dir "sass"--css-dir "css"
--javascripts-dir "js"--images-dir"img"

Understanding the config.rb file
The config.rb file isthe brain of aCompass project. It definesthe relationship between files and their
assets, how andwhere the CSS shouldbe generated, andany dependenciesfor 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 viaCompass:
ruby
compassclean

Importing Compass
Compasscomprises five main modules:
utilities
typography
css3
layout
reset
— Importing
Once installed, use @import to make Compassavailable:
SCSS
@import"compass"; //utilities,typography, css3
@import"compass/layout";

Importing Reset
Addsa set of rules basedon after compiling:Eric Meyer's reset
SCSS
@import"compass/reset";
Avoid if you plan on using Normalize.css

Compass Mixins
— Example with CSS3 Mixins
SCSS
@import"compass";
.message {
@includebackground(linear-gradient(#9b9592,#3c3733));
@includeborder-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);
-ms-border-radius: 5px;
border-radius: 5px;
}

Compass Mixins
— Radial Gradient Mixin
SCSS
@import"compass";
.message {
@includebackground(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 Mixins
More robust color stops are alsosupported:
SCSS
@import"compass";
.message {
@includebackground(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 values
SCSS
@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 {
@includetext-shadow;
}
CSS
.headline {
text-shadow: 3px4px 0 #cccccc;
}
More...

Compass Mixins
— Multiple columns
SCSS
@import"compass";
p.three-cols {
@includecolumn-count(4);
@includecolumn-gap(100px);
@includecolumn-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: 1pxdotted#4747ff;
}

Compass mixins
— Clearfix, different approaches
SCSS
@import"compass";
.box{
@includeclearfix;
}
CSS
.box {
overflow: hidden;
*zoom: 1;
}
SCSS
@import"compass";
.other-box{
@includepie-clearfix;
}
CSS
.other-box{
*zoom: 1;
}
.other-box:after {
content: "";
display: table;
clear: both;
}
Micro clearfix hack

Compass's text replacement mixins
— The hide-text mixin
SCSS
@import"compass";
.hideme{
@includehide-text;
}
CSS
.hideme {
text-indent: -119988px;
overflow: hidden;
text-align: left;
}

Compass's text replacement mixins
— The squish-text mixin
squish-text isto squish text inline if youwant it tobe visually hidden but still accessible toscreen
readers.
SCSS
@import"compass";
.ir{
@includesquish-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...

Enable relative assets
ruby
# Toenablerelative paths toassetsviacompass helper functions. Uncomment:
relative_assets= true
Thissetting (not enabledby default sojust uncomment it) allowsCompass helpers to know that if an
image is specified (for example), it knows where to find it relative tothe CSS
— For example
CSS
background-image: url('../img/image.jpg');
— Do:
SCSS
background-image: image-url('image.jpg');

Compass Helper functions
— Example with helper functions
SCSS
@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 buster
N O T E !
The Compass cache buster; it prevents browserscachingassetswhen they have changed (the value
changeseach time the image'smodification time changes).
CSS
background-image: url('../img/logo-small.png?1357598801');
To disable it on acase-by-case basis you can do this:
SCSS
background-image: image-url("logo-small.png", false);
To disable it globally, readmore ...

— Opposite Position
Returnsthe opposite side (or pair):
SCSS
@import"compass";
$opposite:opposite-position(top); //bottom
$opposite:opposite-position(left); //right
$opposite:opposite-position(right bottom); //left top

— Using opposite-position - CSS shapes:
CSS
.arrow {
border: 50pxsolid transparent;
border-bottom: 50pxsolid #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 {
@includearrow(top);
}

image-url
image-height
image-width
inline-image
font-url
pi
sin
cos
tan
adjust-lightness, scale-lightness
adjust-saturation, scale-saturation
more...

Compass image sprites
— Spriting with Compass
Generates the sprite map & the CSS
Easy to configure classes, spacing, etc
Adda 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 selector
SCSS
$my-icons-sprite-dimensions:true;
CSS
.my-icons-save {
background-position: 0 -96px;
height: 32px;
width: 32px;
}
— Extra padding around the images
SCSS
$my-icons-spacing: 10px;
Spriting with Compass, Read more ...

Creating data URIs from images
— The inline-image syntax
SCSS
@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 devices
SCSS
.logo {
background-image: inline-image("svg/logo.svg");
.no-svg &{
background-image:image-url("png/logo.png");
}
}

Susy grid system
The homepage for Susy is http://susy.oddbird.net/
— Installing the Susy Compass plugin
ruby
geminstallsusy
ruby
Fetching: susy-1.0.9.gem (100%)
Successfully installedsusy-1.0.9
1 gem installed
— Including Susy in a project
Open the config.rb file and enter the followingline at the top:
ruby
require "susy"

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

Resources
Manning: Sass and Compassin Action
thesassway.com
Sassfor Web Designers
SassStyle Guide
Create a CSS grid using calc()
Advanced SASS Mixins & Color Functions
The ExtendConcept
Sass& CompassColor Functions
Sass: Mixin or Placeholder?
Understanding Sasslists
Handy AdvancedSass
Having fun with Sass lists and strings
IE-friendly mobile-first CSS with Sass 3.2
Sasstag on hongkiat.com

That's it
By |Shaho Toofani @shaho
By becomingweb
developers, youagreedon
stayingupto date with all
the new cool stuff. Someone
said!

Sass and compass workshop

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Sass and compass workshop

Similar to Sass and compass workshop (20)

Recently uploaded

Recently uploaded (20)

Sass and compass workshop