introducing grunt, npm and sass
TRANSCRIPT
![Page 1: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/1.jpg)
Introducing Sass, Grunt, Node modules
Priyanka Sethi
![Page 2: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/2.jpg)
Sass is Syntactically Awesome Stylesheet.
Sass is an extension of CSS that adds power and elegance to the basic language. - CSS WITH SUPERPOWERS
It allows you to use variables, nested rules, mixins, inline imports and more, all with fully CSS-compatible syntax.
Sass helps keep large style sheets well-organized.
![Page 3: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/3.jpg)
Features
Fully css-compatible.
Language extensions such as variables, nesting and mixins.
Well formatted, customizable output.
Many useful functions for manipulating colors and other values.
Advanced features like control directives for libraries.
![Page 4: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/4.jpg)
Syntax- There are two syntaxes, we will be focussing on SCSS,
Sassy CSS - It is an extension of the syntax of CSS, which means every valid CSS stylesheet is a valid SCSS file with the same meaning.
http://sass-lang.com/guide
![Page 5: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/5.jpg)
CSS Extensions Variables $font-stack: Helvetica, sans-serif;$primary-color: #333;
body { font: 100% $font-stack; color: $primary-color;}
Import
@import 'reset';
body {
font: 100% Helvetica,
sans-serif;
background-color:
#efefef;
}
![Page 6: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/6.jpg)
Mixins
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
![Page 7: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/7.jpg)
Extend/Inheritence
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
![Page 8: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/8.jpg)
Nesting ul { margin: 0; padding: 0; list-style: none;
li {
display: inline-block;
a { display: block; padding: 6px 12px; text-decoration: none; } }
}
![Page 9: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/9.jpg)
Ruby- Ruby uses Gems to manage its various packages of code like Sass.
Sass is Ruby gem.
gem install sass
This will install Sass and dependencies.
![Page 10: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/10.jpg)
Grunt - The JavaScript Task Runner.
Which basically means automation, the less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting etc.
After you’ve configured it through a Gruntfile, a task runner can do most of that mundane work with zero effort.
![Page 11: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/11.jpg)
Sample Gruntfile.js
http://gruntjs.com/sample-gruntfile
Plugins
http://gruntjs.com/plugins
![Page 12: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/12.jpg)
grunt-contrib-uglify
Minify javascript files with UglifyJS
Run this task with the grunt uglify command.
https://www.npmjs.com/package/grunt-contrib-uglify
![Page 13: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/13.jpg)
grunt-contrib-sass
Compile Sass to CSS
Run this task with the grunt sass command
https://www.npmjs.com/package/grunt-contrib-sass
![Page 14: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/14.jpg)
grunt-contrib-cssmin
Minify CSS
Run this task with the grunt cssmin command.
https://www.npmjs.com/package/grunt-contrib-cssmin
![Page 15: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/15.jpg)
grunt-contrib-watch
Run predefined tasks whenever watched file patterns are added, changed or deleted.
Run this task with the grunt watch command.
https://www.npmjs.com/package/grunt-contrib-watch
![Page 16: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/16.jpg)
Node.js - npm
npm is Node Package Manager.
Npm provides command line utility to install Node.js packages, do version management and dependency management of Node.js packages.
![Page 17: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/17.jpg)
Installing modules using npmnpm install npm -g
Node comes with npm installed, but npm gets updated more frequently then Node. So just to make sure, you have latest version.
npm install -g grunt-cli
The grunt command line interface. -g is for globally, we will have access to the grunt command anywhere on your system.
![Page 18: Introducing grunt, npm and sass](https://reader035.vdocuments.us/reader035/viewer/2022070522/58ee9a9b1a28abfd6f8b45d3/html5/thumbnails/18.jpg)
Goals for next presentation
1.How to implement all these in a project.2.Explaining grunt, npm and sass with live
example. 3.Code structure for english and arabic, how to
make things more dynamic.