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
240
make your code delicious
sturobson
2
690
Other Decks in Design
See All in Design
decksh object reference
ajstarks
2
1.3k
7 Core Values of Round-L
wired888
0
1.4k
新卒の目から見たサイボウズのデザイン組織
ryota5884
0
160
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
100
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
180
mento Design Team Portfolio
mento0fficial
0
580
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
770
freee + Product Design FY25Q4
freee
4
16k
株式会社バクタム 会社説明資料
bactum
0
290
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
270
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
270
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
620
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Scaling GitHub
holman
462
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A designer walks into a library…
pauljervisheath
207
24k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Faster Mobile Websites
deanohume
309
31k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
4 Signs Your Business is Dying
shpigford
184
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
20k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
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