SlideShare a Scribd company logo

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

•Download as PPTX, PDF•
•
Ricardo Castelhano
Ricardo Castelhano

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.

1 of 26
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
#mswebcamp
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
</WEB Prerequirements
</WEB
</WEB
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?
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
Grunt The JavaScript Task Runner package.json demo
Grunt The JavaScript Task Runner Gruntfile.js demo
Grunt The JavaScript Task Runner package.json after package installation demo
Grunt The JavaScript Task Runner Gruntfile.js after config is done demo
</WEB
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?
SASS Declaration Variables Syntactically Awesome Style Sheet Usage
SASS Nesting Syntactically Awesome Style Sheet
SASS Partials & Imports Syntactically Awesome Style Sheet
SASS Operators Syntactically Awesome Style Sheet
SASS Control Directives & Expressions Syntactically Awesome Style Sheet
SASS Mixins Syntactically Awesome Style Sheet
SASS Functions Syntactically Awesome Style Sheet
SASS Inheritance Syntactically Awesome Style Sheet
SASS Syntactically Awesome Style Sheet demo Demo files https://github.com/RicCastelhano/sassquatch-boar-demo
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
Thank You @riccastelhano http://www.ricardocastelhano.net
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)

More Related Content

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

Editor's Notes

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  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
  14. 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