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
440
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
630
A Modern Sass Artchitecture
sturobson
11
2k
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
Sass: An Introduction
sturobson
0
220
make your code delicious
sturobson
2
660
Other Decks in Design
See All in Design
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
250
Goodpatch Tour💙 / We are hiring!
goodpatch
31
800k
LLMによるRAG評価用合成テストデータの生成
licux
6
710
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
130
デザイナーとPMの両ロール_3つのポイント
toy1618
1
170
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
5
4.1k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
300
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
900
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
290
Les petites aventures de CSS, saison 2025
goetter
3
4k
Featured
See All Featured
Scaling GitHub
holman
459
140k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Site-Speed That Sticks
csswizardry
4
410
Optimising Largest Contentful Paint
csswizardry
34
3.1k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Designing Experiences People Love
moore
140
23k
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