State of the Sass - The Mixin

Post on 16-Apr-2017

1.018 views 0 download

Transcript of State of the Sass - The Mixin

State of the

November 4th, 2015 The Mixin

@kaelighttp://bit.ly/mixin112015

https://leanpub.com/enduringcss

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

https://youtu.be/aIyhhHTmsXE

https://youtu.be/aIyhhHTmsXE

This thinking will impact Sass and CSS at scale

https://youtu.be/sijmNe9Yp5Q

https://youtu.be/sijmNe9Yp5Q

Challenge accepted!— Sebastian Golasch, Rodney Rehm

+

=

.

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

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

True 2.0Unit testing for Sass

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

By @ericam

Testing a function

Testing a mixin

Sass-LintSCSS-Lint for Node

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

https://github.com/davidkpiano/sassdash

lodash for Sass

$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)

Old but new news

Chris Epptsein@chriseppstein

Developer at LinkedIn

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.

Modules can add additional custom functions to Sass that

are written in JavaScript.

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

@kaelighttp://bit.ly/mixin112015