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
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.1k
Designship 2023|想いを可視化するデザインの力
weddingpark
0
250
Amebaデザインシステム Spindleの開発 / The Development of Spindle
spindle
4
650
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
560
Portfolio 2023.07.28
helemarudesu
0
590
Design Leadership in Challenging Times
morganepeng
3
300
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
Designing UIs without a UI designer
strongeron
0
130
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
230
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
610
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
340
全社を巻き込んだコーポレートバリューの再定義に関するデザイナーの関わり方
sugiyama_sukedachi
0
170
Featured
See All Featured
The Mythical Team-Month
searls
216
42k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
6.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
Practical Orchestrator
shlominoach
183
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Statistics for Hackers
jakevdp
790
220k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
21
1.4k
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