When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
Download as PPTX, PDF1 like963 views
This document discusses using Grunt and SASS together. It begins by introducing Grunt as a JavaScript task runner that can automate tasks like minification, compilation, testing and more. It then explains how to set up a Grunt project by installing Grunt CLI, creating a package.json, Gruntfile.js, and installing Grunt and plugins like SASS and Watch. The document next introduces SASS, noting how it adds features to CSS like variables, nesting, mixins and more. It then demonstrates various SASS features and provides a demo repository link.
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
- 2. #mswebcamp
- 3. 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
- 5. </WEB
- 6. </WEB
- 7. Grunt The 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?
- 8. Grunt The JavaScript Task Runner • Install Grunt Command Line Interface npm install –g grunt-cli • Create package.json npm init • Create Gruntfile.js • Install Grunt Task Runner npm install grunt –-save-dev • Install SASS and Watch Tasks npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev demo
- 9. Grunt The JavaScript Task Runner package.json demo
- 10. Grunt The JavaScript Task Runner Gruntfile.js demo
- 11. Grunt The JavaScript Task Runner package.json after package installation demo
- 12. Grunt The JavaScript Task Runner Gruntfile.js after config is done demo
- 13. </WEB
- 14. SASS Syntactically 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?
- 15. SASS Declaration Variables Syntactically Awesome Style Sheet Usage
- 16. SASS Nesting Syntactically Awesome Style Sheet
- 17. SASS Partials & Imports Syntactically Awesome Style Sheet
- 18. SASS Operators Syntactically Awesome Style Sheet
- 19. SASS Control Directives & Expressions Syntactically Awesome Style Sheet
- 20. SASS Mixins Syntactically Awesome Style Sheet
- 21. SASS Functions Syntactically Awesome Style Sheet
- 22. SASS Inheritance Syntactically Awesome Style Sheet
- 23. SASS Syntactically Awesome Style Sheet demo Demo files https://github.com/RicCastelhano/sassquatch-boar-demo
Editor's Notes
- #9: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #10: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #11: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #12: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #13: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #16: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #17: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #18: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #19: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #20: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #21: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #22: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #23: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev
- #24: npm install –g grunt-cli npm init npm install grunt –-save-dev npm install grunt-contrib-sass –-save-dev npm install grunt-contrib-watch –-save-dev