When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
-
Upload
ricardo-castelhano -
Category
Technology
-
view
656 -
download
1
Transcript of 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
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?
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
GruntThe JavaScript Task Runner
package.json
demo
GruntThe JavaScript Task Runner
Gruntfile.js
demo
GruntThe JavaScript Task Runner
package.json
after package installation
demo
GruntThe JavaScript Task Runner
Gruntfile.js
after config is done
demo
</WEB
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?
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
SASSSyntactically Awesome Style Sheet
demo
Demo files
https://github.com/RicCastelhano/sassquatch-boar-demo
Thank You@riccastelhano
http://www.ricardocastelhano.net