Syntactically awesome stylesheets (Sass)

Welcome to the technical session
on
Syntactically Awesome Stylesheets

How to write
Maintainable CSS
by using
Presented by -
Tahmina Khatoon
Software Engineer

Objectives
• Introduction to Sass
– Why adding Sass in our workflow
– Advantages of Sass
• The power of Sass
– How to convert our CSS into Sass
• Compass
– What is Compass
– How to use sass with compass
• Example
– Example of Sass Project
9/1/2014 3

Measuring simplicity of CSS
• Slight variations of colors, fonts, numbers, &
other properties arise
• Effective curbing of repetition can decline
• Stylesheet size may become unmanageable
9/1/2014 4

CSS Preposassor
• CSS preprocessors take code written in the
preprocessed language and then convert that
code into CSS.
• 3 of the more popular CSS preprocessors are
Sass, LESS and Stylus
9/1/2014 Technical session on Sass 5

Sass
• Syntactically Awesome Stylesheets
• Looks like CSS, but adds features to combat shortcomings
• Preprocessor, like CoffeeScript & Haml

History of Sass
• Initially designed by Hampton Catlin,
also the creator of Haml and developed
by Nathan Weizenbaum
• After its initial versions, Weizenbaum
and Chris Eppstein have continued to
extend Sass with SassScript
Hampton Catlin

File Extension
.sass
• Older original file type
• Allows to write css without
any curly-brackets or semi-colons
• Selectors and properties are
distinguished by indentation
.scss
• More similar to regular css
• it adds in all the sass
helpers like indentation,
variables and more
• Any regular .css file is a valid
.scss file

.sass & .scss examples
style.scss style.sass
$main: #444;
.btn
color: $main
display: block
.btn-a
color: lighten($main, 30%)
&:hover
color: lighten($main, 40%)
$main: #444;
.btn {
color: $main;
display: block;
}
.btn-a {
color: lighten($main, 30%);
&:hover {
}
}

.scss & .css examples
style.scss style.css
.btn {
color: #444444;
display: block;
}
.btn-a {
color: #919191;
}
.btn-a:hover {
color: #aaaaaa;
}
$main: #444;
.btn {
color: $main;
display: block;
}
.btn-a {
&:hover {
}
}

Sass features
• Variable
• Importing
• Nesting Selectors
• Mixin
• Extend
• Directive
• Math + Color
• and more ...

Ways to start using Sass ...
• Command lines
• Applications

Pre-installation
• Linux
– Need to install Ruby
• Windows
– Need to install Ruby
• Mac
– Ruby is pre-installed
Install Sass
Open your Terminal or Command Prompt.
Command lines
gem install sass
Check sass version
sass -v

• Applications
– CodeKit (Paid)
– Compass.app (Paid, Open Source)
– Hammer (Paid)
– Koala (Open Source)
– LiveReload (Paid, Open Source)
– Mixture (Paid)
– Prepros (Paid, Open Source)
– Scout (Open Source)

Compile & Watch
Compile any sass file
sass input.sass output.css
Watch any sass file
sass –-watch input.sass:output.css
Watch any folder
sass –-watch sass:stylesheet
For help
sass -–help

Commenting
application.scss
// This comment will not be output
// to the compiled css file
/* This comment will display */
application.css
/* This comment will display */

Importing
• @import from a CSS file should almost
never be used, as it can prevent
stylesheets from being downloaded
concurrently.
• @import with .scss or .sass happens
during compile rather than client-side
• File extension is not required.
application.css
/**
* Import style
* ‘form.css’ has found,
* when application.css
* has requested by browser
*/
@import ‘form.css’;

Importing ...
application.scss
/**
* Import style ‘form’ has found,
* when application.css is processed by compiler
*/
@import ‘form’;
application.scss
form.scss
application.css

Importing ...
application.scss
/**
*/
@import ‘form’;
application.scss
form.scss
application.css
form.css

Partials
application.scss
/**
*/
@import ‘form’;
application.scss
_form.scss
application.css

Nesting
• CSS does support logical nesting, but the code blocks
themselves are not nested.
• Sass allows the nested code to be inserted within each other
nesting.scss nesting.scss
.content{
border: 1px solid #ccc;
padding: 20px;
}
.content h2{
color: #FF0000;
}
.content p{
font-size: 12px;
}
.content{
padding: 20px;
h2{
color: #FF0000;
}
p{
font-size: 12px;
}
}

Nesting features
• Property nesting
• Parent selector
• Before reference selector

Variables
• Native CSS variable support is still in its infancy,
but Sass affords us a way to set reusable values
• Variable names begin with $, like $base
variables.scss
$base: #777777;
.sidebar {
border: 1px solid $base;
p {
color: $base;
}
}
variables.css
.sidebar {
border: 1px solid #777777;
}
.sidebar p {
color: #777777;
}

Variables ...
• Default Flag
– Variable definitions can optionally take the
!default flag
default.scss
$blue: blue;
$blue: red;
.content-navigation {
border-color: $blue;
color:
darken($blue, 20%);
}
/**
* Result red color
*/
default.css
$blue: blue;
$blue: red !default;
.content-navigation {
border-color: $blue;
color:
darken($blue, 20%);
}
/**
* Result bluecolor
*/

Variables ...
• Types of variables
– Booleans
– Numbers - can be set with or without units:
– Colors
– Strings - can be set with or without quotes:
– Lists
– Null

Variables ...
• Scope of variables
– Variables set inside a declaration (within { }) aren't usable outside that
block
– Setting new values to variables set outside a declaration changes
future instances
scope.scss
$color-base: #777777;
.sidebar {
$color-base: #222222;
background: $color-base;
}
p {
color: $color-base;
}
scope.css
.sidebar {
background: #222222;
}
p {
color: #222222;
}

Variables ...
• Interpolation
– Use the Ruby-esque #{$variable} to shim variables into selectors,
property names, and strings
interpolation.scss
/* Interpolation */
$side: top;
sup {
position: relative;
#{$side}: -0.5em;
}
.callout-#{$side} {
background: #777;
}
interpolation.css
/* Interpolation */
sup {
position: relative;
top: -0.5em;
}
.callout-top {
background: #777;
}

Mixins
• CSS does not support mixins. Any repeated code must be
repeated in each location.
• A mixin is a section of code that contains any valid Sass code.
• Whenever a mixin is called, the result of translating the mixin
is inserted at the calling location.
• Mixins allow for efficient and clean code repetitions, as well
as easy alteration of code
Before mixin (at CSS) After mixin (at Sass)

Mixins
• Block of reusable code that takes optional
arguments
application.scss
@mixin button {
font-size: 1em;
text-transform: uppercase;
}
.btn-a {
@include button;
background: #777;
}
.btn-b {
@include button;
background: #ff0;
}
application.css
.btn-a {
font-size: 1em;
background: #777;
}
.btn-b {
font-size: 1em;
background: #ff0;
}

Mixin with arguments
application.scss
@mixin border-radius($radius: 10px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
.container {
@include border-radius(5px);
}
.button {
@include border-radius(3px);
}
application.css
.container {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.button {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

Extends
• Extends the properties of one decoration to
another decoration.
extend.css
.btn-a {
background: #777;
font-size: 1em;
}
.btn-b {
background: #ff0;
font-size: 1em;
}
extend.css
.btn-a,
.btn-b {
background: #777;
font-size: 1em;
}
.btn-b {
background: #ff0;
}

Extends
• Sass will track and automatically combine
selectors for us:
extend.scss
.btn-a {
background: #777;
font-size: 1em;
}
.btn-b {
@extend .btn-a;
background: #ff0;
}
extend.css
.btn-a,
.btn-b {
background: #777;
font-size: 1em;
}
.btn-b {
background: #ff0;
}

Nesting + Extends
extend.scss
.content {
padding: 20px;
h2 {
font-size: 3em;
margin: 20px 0;
}
}
.callout {
@extend .content;
background: #ddd;
}
extend.css
.content, .callout {
padding: 20px;
}
.content h2, .callout h2 {
font-size: 3em;
margin: 20px 0;
}
.callout {
background: #ddd;
}

Placeholder
• Placeholder selectors are denoted with a %
• Can be extended, but never become a selector
of their own

Placeholder
extend.scss
/* Place holder example */
%content {
padding: 20px;
}
.content {
@extend %content;
h2 {
font-size: 3em;
margin: 20px 0;
}
}
.callout {
@extend %content;
background: #ddd;
}
extend.css
/* Place holder example */
.content, .callout {
padding: 20px;
}
.content h2 {
font-size: 3em;
margin: 20px 0;
}
.callout {
background: #ddd;
}

Functions
• SassScript defines some useful functions that are
called using the normal CSS function syntax
function.scss
$base-color: #000000;
body{
background: lighten($base-color,
20%);
}
function.css
body {
background: #333333;
}

Functions ...
• Several predefined functions
– RGB Functions
– Opacity Functions
– String Functions
– Number Functions
– List Functions
– Map Functions
– Introspection Functions
See http://sass-lang.com/documentation/Sass/Script/Functions.html
for a full listing of Sass functions and their argument names

Functions ...
• Custom function
function.scss
/* Without argument */
@function fluidize() {
@return 35%;
}
.sidebar_a {
width: fluidize();
}
/* With argument */
@function fluidize_arguments($target,
$context){
@return ($target / $context) *
100%;
}
.sidebar_b {
width: fluidize_arguments(300px,
1000px);
}
function.css
/* Without argument */
.sidebar_a {
width: 35%;
}
/* With argument */
.sidebar_b {
width: 30%;
}

Compass
• Open-source CSS Authoring Framework
• Adds reusable patterns, utilities, and modules
like vertical rhythm and spriting
• Created by Chris Eppstein as charityware
• Other core team members: Scott Davis, Eric
Meyer, Brandon Mathis, and Anthony Short

Advantages of using compass
• Experience cleaner markup without
presentational classes.
• It’s chock full of the web’s best reusable
patterns.
• Compass mixins make CSS3 easy.
• Create beautiful typographic rhythms.

Compass installation
Install compass
gem install compass
For help
compass -–help

Project setup with compass
Initialize compass project
compass init
Watch any folder
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts“
# You can select your preferred output style here (can be overridden via the command
line):
# output_style = :expanded or :nested or :compact or :compressed
Watch any folder
compass watch

Compass Utilities
• Links – Tools for styling anchor links.
• Lists – Tools for styling lists.
• Text – Style helpers for your text.
• Color – Utilities for working with colors.
• General – Generally useful utilities that don't fit elsewhere.
• Sprites – Sprite mixins.
• Tables – Style helpers for your tables.

Sprite example
@import "compass/utilities/sprites";
@import "icons/*.png";
body{
background: black;
}
$hight: icons-sprite-height(student);
$width: icons-sprite-width(student);
.icons {
display: block;
height: $hight;
width: $width;
}
@include all-icons-sprites;

Any Questions
on how to write maintainable css by using sass?

Thank you
for your patience and participating in this session.

Syntactically awesome stylesheets (Sass)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Syntactically awesome stylesheets (Sass)

Similar to Syntactically awesome stylesheets (Sass) (20)

More from Tahmina Khatoon

More from Tahmina Khatoon (7)

Recently uploaded

Recently uploaded (20)

Syntactically awesome stylesheets (Sass)