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
410
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
590
A Modern Sass Artchitecture
sturobson
11
1.8k
Cutting Edge Sass - Sass Summit 2014
sturobson
5
340
100% Pure Sass
sturobson
1
260
Make Your Code Delicious - From the Front, Italy 2014
sturobson
4
1k
Freelancing: One year done.
sturobson
0
1.1k
Sass: a whistle stop tour
sturobson
1
700
Sass: An Introduction
sturobson
0
190
make your code delicious
sturobson
2
610
Other Decks in Design
See All in Design
231206_Book-launch-event_kato
hjmkth
2
1.2k
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
20231122_Design Leader Impact Award_Presentation_FAKE Okazaki
okazakityo
1
250
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
200
Designship 2023|想いを可視化するデザインの力
weddingpark
0
250
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
400
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.4k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
290
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
150
プロダクトデザインは子育て/Product design is parenting
medley
0
330
2024デザすぷVol.4 新年会/ Design Sprout Bar vol-4
root_recruit
1
320
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
120
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
13
8.3k
Building an army of robots
kneath
300
41k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Happy Clients
brianwarren
92
6.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Music & Morning Musume
bryan
41
5.6k
Code Review Best Practice
trishagee
56
15k
Writing Fast Ruby
sferik
622
60k
Rails Girls Zürich Keynote
gr2m
91
13k
Designing for humans not robots
tammielis
247
25k
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