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

622 visualizações

Publicada em

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

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
622
No SlideShare
0
A partir de incorporações
0
Número de incorporações
60
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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

    ×