![Page 1: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/1.jpg)
![Page 2: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/2.jpg)
#mswebcamp
![Page 3: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/3.jpg)
When a Sasquatch and a Boar get together (or how to use SASS and Grunt)
Ricardo Castelhano (@riccastelhano)
Fullstack Dev / Technical Manager / Certified Scrum Master / Certified Zend Engineer
![Page 4: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/4.jpg)
</WEB
Prerequirements
![Page 5: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/5.jpg)
</WEB
![Page 6: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/6.jpg)
</WEB
![Page 7: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/7.jpg)
GruntThe JavaScript Task Runner
• “In one word: automation (…) a task runner can do most of that mundane work for you—and your team—with basically zero effort.”
• “The Grunt ecosystem is huge (…), you can use Grunt to automate just about anything(…)”
• “Like minification, compilation, unit testing, linting, ...” (just check Grunt Plugins Page)
(src: gruntjs.com)
Why?
![Page 8: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/8.jpg)
GruntThe JavaScript Task Runner
• Install Grunt Command Line Interfacenpm install –g grunt-cli
• Create package.jsonnpm init
• Create Gruntfile.js
• Install Grunt Task Runnernpm install grunt –-save-dev
• Install SASS and Watch Tasksnpm install grunt-contrib-sass –-save-devnpm install grunt-contrib-watch –-save-dev
demo
![Page 9: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/9.jpg)
GruntThe JavaScript Task Runner
package.json
demo
![Page 10: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/10.jpg)
GruntThe JavaScript Task Runner
Gruntfile.js
demo
![Page 11: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/11.jpg)
GruntThe JavaScript Task Runner
package.json
after package installation
demo
![Page 12: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/12.jpg)
GruntThe JavaScript Task Runner
Gruntfile.js
after config is done
demo
![Page 13: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/13.jpg)
</WEB
![Page 14: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/14.jpg)
SASSSyntactically Awesome Style Sheet
• “(…)stylesheets are getting larger, more complex, and harder to maintain(...)”
• “(…)Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again(…)”
(src: sass-lang.com)
Why?
![Page 15: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/15.jpg)
SASS
Declaration
Variables
Syntactically Awesome Style Sheet
Usage
![Page 16: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/16.jpg)
SASS Nesting
Syntactically Awesome Style Sheet
![Page 17: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/17.jpg)
SASS Partials & Imports
Syntactically Awesome Style Sheet
![Page 18: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/18.jpg)
SASS Operators
Syntactically Awesome Style Sheet
![Page 19: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/19.jpg)
SASS Control Directives & Expressions
Syntactically Awesome Style Sheet
![Page 20: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/20.jpg)
SASS Mixins
Syntactically Awesome Style Sheet
![Page 21: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/21.jpg)
SASS Functions
Syntactically Awesome Style Sheet
![Page 22: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/22.jpg)
SASS Inheritance
Syntactically Awesome Style Sheet
![Page 23: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/23.jpg)
SASSSyntactically Awesome Style Sheet
demo
Demo files
https://github.com/RicCastelhano/sassquatch-boar-demo
![Page 24: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/24.jpg)
![Page 25: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/25.jpg)
Thank You@riccastelhano
http://www.ricardocastelhano.net
![Page 26: When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)](https://reader031.vdocuments.us/reader031/viewer/2022022419/58edab3e1a28abd8698b46cf/html5/thumbnails/26.jpg)