Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
“Your CSS
is a mess.”
Jonathan Snook
Slide 3
Slide 3 text
Your CSS
is a mess.
Slide 4
Slide 4 text
Broken from
the start?
Slide 5
Slide 5 text
Sass to
the rescue!
Slide 6
Slide 6 text
But... wait.
Slide 7
Slide 7 text
It's not all
bright and
shiny.
Slide 8
Slide 8 text
Complexity,
maintainability,
scary code...
Slide 9
Slide 9 text
Don't
over-{think|engineer}
Slide 10
Slide 10 text
KISS
Keep It
Simple, Stupid!
Slide 11
Slide 11 text
KYSS
Keep Your
Sass Simple
Keep Sass Simple at SitePoint
Slide 12
Slide 12 text
KYSSS
Keep Your
Sass Simple &
Straightforward
Slide 13
Slide 13 text
KYSSSS
Keep Your
Sass Simple, Smart &
Straightforward...
Slide 14
Slide 14 text
Write
simple APIs
Slide 15
Slide 15 text
.parent {
@include _(
10 8 6 4,
$gutter: alpha omega omega default
);
}
Slide 16
Slide 16 text
.parent {
width: 100%;
@include respond-to("desktop") {
width: 75%;
}
}
Slide 17
Slide 17 text
$color: map-get(
map-get(
map-get(
$themes, "shopping"
), "colors"
), "secondary"
);
Slide 18
Slide 18 text
$color: theme-conf(
"shopping", "colors", "secondary"
);
Slide 19
Slide 19 text
Beware of
selector nesting
Beware of selector nesting at SitePoint
Slide 20
Slide 20 text
Don't do
everything in
Sass
Slide 21
Slide 21 text
Rethinking
Atwood's law
Slide 22
Slide 22 text
Anything that can
be written in Sass
will eventually be
written in Sass
(probably by me)
Slide 23
Slide 23 text
SassyJSON
@include json-encode((
"cats" : true,
"answer" : 42
));
// {"cats": true, "answer": 42}
github.com/HugoGiraudel/SassyJSON
Slide 24
Slide 24 text
SassySort
$list: sort(
"How" "cool" "Sass" "is?" 42
);
// 42 "cool" "How" "is?" "Sass"
github.com/HugoGiraudel/SassySort
Slide 25
Slide 25 text
SassyBitwise
$value: bitwise(42 '&' 48);
// 32
github.com/HugoGiraudel/SassyBitwise
Slide 26
Slide 26 text
Some things
shouldn't
be done
Slide 27
Slide 27 text
Vendor
prefixing?
Maybe not.
Slide 28
Slide 28 text
Autoprefixer
Less code
Up-to-date
github.com/postcss/autoprefixer
Slide 29
Slide 29 text
REM?
Think twice.
Slide 30
Slide 30 text
px_to_rem
Less code
Easier
github.com/songawee/px_to_rem
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
Clean
your code
Slide 33
Slide 33 text
.selector {
color: blue;
backgroud: url(unicorn.png);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
position: relative }
Slide 34
Slide 34 text
.selector {
position: relative;
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
color: blue;
backgroud: url("unicorn.png");
}
Slide 35
Slide 35 text
cssguidelin.es
Slide 36
Slide 36 text
scss-lint
github.com/causes/scss-lint
Slide 37
Slide 37 text
Document
your code
Slide 38
Slide 38 text
.selector {
overflow: hidden;
white-space: nowrap;
margin: -.5em;
z-index: 42;
}
Slide 39
Slide 39 text
/**
* 1. Clear inner floats
* 2. Force all items on same line
* 3. Cancel items padding
* 4. Above content, below modal
*/
.selector {
overflow: hidden; /* 1 */
white-space: nowrap; /* 2 */
margin: -.5em; /* 3 */
z-index: 42; /* 4 */
}
Slide 40
Slide 40 text
Document
your Sass
Slide 41
Slide 41 text
SassDoc
sassdoc.com
Slide 42
Slide 42 text
/// Mixin to size an element
/// @access public
/// @param {Number} $width - Width
/// @param {Number} $height - Height
/// @example scss - Sizing an element
/// .element {
/// @include size(100%, 5em);
/// }
SassDoc
Slide 43
Slide 43 text
SassDoc
Slide 44
Slide 44 text
Test
your code
Slide 45
Slide 45 text
True
or
BootCamp
Slide 46
Slide 46 text
@include describe("A suite") {
@include it("contains spec with expectation") {
@include should(
expect(2 + 2),
to(be(4))
);
}
}
Bootcamp
github.com/thejameskyle/bootcamp
Slide 47
Slide 47 text
KISS - KYSS
clean, test,
document
Slide 48
Slide 48 text
And everything
will be fine.
Slide 49
Slide 49 text
Thanks!
@HugoGiraudel