Become a Sasskicker Overnight
@rkunboxed
Slides: ronakilmer.com/wordcamp-oc/
What's the Plan?
- Sass Intro
- Getting Started
- Magic
- More Magic
What is Sass?
Syntactically Awesome Stylesheets
"We’re building ever-bigger and more complex websites... we need to take the next step in making what we build more manageable and maintainable."
- Chris Coyier (css-tricks.com)
Specifically
- Styles are easier to maintain.
- You can separate files without taking a performance hit.
- Sass helps you avoid CSS bloat. Quit repeating yourself!
- Your teammates will thank you.
Installation (requires ruby)
Command Line
gem install sass
CodeKit
Project Setup
Command Line
sass --watch input.scss:output.css
CodeKit
- Drag in project folder
- Set output path in Sass language settings
Twenty Fourteen CSS
If your stylesheet needs a table of contents, it's time to look at Sass.
Folder Setup w/Partials
SCSS/
styles.scss //input file
_reset.scss
_repeatable-patterns.scss
_basic-structure.scss
_header.scss
_navigation.scss
_content.scss
_sidebar.scss
_footer.scss
_featured-content.scss
_multisite.scss
_media-queries.scss
_print.scss
CSS/
styles.css //output file
Main styles.scss Setup
@import "reset";
@import "repeatable-patterns";
@import "basic-structure";
@import "header";
@import "navigation";
@import "content";
@import "sidebar";
@import "footer";
@import "featured-content";
@import "multisite";
@import "media-queries";
@import "print";
sass --watch scss/styles.scss:css/styles.css
Comment Styles
// This comment will not be in the CSS.
/* This comment will show up in the CSS. */
Nesting
SCSS
.my-module {
a {...}
.title {...}
}
CSS
.my-module a {...}
.my-module .title {...}
Check the CSS Output
.wrapper .inner-wrapper .my-module ul li a {...}
Parent Selectors (ampersand for the win!)
SCSS
.my-module {
a {
color: #000099;
&:hover {
color: #FF0000;
}
}
}
CSS
.my-module a {
color: #000099;
}
.my-module a:hover {
color: #FF0000;
}
Parent Selectors
SCSS
.my-module {
color: #000099;
&.warning {
color: #FF0000;
}
}
CSS
.my-module {
color: #000099;
}
.my-module.warning {
color: #FF0000;
}
Parent Selectors
SCSS
.my-module {
line-height: 1.4;
.ie8 & {
line-height: 1.3;
}
}
CSS
.my-module {
line-height: 1.4;
}
.ie8 .my-module {
line-height: 1.3;
}
Variables
SCSS
$color-alert: #FF0000;
.my-module {
a {
color: $color-alert;
}
}
CSS
.my-module a {
color: #FF0000;
}
Extending Classes
SCSS
.my-module {
border: 1px solid gray;
color: black;
padding: 10px;
}
.my-module2 {
@extend .my-module;
background-color: white;
float: left;
}
CSS
.my-module,
.my-module2 {
border: 1px solid gray;
color: black;
padding: 10px;
}
.my-module2 {
background-color: white;
float: left;
}
Extending Placeholders
SCSS
%box {
background-color: #FFF;
border: 1px solid #CCC;
padding: 20px;
}
.box-error {
@extend %box;
font-size: 1.8em;
}
.box-warning {
@extend %box;
font-size: 1.5em;
}
CSS
.box-error,
.box-warning {
background-color: #FFF;
border: 1px solid #CCC;
padding: 20px;
}
.box-error {
font-size: 1.8em;
}
.box-warning {
font-size: 1.5em;
}
Maths!
SCSS
$gutter: 20px;
.my-module {
margin-bottom: $gutter * 2;
}
CSS
.my-module {
margin-bottom: 40px;
}
Mixins
@mixin module-style {
background-color: $grey;
border: 1px solid $grey-dark;
color: $dark-text;
padding: 20px;
}
.my-module {
@include module-style;
width: 100%;
}
.my-module2 {
@include module-style;
width: 50%;
}
Mixin Result
.my-module {
background-color: #ccc;
border: 1px solid #444;
color: #000;
padding: 20px;
width: 100%;
}
.my-module2 {
background-color: #ccc;
border: 1px solid #444;
color: #000;
padding: 20px;
width: 50%;
}
Watch that repetition! Consider extending a class or placeholder here instead.
Mixins w/Arguments (it's where it's at)
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.my-module {
@include border-radius(3px);
}
Mixin Result
.my-module {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
Mixins w/Default Args
@mixin border-radius($radius: 4px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.my-module {
@include border-radius;
}
Mixin Result
.my-module {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
Media Query Mixin
$medium: 760px;
$large: 1024px;
@mixin breakpoint($bp) {
@media (min-width: $bp) { @content; }
}
.my-module {
width: 100%;
@include breakpoint($medium) {
width: 50%;
}
@include breakpoint($large) {
width: 25%;
}
}
Mixin Result
.my-module {
width: 100%;
}
@media (min-width: 760px) {
.my-module {
width: 50%;
}
}
@media (min-width: 1024px) {
.my-module {
width: 25%;
}
}
Media Query Mixin+
$medium: 760px;
$large: 1024px;
@mixin breakpoint($bp, $mm: min) {
@media (#{$mm}-width: $bp) { @content; }
}
.my-module {
width: 100%;
@include breakpoint($medium, max) {
width: 50%;
}
@include breakpoint($large, max) {
width: 25%;
}
}
Mixin Result
.my-module {
width: 100%;
}
@media (max-width: 760px) {
.my-module {
width: 50%;
}
}
@media (max-width: 1024px) {
.my-module {
width: 25%;
}
}
Functions
- rgba($color, $alpha)
- lighten($color, $amount)
- darken($color, $amount)
- grayscale($color)
- complement($color)
- round($number)
Custom Function (hey look, more math)
@function percent-calc($el, $container) {
@return ($el / $container) * 100%;
}
.my-module {
width: percent-calc(650px, 1000px);
}
Result
.my-module {
width: 65%;
}
Thank You!
Slides: ronakilmer.com/wordcamp-oc/
@rkunboxed