getting started with sass | wc philly 2015
TRANSCRIPT
@mlteal | #WCPhilly | June 2015
Getting Started with SASSor: All the things I wished for with CSS
@mlteal | #WCPhilly | June 2015
Maura Teal Web Developer at FanSided @mlteal | mlteal.com
@mlteal | #WCPhilly | June 2015
What is it?Syntactically Awesome StyleSheets
A CSS pre-processor that allows us to use logic similar to real programming languages.
@mlteal | #WCPhilly | June 2015
What do you get?
More organization, sanity because variables, mixins, and functions.
TL;DR: Build and adjust stylesheets efficiently.
@mlteal | #WCPhilly | June 2015
How Does it Work?Watch your code while you work locally and continually compile into the CSS file you’ll use in your project.
@mlteal | #WCPhilly | June 2015
Getting Started1. Install Ruby
2. Install Sass Gem
3. Watch those files:
Alternatively, download a GUI that takes care of things:
Codekit ($) Koala (free) Scout (free)
From the Command Line:
cd path/to/my/sass/folder
sass --watch input.scss:output.css
Ctrl+C to stop watching
@mlteal | #WCPhilly | June 2015
Just want to try it out?
Codepen: http://codepen.io/
Sassmeister: http://sassmeister.com/
@mlteal | #WCPhilly | June 2015
Features
• Nesting
• Variables
• Mixins
• Functions
• Minification
• Libraries
To name a few…
@mlteal | #WCPhilly | June 2015
Nesting
Xzibit knows you like selectors
@mlteal | #WCPhilly | June 2015
NestingSASS
.parent { blockquote, p { font-family: Times; } a { color: teal; } span { background: yellow; }}
CSS
.parent blockquote,
.parent p { font-family: Times;}.parent a { color: teal;}.parent span { background: yellow;}
@mlteal | #WCPhilly | June 2015
Nestinga { color: teal; &.special { color: gold; } &:hover, &:active { font-style: italic; }}
a { color: teal;}a.special { color: gold; }a:hover, a:active { font-style: italic; }
@mlteal | #WCPhilly | June 2015
Variables$variable-name : /* variable properties here */;
Think colors (hex values or rgba), fonts, sizes, or even previously defined vars:
$fuchsia : #f0f; $border-style : 1px solid $fuchsia; $heading-size : 30px; $subheading-size : $heading-size / 2;
@mlteal | #WCPhilly | June 2015
Variables1. Define your color palette just this one time
$white : #FFFFFF; $teal : #27ba9a;$french-blue : #3196da;$purple : #9a58b5;$light-grey : #7e8c8d;
2. Abstract it in case all headings change from $purple to $teal someday
$heading : $purple;$sub-heading : $white;$body-text : $light-grey;$link : $french-blue;$accent : $teal;
@mlteal | #WCPhilly | June 2015
Mixins
add candy to your code
@mlteal | #WCPhilly | June 2015
MixinsCreate reusable chunks of CSS
@mixin border-radius($radius) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; } .container { @include border-radius(18px); } .footer { @include border-radius(6px); }
.container { -moz-border-radius: 18px; -webkit-border-radius: 18px; border-radius: 18px; } .footer { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
@mlteal | #WCPhilly | June 2015
FunctionsCreate reusable logic
@function remy($pxsize) { @return: ($pxsize / 16 )+rem; } .container { font-size: remy(32); }
.container { font-size: 2rem; }
Ref: http://sass-lang.com/documentation/Sass/Script/Functions.html
@mlteal | #WCPhilly | June 2015
Putting it all togetherCombining map-get() function with array maps
$iconfont-map : ( arrow: "\f063", caret-down: “\f0d7", wordpress: “\f19a",
);
@mixin icon( $icon ) { font-family: “Icon Font”; content: '#{map-get( $iconfont-map, $icon )}';
}
.my-list a { &:before {
@include icon( arrow ); }
}
@mlteal | #WCPhilly | June 2015
Sass Frameworks
Utilize libraries & extensions with Sass to get an even more powerful preprocessor.
Many make built-in functions available like transform() or include their own grid systems.
• Compass • Breakpoint • Susy • Bourbon • Bootstrap
@mlteal | #WCPhilly | June 2015
Test Drive in a ProjectPlugins:
Jetpack Custom CSS module: for adding custom CSS directly on site
Admin Color Schemes: https://wordpress.org/plugins/admin-color-schemes/
@mlteal | #WCPhilly | June 2015
Test Drive in a ProjectStarter Themes:
Underscores: http://underscores.me/
Bones (need Compass): http://themble.com/bones/
Foundation: http://foundationpress.olefredrik.com/
Roots (now Sage): https://roots.io/sage/
Some Like it Neat: http://somelikeitneat.com/
@mlteal | #WCPhilly | June 2015
WorkflowsUtilize task-based build tools (either
Grunt or Gulp) to watch and compile all the things.
Config files make life easier, and actively watch more than just your stylesheets (think minifying JS and more)
@mlteal | #WCPhilly | June 2015
Future & PerformanceRuby Sass - The original Sass we know & love
- Simple installation - Lots of compatible frameworks
- Compiling can get slow on larger projects
LibSass - A C/C++ port of Sass- Just a Sass library, so it needs a wrapper
- Not 100% caught up to Ruby Sass (but so close!)- Stricter on syntax
- Much faster (up to 4000x)!
@mlteal | #WCPhilly | June 2015
ResourcesSass Documentation:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Codepen: http://codepen.ioSassmeister: http://sassmeister.com
Underscores: http://underscores.meBones: http://themble.com/bones/
Ruby Sass vs LibSass: http://sassbreak.com/ruby-sass-libsass-differences/ Sass Compatibility Guide: http://sass-compatibility.github.io/