When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)

637 visualizações

Publicada em

How to install and config Grunt to transpile Sass into CSS.
The benefits of using Sass.

Publicada em: Tecnologia
  • Seja o primeiro a comentar

When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)

  1. 1. #mswebcamp
  2. 2. 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
  3. 3. </WEB Prerequirements
  4. 4. </WEB
  5. 5. </WEB
  6. 6. 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?
  7. 7. 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
  8. 8. Grunt The JavaScript Task Runner package.json demo
  9. 9. Grunt The JavaScript Task Runner Gruntfile.js demo
  10. 10. Grunt The JavaScript Task Runner package.json after package installation demo
  11. 11. Grunt The JavaScript Task Runner Gruntfile.js after config is done demo
  12. 12. </WEB
  13. 13. 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?
  14. 14. SASS Declaration Variables Syntactically Awesome Style Sheet Usage
  15. 15. SASS Nesting Syntactically Awesome Style Sheet
  16. 16. SASS Partials & Imports Syntactically Awesome Style Sheet
  17. 17. SASS Operators Syntactically Awesome Style Sheet
  18. 18. SASS Control Directives & Expressions Syntactically Awesome Style Sheet
  19. 19. SASS Mixins Syntactically Awesome Style Sheet
  20. 20. SASS Functions Syntactically Awesome Style Sheet
  21. 21. SASS Inheritance Syntactically Awesome Style Sheet
  22. 22. SASS Syntactically Awesome Style Sheet demo Demo files https://github.com/RicCastelhano/sassquatch-boar-demo
  23. 23. Thank You @riccastelhano http://www.ricardocastelhano.net

×