Getting SASSy with front end development
-
Upload
matthew-carleton -
Category
Design
-
view
328 -
download
1
Transcript of Getting SASSy with front end development
![Page 1: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/1.jpg)
Getting SASSy with front end development
![Page 2: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/2.jpg)
The Studio of Matthew Carleton
Web Design, development and branding
@matthewcarleton
matthewcarleton.com
![Page 3: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/3.jpg)
What’s the deal with SASS?
![Page 4: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/4.jpg)
Who’s heard of SASS?
![Page 5: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/5.jpg)
Who’s used SASS?
![Page 6: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/6.jpg)
[SYNTACTICALLY AWESOME STYLESHEETS]
![Page 7: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/7.jpg)
What we will talk about1. SASS? 2. Who is SASS for 3. Features of SASS 4. Setting up SASS 5. Libraries & Resources
![Page 8: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/8.jpg)
What is SASS?
![Page 9: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/9.jpg)
SASS is a preprocessor for your CSS
</> </>
input.scss output.css
![Page 10: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/10.jpg)
Who is SASS for?
![Page 11: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/11.jpg)
I am not a programmer
![Page 12: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/12.jpg)
I don’t want to be a programmer
![Page 13: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/13.jpg)
![Page 14: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/14.jpg)
Organized CSS
![Page 15: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/15.jpg)
The Problem with CSSRepetitive
Difficult to maintain
Unorganized
![Page 16: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/16.jpg)
Core Features of SASSVariables
Nesting
Mixins
@import
![Page 17: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/17.jpg)
VariablesSay goodbye to HEX Values
![Page 18: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/18.jpg)
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
![Page 19: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/19.jpg)
VariablesSay goodbye to HEX values
Once defined variables can then be used through-out your SASS.
SCSS CSS
![Page 20: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/20.jpg)
VariablesMaking life simpler
Strings of text Colours
Hex values Numbers
Boolean values Value lists
SCSS CSS
![Page 21: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/21.jpg)
NestingStop repeating yourself
![Page 22: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/22.jpg)
NestingStop repeating yourself
Nesting allows you to nest child elements under parent elements.
SCSSCSS
![Page 23: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/23.jpg)
NestingThe all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class extensions.
SCSSCSS
![Page 24: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/24.jpg)
NestingThe all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class extensions.
SCSSCSS
![Page 25: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/25.jpg)
NestingThe all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class extensions.
HTML
![Page 26: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/26.jpg)
NestingThe all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class extensions.
SCSSCSS
![Page 27: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/27.jpg)
NestingCommenting and spacing
Commenting and spacing keeps your SASS legible.
SCSS SCSS
![Page 28: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/28.jpg)
MixinsReusable chunks of CSS
![Page 29: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/29.jpg)
MixinsReusable chunks of CSS
Create a mixin by declaring “@mixin mixin-name”. Call a mixin by declaring “@include mixin-name”.
SCSS
![Page 30: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/30.jpg)
MixinsArguments
Using arguments in your mixins makes them so much better!
SCSS
![Page 31: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/31.jpg)
MixinsArguments
Arguments accept default values as fallbacks if no value is given.
SCSS
![Page 32: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/32.jpg)
@importFor the Obsessive Compulsive
![Page 33: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/33.jpg)
@import
</> </>
input.scss
</>
variables.scss
</>
mixins.scss
</>
type.scss
output.css
![Page 34: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/34.jpg)
@importFor the Obsessive Compulsive
Keeping your styles organized just got so much easier with @import.
SCSS
![Page 35: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/35.jpg)
@importFor the Obsessive Compulsive
Keeping your styles organized just got so much easier with @import.
SCSS
![Page 36: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/36.jpg)
@import
![Page 37: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/37.jpg)
Setting up SASSThe dreaded terminal
![Page 38: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/38.jpg)
Setting up SASSThe dreaded terminal
![Page 39: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/39.jpg)
Setting up SASSStep 1 : Install SASS
$ gem install sass
![Page 40: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/40.jpg)
Setting up SASSStep 2 : Watch
$ sass —watch sass/styles.scss:css/styles.css
![Page 41: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/41.jpg)
Setting up SASSBonus : Output style
![Page 42: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/42.jpg)
Setting up SASSBonus : Output style
Nested Expanded Compact
Compressed
$ sass — watch sass/styles.scss:css/styles.css — style compressed
![Page 43: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/43.jpg)
Setting up SASSWindows Users :(
![Page 45: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/45.jpg)
LibrariesDon’t reinvent the wheel.
SASS libraries make it much easier to implement things that otherwise would require a lot more CSS.
![Page 46: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/46.jpg)
LibrariesDon’t reinvent the wheel.
SCSS
![Page 47: Getting SASSy with front end development](https://reader030.fdocuments.net/reader030/viewer/2022032618/55b4f74ebb61eb715b8b45a9/html5/thumbnails/47.jpg)
CSS
LibrariesDon’t reinvent the wheel.