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
Sass: An Introduction
Search
Stuart Robson
January 08, 2014
Programming
0
200
Sass: An Introduction
These are the slides I used in my workshop at The Founder Hub on the 8th of January 2014
Stuart Robson
January 08, 2014
Tweet
Share
More Decks by Stuart Robson
See All by Stuart Robson
L-I-V-I-N
sturobson
2
610
A Modern Sass Artchitecture
sturobson
11
1.9k
A Modern Sass Architecture
sturobson
7
420
Cutting Edge Sass - Sass Summit 2014
sturobson
5
350
100% Pure Sass
sturobson
1
280
Make Your Code Delicious - From the Front, Italy 2014
sturobson
4
1.1k
Freelancing: One year done.
sturobson
0
1.2k
Sass: a whistle stop tour
sturobson
1
760
make your code delicious
sturobson
2
640
Other Decks in Programming
See All in Programming
LLM生成文章の精度評価自動化とプロンプトチューニングの効率化について
layerx
PRO
2
170
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
170
推し活の ハイトラフィックに立ち向かう Railsとアーキテクチャ - Kaigi on Rails 2024
falcon8823
6
2.6k
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
480
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
280
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
2.3k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
5k
ヤプリ新卒SREの オンボーディング
masaki12
0
110
現場で役立つモデリング 超入門
masuda220
PRO
15
3.1k
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
4.2k
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
300
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
190
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Optimizing for Happiness
mojombo
376
69k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Agile that works and the tools we love
rasmusluckow
327
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
The Language of Interfaces
destraynor
154
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Producing Creativity
orderedlist
PRO
341
39k
What's new in Ruby 2.0
geeforr
343
31k
Designing for Performance
lara
604
68k
Transcript
Sass: An Introduction Founder’s Hub, Cardiff. January 2014
About Me. Stuart Robson ! front-end developer ! rwdcalc.com SassnotSASS.com
! Sassifaction
A small caveat I don’t know _everything_
What is Sass?
Syntactically Awesome Stylesheets A pre-processor making CSS fun again.! Hampton
Catlin created it in 2006 to work along side HAML! Nathan Weizenbaum began to assist and develop it late 2006! Chris Epstein committed the first version of Compass in Autumn 2008
Alternatives to Sass
The Tale of Two Syntaxes
Sass
SCSS
Installing Sass… PrePros
None
Your First Sass file
CSS and Sass commenting ‘CSS’ style comments are retained unless
:compressed Unless you write - /*! comment */
Sass > CSS compile options :nested :expanded :compact :compressed
@import In CSS In Sass
None
So, what can Sass do?
$variables what could we use it for?
The Facebook Blue Declared 261 times throughout all stylesheets! Imagine
if Zuck wanted to change the shade? #3B5998
None
Webfonts with easy fallbacks
None
Border Radius Margin Media Queries Border Padding
Nesting
Don’t follow DOM
3 levels deep When nesting your Sass, don’t go any
further than 3 levels deep helps performance (although negligible).! helps sanity when looking at your code.
Combining Selectors
The Powerful Ampersand
The Parent Selector using the &(ampersand) reference the parent selector
None
@mixins resusable code snippets! customisable but you can set default
$arguments
@mixins Make Sass write the menial bits of CSS for
you
@extend clones the attributes from a rule and adds them
to another rule! be careful, with great power comes great responsibility
@extends
Using @extend badly
%placeholders they can be @extend-ed just like existing classes or
IDs.! the @extend-ed %placeholder will be generated.! the actual %placeholder selector won’t be generated. or ‘silent classes’
%placeholders or ‘silent classes’
Functions Math Operators +, -, *, /, and %
Functions Number Functions
Functions Control Directives @if @for @each @while
Functions @for loop
Functions @each loop
Colour
@content allow you to pass anything into a mixin! I
mainly use it for media queries! could be added to the bottom of any mixin, just in case
@content
@content & media queries
@content, media queries and Internet Explorer
A CSS authoring framework
What’s in Compass CSS3 mixins! typographic rhythm! sprite generation! loads
of helpers
Lots of Sass mixins grids typographical ! stylesheet
Sass 3.3
Sass 3.3 Sourcemaps - so you can see what you’re
editing in devtools.! Improved & support! Maps support! @at-root rule