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
A Modern Sass Architecture
Search
Stuart Robson
May 06, 2015
Design
7
450
A Modern Sass Architecture
A short talk I gave at the inaugural SassXSW in Bath on MAy 6th 2015
Stuart Robson
May 06, 2015
Tweet
Share
More Decks by Stuart Robson
See All by Stuart Robson
L-I-V-I-N
sturobson
2
650
A Modern Sass Artchitecture
sturobson
11
2k
Cutting Edge Sass - Sass Summit 2014
sturobson
5
380
100% Pure Sass
sturobson
1
290
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
800
Sass: An Introduction
sturobson
0
230
make your code delicious
sturobson
2
680
Other Decks in Design
See All in Design
AIで加速するアクセシビリティのこれから
magi1125
3
410
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.3k
Cards | Storyboards
giofortuna_story
0
240
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
650
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
180
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
890
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
210
問いの変遷
iflection
0
120
Starry | Storyboards | Scene 1-21
giofortuna_story
0
250
Storyboard Honey
rocioparronrubio
0
240
Masked shaman-Storyboard 2025
ashley0521
0
290
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1.1k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Thoughts on Productivity
jonyablonski
69
4.7k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A designer walks into a library…
pauljervisheath
205
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Mobile First: as difficult as doing things right
swwweet
223
9.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Code Review Best Practice
trishagee
68
18k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Transcript
Modern Architecture
[email protected]
None
[email protected]
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
What is a page?
We’re not building mom & pop shops anymore
OOCSS
BEM
SMACSS
ITCSS
None
Folders & Files - ageddon
7 folders, to rule them all
None
base/
base/ • where you put rudimentary defaults • a reset
file • basic typography settings • code for common HTML elements
None
layouts/
layouts/ • code that lays out the site • code
for the main ‘parts’ of your site • header • footer • main • aside
None
components/
components/ • smaller parts of the site • a carousel
(if they’re not evil, are they evil?) • accordian • tabs
None
pages/
pages/ • for ‘page specific’ code • files named after
the ‘page’ e.g. • _front-page.scss
None
themes/
themes/ • ‘big sites’ might need slight differences for different
states or themes
None
config/
config/ • code that doesn’t output CSS • tools and
helpers • mixins • variables • functions
None
vendor/
vendor/ • a good store for ‘not my code’ •
CSS from external libraries • jquery-ui.scss • bootstrap.scss
None
config/
|– config/ | |– _variables.scss | |– _functions.scss | |–
_mixins.scss | |– _helpers.scss
None
_variables.scss
866 lines of variables
None
// Default Variables // -------------------- $brand-color--primary: #C69; $brand-color--secondary: #699; $brand-color--tertiary:
#F2ECE4; ...
// Tabs Pattern // ------------------- $tabs-navigation-border-color: $brand-color--secondary; $tabs-navigation-text-color: $brand-color--tertiary; $tabs-main-background-color:
$white; ...
None
None
_shame.scss • somewhere to put something you’re not sure of
• should still have comments • should be emptied routinely, and quickly
None
file naming convention _b-reset.scss base files begin with _b- _c-tabs.scss
components begin with _c- _l-header.scss layout files begin with _l- _p-contact.scss page files begin with _p- _t-admin.scss theme files begin with _t- _v-neat.scss vendor files begin with _v-
@import - irasation
// config/ @import "config/_variables"; … // base/ @import "base/_reset"; ...
// components/ @import "components/_buttons"; ... // layout/ @import "layout/_navigation"; ... // pages/ @import "pages/_home"; ... // themes/ @import “themes/_logged-in“; ... // vendors/ @import "config/_jquery-ui"; ...
How To Write Your Sass?
.component { // extends // includes // variables // CSS
// parent selector items // media queries }
https://speakerdeck.com/onishiweb/taking-the-pain-out-of-refactoring-secwed-march
Never go four levels deep
http://sass-guidelin.es/
Modern Architecture
wrapping up • keep your Sass sane • use specific
folders for specific elements of a site • refactor when you can • add comments like a mad person