Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
#mswebcamp
When a Sasquatch and a Boar get together
(or how to use SASS and Grunt)
Ricardo Castelhano (@riccastelhano)
Fullstack Dev ...
</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—
an...
Grunt
The JavaScript Task Runner
• Install Grunt Command Line Interface
npm install –g grunt-cli
• Create package.json
npm...
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
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
Thank You
@riccastelhano
http://www.ricardocastelhano.net
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
Prochain SlideShare
Chargement dans…5
×

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

756 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

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

×