Introducing grunt, npm and sass
-
Upload
priyanka1452 -
Category
Technology
-
view
215 -
download
2
Transcript of Introducing grunt, npm and sass
Introducing Sass, Grunt, Node modules
Priyanka Sethi
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.
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.
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
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;
}
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); }
Extend/Inheritence
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
Nesting ul { margin: 0; padding: 0; list-style: none;
li {
display: inline-block;
a { display: block; padding: 6px 12px; text-decoration: none; } }
}
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.
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.
Sample Gruntfile.js
http://gruntjs.com/sample-gruntfile
Plugins
http://gruntjs.com/plugins
grunt-contrib-uglify
Minify javascript files with UglifyJS
Run this task with the grunt uglify command.
https://www.npmjs.com/package/grunt-contrib-uglify
grunt-contrib-sass
Compile Sass to CSS
Run this task with the grunt sass command
https://www.npmjs.com/package/grunt-contrib-sass
grunt-contrib-cssmin
Minify CSS
Run this task with the grunt cssmin command.
https://www.npmjs.com/package/grunt-contrib-cssmin
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
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.
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.
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.