Getting to Know
Maxwell Morgan
@maxinacube
Lead Front-End Developer
Jeff Golenski
@jeffgolenski
Design + Front-End Developer
NEIT Wifi
UN: cmguest
PW: welcoMe!
What is Sass?
"CSS Super Language"
- Hampton Catlin
Sass is a CSS preprocessor.
Sass is an open-source project, like WordPress.
Sass is your best friend.
If it's not, it should be.
Why use Sass?
Promotes DRY coding.
Don't Repeat Yourself.
Sass is dynamic!
$variables
$pink: #c6538c;
$blue: #036;
$primary: $pink;
$secondary: $blue;
h1, h2, a {
color: $primary;
}
a:hover {
color: $secondary;
}
.button {
background: $secondary;
}h1, h2, a {
color: #c6538c;
}
a:hover {
color: #036;
}
.button {
background: #036;
}Sass
CSS
@functions
$pink: #c6538c;
$blue: #036;
$primary: $pink;
$secondary: $blue;
h1, h2, a {
color: $primary;
}
a:hover {
color: $secondary;
}
.button {
background: $secondary;
color: legible( $secondary );
}h1, h2, a {
color: #c6538c;
}
a:hover {
color: #036;
}
.button {
background: #036;
color: #eee;
}@function legible ( $color ) {
@if ( lightness( $color ) < 50% ) {
@return #eee;
} @else {
@return #111;
}
}Sass
CSS
@mixins
$pink: #c6538c;
$primary: $pink;
@mixin button ( $background: $primary, $color: white ) {
background-color: $background;
border: 1px solid darken( $background, 15% );
color: $color;
display: inline-block;
padding: 8px 10px;
text-decoration: none;
}
.button {
@include button;
}.button {
background-color: #c6538c;
border: 1px solid #9a3366;
color: white;
display: inline-block;
padding: 8px 10px;
text-decoration: none;
}Sass
CSS
Most important,
how to use Sass.
Structure code by nesting.
Leverage file hierarchy
& Sass partials.
Take advantage of the
built-in magic.
$magic: (
'variables',
'operations',
'functions',
'directives',
'output',
);What to use when compiling.
Don't be afraid of terminal.
CodeKit is a paid Mac app that will compile your Sass without terminal.
CodeKit can also compile JS and live-refresh changes in your browser.
incident57.com/codekit
Compass is a light-weight compiler, and hands down the easiest to use when starting a new project.
Once installed, simply run compass init in terminal to start a new Compass project.
compass-style.org
Grunt is the most powerful, and also the most complicated of the compilers.
Grunt allows you to set-up many tasks other than Sass. Use Grunt to minify images, create icon fonts, and sniff your code for errors. There's almost no limit with Grunt.
gruntjs.com
Jetpack is one of the most powerful plugins offered in WordPress, and you can start using Sass with any theme as quick as you can install Jetpack.
Simply activate the Custom CSS feature and you'll find a CSS Editor under your appearance menu.
Best of all, it's free and has a full support team.
jetpack.me/support/custom-css
CodePen gives you preprocessors for CSS, Javascript and HTML, and also generates a live preview.
CodePen is my favorite tool to utilize when I need to build out a concept, it is great for rapid iterations and testing out new methods.
codepen.io
Best practices.
Nesting, no more than 3 levels deep.
If you find yourself doing this, take a step back and reevaluate your code.
Keep mixins simple.
Use placeholders, but not too much.
If you know it's not correct, _shame it.
https://github.com/laras126/simple-sassy-starter/blob/master/scss/_shame.scss
Resources
#teamSass
Find articles, blogs, tutorials, books, frameworks, and even how YOU can contribute to Sass!
sass-lang.com/community
CSS-Tricks
CSS-Tricks is far more than just CSS, but is a great place to learn some cool tricks of the trade for any aspect of front-end.
css-tricks.com/snippets/sass/
The Sass Way
Like Sass itself, the Sass Way is fully driven by contributors and covers the latest news and topics of Sass.
thesassway.com
Workshop Part 1:
Make it Sass
Take plain ol' CSS and convert it to Sass.
Go to codepen.io and sign-up for a free account
Fork my pen, WCRI Part 1
codepen.io/maxinacube
Let's start Sassing!
Workshop Part 2:
Sass from scratch.
Fork my pen, WCRI Part 2
codepen.io/maxinacube
Make another fork, and remove all my styles!