getting sassy with front end development
TRANSCRIPT
Getting SASSy with front end development
The Studio of Matthew Carleton
Web Design, development and branding
@matthewcarleton
matthewcarleton.com
What’s the deal with SASS?
Who’s heard of SASS?
Who’s used SASS?
[SYNTACTICALLY AWESOME STYLESHEETS]
What we will talk about1. SASS? 2. Who is SASS for 3. Features of SASS 4. Setting up SASS 5. Libraries & Resources
What is SASS?
SASS is a preprocessor for your CSS
</> </>
input.scss output.css
Who is SASS for?
I am not a programmer
I don’t want to be a programmer
Organized CSS
The Problem with CSSRepetitive
Difficult to maintain
Unorganized
Core Features of SASSVariables
Nesting
Mixins
@import
VariablesSay goodbye to HEX Values
VariablesSay goodbye to HEX values
A variable allows you to pull in values that you only define once. If you are looking for one reason to switch to SASS variables are it.
SCSS
VariablesSay goodbye to HEX values
Once defined variables can then be used through-out your SASS.
SCSS CSS
VariablesMaking life simpler
Strings of text Colours
Hex values Numbers
Boolean values Value lists
SCSS CSS
NestingStop repeating yourself
NestingStop repeating yourself
Nesting allows you to nest child elements under parent elements.
SCSSCSS
NestingThe all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class extensions.
SCSSCSS
NestingThe all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class extensions.
SCSSCSS
NestingThe all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class extensions.
HTML
NestingThe all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class extensions.
SCSSCSS
NestingCommenting and spacing
Commenting and spacing keeps your SASS legible.
SCSS SCSS
MixinsReusable chunks of CSS
MixinsReusable chunks of CSS
Create a mixin by declaring “@mixin mixin-name”. Call a mixin by declaring “@include mixin-name”.
SCSS
MixinsArguments
Using arguments in your mixins makes them so much better!
SCSS
MixinsArguments
Arguments accept default values as fallbacks if no value is given.
SCSS
@importFor the Obsessive Compulsive
@import
</> </>
input.scss
</>
variables.scss
</>
mixins.scss
</>
type.scss
output.css
@importFor the Obsessive Compulsive
Keeping your styles organized just got so much easier with @import.
SCSS
@importFor the Obsessive Compulsive
Keeping your styles organized just got so much easier with @import.
SCSS
@import
Setting up SASSThe dreaded terminal
Setting up SASSThe dreaded terminal
Setting up SASSStep 1 : Install SASS
$ gem install sass
Setting up SASSStep 2 : Watch
$ sass —watch sass/styles.scss:css/styles.css
Setting up SASSBonus : Output style
Setting up SASSBonus : Output style
Nested Expanded Compact
Compressed
$ sass — watch sass/styles.scss:css/styles.css — style compressed
Setting up SASSWindows Users :(
LibrariesDon’t reinvent the wheel.
SASS libraries make it much easier to implement things that otherwise would require a lot more CSS.
LibrariesDon’t reinvent the wheel.
SCSS
CSS
LibrariesDon’t reinvent the wheel.
