Living Style Guides in KSS with SASS

SASS-TO-03.md

SASS-TO Meetup October 2014

Introductions

• What Is the most interesting feature of SASS have you heard about, but don't know how to use?
• What OS's are everyone running?
• Gulp vs Grunt users?

Announcements

• SASS Conf NYC
• Libsass
• Help with the meetup?
• Sponsors (Food, Drink, etc)

#Living Style Guides#

##Demo examples## http://htanjo.github.io/kss-node-template/section-3.html

##Setup prerequisites##

INstall Xcode CLI

xcode-select --install

Install node.js from binary

Download from http:// node.js

Bundler (optional kinda - but USE BUNDLER)

$ (sudo) gem install bundler $ bundle install --path vendor/bundle

Test to make sure it compiles $ bundle exec compass watch

Setup Node KSS

https://github.com/kss-node/

Global Installation of Node KSS (sudo) npm install -g kss

##Download Demo Project ##

• https://www.dropbox.com/s/m697fcotvuh1tmk/kss.zip?dl=0
• https://github.com/JohnAlbin/normalize-scss
• Breakpoint
• SASS Globbing
• Jacket

Review the Demo Project Partials Structure

Run KSS-Node from project root.

(the command in general) kss-node sass styleguide --template custom-template

$ kss-node ./sass styleguide -t ./custom-template

Getting it working with front end automation

// Grunt w/KSS http://blog.andrewmart.in/2014/04/12/generating-style-guides-with-kss/

// Gulp w/ KSS https://github.com/philj/gulp-kss