Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sass: An Introduction
Search
Stuart Robson
January 08, 2014
Programming
0
220
Sass: An Introduction
These are the slides I used in my workshop at The Founder Hub on the 8th of January 2014
Stuart Robson
January 08, 2014
Tweet
Share
More Decks by Stuart Robson
See All by Stuart Robson
L-I-V-I-N
sturobson
2
630
A Modern Sass Artchitecture
sturobson
11
2k
A Modern Sass Architecture
sturobson
7
440
Cutting Edge Sass - Sass Summit 2014
sturobson
5
360
100% Pure Sass
sturobson
1
280
Make Your Code Delicious - From the Front, Italy 2014
sturobson
4
1.2k
Freelancing: One year done.
sturobson
0
1.2k
Sass: a whistle stop tour
sturobson
1
790
make your code delicious
sturobson
2
660
Other Decks in Programming
See All in Programming
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
230
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
150
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.3k
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
270
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
190
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
290
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
340
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
990
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
We Have a Design System, Now What?
morganepeng
51
7.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Thoughts on Productivity
jonyablonski
69
4.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Designing for humans not robots
tammielis
250
25k
Visualization
eitanlees
146
15k
Navigating Team Friction
lara
183
15k
Side Projects
sachag
452
42k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Transcript
Sass: An Introduction Founder’s Hub, Cardiff. January 2014
About Me. Stuart Robson ! front-end developer ! rwdcalc.com SassnotSASS.com
! Sassifaction
A small caveat I don’t know _everything_
What is Sass?
Syntactically Awesome Stylesheets A pre-processor making CSS fun again.! Hampton
Catlin created it in 2006 to work along side HAML! Nathan Weizenbaum began to assist and develop it late 2006! Chris Epstein committed the first version of Compass in Autumn 2008
Alternatives to Sass
The Tale of Two Syntaxes
Sass
SCSS
Installing Sass… PrePros
None
Your First Sass file
CSS and Sass commenting ‘CSS’ style comments are retained unless
:compressed Unless you write - /*! comment */
Sass > CSS compile options :nested :expanded :compact :compressed
@import In CSS In Sass
None
So, what can Sass do?
$variables what could we use it for?
The Facebook Blue Declared 261 times throughout all stylesheets! Imagine
if Zuck wanted to change the shade? #3B5998
None
Webfonts with easy fallbacks
None
Border Radius Margin Media Queries Border Padding
Nesting
Don’t follow DOM
3 levels deep When nesting your Sass, don’t go any
further than 3 levels deep helps performance (although negligible).! helps sanity when looking at your code.
Combining Selectors
The Powerful Ampersand
The Parent Selector using the &(ampersand) reference the parent selector
None
@mixins resusable code snippets! customisable but you can set default
$arguments
@mixins Make Sass write the menial bits of CSS for
you
@extend clones the attributes from a rule and adds them
to another rule! be careful, with great power comes great responsibility
@extends
Using @extend badly
%placeholders they can be @extend-ed just like existing classes or
IDs.! the @extend-ed %placeholder will be generated.! the actual %placeholder selector won’t be generated. or ‘silent classes’
%placeholders or ‘silent classes’
Functions Math Operators +, -, *, /, and %
Functions Number Functions
Functions Control Directives @if @for @each @while
Functions @for loop
Functions @each loop
Colour
@content allow you to pass anything into a mixin! I
mainly use it for media queries! could be added to the bottom of any mixin, just in case
@content
@content & media queries
@content, media queries and Internet Explorer
A CSS authoring framework
What’s in Compass CSS3 mixins! typographic rhythm! sprite generation! loads
of helpers
Lots of Sass mixins grids typographical ! stylesheet
Sass 3.3
Sass 3.3 Sourcemaps - so you can see what you’re
editing in devtools.! Improved & support! Maps support! @at-root rule