State of the Sass - The Mixin

35
State of the November 4th, 2015 The Mixin

Transcript of State of the Sass - The Mixin

Page 1: State of the Sass - The Mixin

State of the

November 4th, 2015 The Mixin

Page 2: State of the Sass - The Mixin

@kaelighttp://bit.ly/mixin112015

Page 3: State of the Sass - The Mixin
Page 4: State of the Sass - The Mixin
Page 5: State of the Sass - The Mixin

https://leanpub.com/enduringcss

Page 6: State of the Sass - The Mixin
Page 7: State of the Sass - The Mixin
Page 8: State of the Sass - The Mixin
Page 9: State of the Sass - The Mixin

http://glenmaddern.com/articles/css-modules

Page 10: State of the Sass - The Mixin

https://youtu.be/aIyhhHTmsXE

Page 11: State of the Sass - The Mixin

https://youtu.be/aIyhhHTmsXE

Page 12: State of the Sass - The Mixin

This thinking will impact Sass and CSS at scale

Page 13: State of the Sass - The Mixin
Page 14: State of the Sass - The Mixin

https://youtu.be/sijmNe9Yp5Q

Page 15: State of the Sass - The Mixin

https://youtu.be/sijmNe9Yp5Q

Page 16: State of the Sass - The Mixin

Challenge accepted!— Sebastian Golasch, Rodney Rehm

Page 17: State of the Sass - The Mixin

+

=

.

Page 18: State of the Sass - The Mixin

Launched in Jan 2014

Runs libsass 3.3.1 since last week

A fair warning: minified it's 2.6MB, gzipped it's 570KB. node-sass is about 20 times faster than Sass.js

https://github.com/medialize/sass.js

Sass.js

Page 19: State of the Sass - The Mixin

http://medialize.github.io/playground.sass.js/

Page 20: State of the Sass - The Mixin
Page 21: State of the Sass - The Mixin

True 2.0Unit testing for Sass

http://www.miriamsuzanne.com/true/ https://github.com/ericam/true

By @ericam

Page 22: State of the Sass - The Mixin

Testing a function

Page 23: State of the Sass - The Mixin

Testing a mixin

Page 24: State of the Sass - The Mixin

Sass-LintSCSS-Lint for Node

https://github.com/sasstools/sass-lint By @snugug & Al.

Page 25: State of the Sass - The Mixin

https://github.com/davidkpiano/sassdash

lodash for Sass

Page 26: State of the Sass - The Mixin

$foo: _sort(3 1 4 2 6 5 8 7 9);// => 1 2 3 4 5 6 7 8 9

$foo: _sort(3 1 4 2 6 5 8 7 9, 'desc');// => 9 8 7 6 5 4 3 2 1

$users: ( ( 'user': 'barney', 'age': 36 ), ( 'user': 'fred', 'age': 40 ));$foo: _pluck($users, 'user');// => ('barney', 'fred')$user-index: _index-by($users, 'user');$foo: _pluck($user-index, 'age');// => (36, 40)

Page 27: State of the Sass - The Mixin

Old but new news

Page 28: State of the Sass - The Mixin
Page 29: State of the Sass - The Mixin

Chris Epptsein@chriseppstein

Developer at LinkedIn

Page 30: State of the Sass - The Mixin
Page 31: State of the Sass - The Mixin
Page 32: State of the Sass - The Mixin

NPM modules for Sass

npm install eyeglassnpm install my_eyeglass_module

@import "<my_eyeglass_module>";

Modules can add additional custom functions to Sass that are written in JavaScript.

Page 33: State of the Sass - The Mixin

Modules can add additional custom functions to Sass that

are written in JavaScript.

Page 34: State of the Sass - The Mixin

https://www.npmjs.com/browse/keyword/eyeglass-module

Page 35: State of the Sass - The Mixin

@kaelighttp://bit.ly/mixin112015