Top Banner
State of the April 15th, 2015 LDN Sass #3
26

State of the Sass (LDN Sass, April 15th, 2015)

Jul 15, 2015

Download

Engineering

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: State of the Sass (LDN Sass, April 15th, 2015)

State of the

April 15th, 2015 LDN Sass #3

Page 2: State of the Sass (LDN Sass, April 15th, 2015)

@kaelighttp://bit.ly/LDNSass3

Page 3: State of the Sass (LDN Sass, April 15th, 2015)
Page 4: State of the Sass (LDN Sass, April 15th, 2015)
Page 5: State of the Sass (LDN Sass, April 15th, 2015)
Page 6: State of the Sass (LDN Sass, April 15th, 2015)

Live SassBiteMicah Godbolt chats with Hampton

https://www.youtube.com/watch?v=gaDC4yiXn-U

TL;DWThe @include syntax could be simpler

They’re trying to pick syntaxes that don’t clash with W3C

Page 7: State of the Sass (LDN Sass, April 15th, 2015)

Support for variable scoping @at-root

Loads of bug fixes and more testsExperimental support for plugins

3.2.0 is close!

3.2.0-beta.5

Page 8: State of the Sass (LDN Sass, April 15th, 2015)

npm install node-sass@beta

Page 9: State of the Sass (LDN Sass, April 15th, 2015)

Challenge accepted!— Sebastian Golasch, Rodney Rehm

Page 10: State of the Sass (LDN Sass, April 15th, 2015)

+

=

.

Page 11: State of the Sass (LDN Sass, April 15th, 2015)

Launched in Jan 2014

Runs libsass 3.1.0 since Jan 2015

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

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

Sass.js

Page 12: State of the Sass (LDN Sass, April 15th, 2015)

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

Page 13: State of the Sass (LDN Sass, April 15th, 2015)
Page 14: State of the Sass (LDN Sass, April 15th, 2015)

Sass-Lint(eventually) SCSS-Lint for Node

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

Page 15: State of the Sass (LDN Sass, April 15th, 2015)

https://github.com/davidkpiano/sassdash

lodash for Sass

Page 16: State of the Sass (LDN Sass, April 15th, 2015)

$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 17: State of the Sass (LDN Sass, April 15th, 2015)

Grunt SassyCleanScans a project for partials that are never imported.

https://github.com/ryanburgess/grunt-sassyclean

Page 18: State of the Sass (LDN Sass, April 15th, 2015)

One more thing…

Page 19: State of the Sass (LDN Sass, April 15th, 2015)
Page 20: State of the Sass (LDN Sass, April 15th, 2015)

Chris Epptsein@chriseppstein

Developer at LinkedIn

Page 21: State of the Sass (LDN Sass, April 15th, 2015)
Page 22: State of the Sass (LDN Sass, April 15th, 2015)
Page 23: State of the Sass (LDN Sass, April 15th, 2015)

NPM modules for Sass

npm install eyeglass npm install my_eyeglass_module

// file.scss@import "<my_eyeglass_module>/file";

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

Page 24: State of the Sass (LDN Sass, April 15th, 2015)

Modules can add additional custom functions to Sass that

are written in JavaScript.

Page 25: State of the Sass (LDN Sass, April 15th, 2015)

Breakout about Sass & CSS Patterns at 5pm

Page 26: State of the Sass (LDN Sass, April 15th, 2015)

@kaelighttp://bit.ly/LDNSass3