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
460
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
660
A Modern Sass Artchitecture
sturobson
11
2.1k
Cutting Edge Sass - Sass Summit 2014
sturobson
5
390
100% Pure Sass
sturobson
1
300
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
810
Sass: An Introduction
sturobson
0
230
make your code delicious
sturobson
2
690
Other Decks in Design
See All in Design
A Platform Connecting Brand Philosophy and Assets: "LY Corporation Design Hub"
lycorptech_jp
PRO
0
330
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
2
2.8k
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
2.9k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
630
CursorでAI活用のナレッジベースを構築する
kanzaki
0
500
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.7k
7 Core Values of Round-L
wired888
0
910
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
200
mento Design Team Portfolio
mento0fficial
0
490
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
120
Featured
See All Featured
Faster Mobile Websites
deanohume
308
31k
Bash Introduction
62gerente
614
210k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Being A Developer After 40
akosma
90
590k
Building Applications with DynamoDB
mza
95
6.5k
Writing Fast Ruby
sferik
628
62k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Done Done
chrislema
185
16k
Typedesign – Prime Four
hannesfritz
42
2.7k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Building Adaptive Systems
keathley
43
2.7k
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