October 2014 - USG Rock Eagle - Sass 101
51
` 1 PLAYER GAME MARIO 0000000 WORLD 1-1 TIME ROCK_EAGLE Simplifying and extending CSS for the 21st century! 2 PLAYER GAME
-
Upload
eric-sembrat -
Category
Education
-
view
108 -
download
2
description
An introduction to Sass.
Transcript of October 2014 - USG Rock Eagle - Sass 101
`
1 PLAYER GAME
MARIO
0000000
WORLD
1-1
TIME
ROCK_EAGLE
Simplifying and extending CSS for the
21st century!
2 PLAYER GAME
Section TextBody Level One
World -1-1
MARIO
0000000
WORLD
-1-1
TIME
ROCK_EAGLE
x 3
Introductionsand
Shout Outs
• Web Manager - College of Engineering, Georgia Tech
• Ph.D. Student - Instructional Technology, Georgia State !!
• Website: http://ericsembrat.com• Twitter: @esembrat
Eric Sembrat
• The State of CSS• Enter: CSS Preprocessors• How Sass Works• Sass Features• Q&A / Discussion
World Map
And now, for some plugs..
• Communication list for web developmentdiscussion between the 31 institutionsin the University System of Georgia.!
• http://usgweb.gatech.edu
USGWeb Collaboration Group
Section TextBody Level One
World 1-1
MARIO
0000000
WORLD
1-1
TIME
ROCK_EAGLE
x 3
The State of CSS
We’ve come a long way…
We’ve come a long way…
• Before CSS, there were inline element styles.
CSS Growing Up<font color=“green” size=“8” family=“Wingdings”>
• Before CSS, there were inline element styles.!
• Then CSS was born with style.
CSS Growing Up<font color=“green” size=“8” family=“Wingdings”>
<font style=“color: green; font-size: 8pt; font-family: Wingdings”>
• Before CSS, there were inline element styles.!
• Then CSS was born with style.!
• Finally, CSS grew too big to live with HTML.
CSS Growing Up<font color=“green” size=“8” family=“Wingdings”>
<font style=“color: green; font-size: 8pt; font-family: Wingdings”>
@import url(fancy-pants-css.css);
CSS Has Not Aged Well..Variables
CSS3
Inheritance
Reusability
CSS Organization
Media Queries
Theme Templates
• CSS4 looks to fix some of these issues (1)
• Parent Selectors• Grids
Some of this will change..
• However, there’s still one big elephant in the room.
Don’t Repeat Yourself
• Minimizing repetition of the information in a project
• Modifications only happen in one place
!
• Construction of repetitive, reusable, and scalable elements
What is DRY?
• CSS does not have DRY capabilities built-in:
• Variables (i.e. color, font)• Media queries• Chunks of CSS
DRY in CSS
• So, how do we fix CSS and get out of this mess?
Section TextBody Level One
World 2-1
MARIO
0000000
WORLD
2-1
TIME
ROCK_EAGLE
x 3
What is Sass?
• Sass is a preprocessor for CSS• Converts Sass short-code into clunky, ugly CSS• Serves as a translator
Preprocessor
CSS
compiles
to
SASS
• Sass uses a very CSS-like syntax (.SCSS) to extend new features into the syntax you already know!
• An alternative is a tab-centric syntax (.SASS)
Sass
Compare
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
#main { color: blue; font-size: 0.3em; }
#main! color: blue font-size: 0.3em
• Our CSS-friendly .SCSS formatting option.
• Or, the tab-centric .SASS formatting option.
.SCSS vs. .SASS• Changing syntax is an automated process:
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax
What does Ruby run on?• Sass was originally developed as in the Ruby programming language.
• Sass was recently ported over to C/C++ as LibSass.
Section TextBody Level One
World 3-1
MARIO
0000000
WORLD
3-1
TIME
ROCK_EAGLE
x 3
Using Sass
• Easiest way to get started is to download a Sass application.
• http://sass-lang.com/install• Multi-platform releases• Free and paid products available
1) Get a App
Scout
Scout - http://mhs.github.io/scout-app/
Section TextBody Level One
World 4-1
MARIO
0000000
WORLD
4-1
TIME
ROCK_EAGLE
x 3
Sass Features
• Learn many of the essential features of Sass.
• Variables• Nesting• Mixins• Plugins• Partials• (and more!)
2) Learn the Syntax
Variables
$pretty-blue: #0000FF; $pretty-font-size: 0.3em; !#main { color: $pretty-blue; font-size: $pretty-font-size; }
#main { color: #0000FF; font-size: 0.3em; }
Nesting$pretty-blue: #0000FF; !#main { color: $pretty-blue; font-size: 0.3em; #slideshow { background-color: mix(#FFF, $pretty- blue, 20%); } }
#main { color: #0000FF; font-size: 0.3em; } !#main #slideshow { background-color: #3333ff; }
Mixins
@mixin chattanooga() { background-color: pink; font-size: 25pt; } !#body #chattanooga { @include chattanooga(); }
#body #chattanooga { background-color: pink; font-size: 25pt; }
Mixins
@mixin chattanooga() { background-color: pink; font-size: 25pt; } !#body #chattanooga { @include chattanooga(); }
#body #chattanooga { background-color: pink; font-size: 25pt; }
Mixins can reference mixins!
Mixins
@mixin chattanooga() { background-color: pink; font-size: 25pt; } !#body #chattanooga { @include chattanooga(); }
#body #chattanooga { background-color: pink; font-size: 25pt; }
Mixins can take arguments (with default values)!
Plugins• Compass
• http://compass-style.org/
• Sass Globbing• https://github.com/chriseppstein/sass-globbing
• Breakpoint • http://breakpoint-sass.com/
• Bourbon • http://bourbon.io/
Partials
compiles
to
_hdr.scss
_ftr.scss
global.scss global.css
• Sass uses a configuration file (config.rb) to control CSS output
• Requires Compass• http://compass-style.org/help/documentation/configuration-
reference/
Configure CSS Output
Section TextBody Level One
World 5-1
MARIO
0000000
WORLD
5-1
TIME
ROCK_EAGLE
x 3
Advanced Features
• Methodology for naming classes.
Block Element Modifier (BEM)
.BLOCK{__ELEMENT[--MODIFIER]}
• Methodology for naming classes.
Block Element Modifier (BEM)
.BLOCK{__ELEMENT[--MODIFIER]}
.COLOR__PRIMARY.COLOR__PRIMARY--LIGHT .COLOR__PRIMARY--DARK
• Can be programmatically built into Sass.
Block Element Modifier (BEM)
• Can be programmatically built into Sass.
Block Element Modifier (BEM)
• Source maps allow you to see the original source (Sass) instead of the compiled CSS while debugging.
Source Maps
• Requires enabling source-maps on Sass and in the desired browser (Chrome & Firefox, Safari).
Source Maps
http://thesassway.com/intermediate/using-source-maps-with-sass
• Associations of “key” | “value” objects.!
!
!
!
• Similar to programming arrays.• map-merge()• map-get()• map-remove()
Maps
$map: (key1: value1, key2: value2, key3: value3);
Section TextBody Level One
World 6-1
MARIO
0000000
WORLD
6-1
TIME
ROCK_EAGLE
x 3
Demo?
DemoQuick highlights and features!
Let’s ChatQuestions, Comments, Concerns, Discussions about Sass
