Introducing grunt, npm and sass
- 1. Introducing Sass, Grunt, Node modules Priyanka Sethi
- 2. 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.
- 3. 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.
- 4. 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
- 5. 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; }
- 6. 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); }
- 7. Extend/Inheritence .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; }
- 8. Nesting ul { margin: 0; padding: 0; list-style: none; li { display: inline-block; a { display: block; padding: 6px 12px; text-decoration: none; } } }
- 9. 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.
- 10. 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.
- 12. grunt-contrib-uglify Minify javascript files with UglifyJS Run this task with the grunt uglify command. https://www.npmjs.com/package/grunt-contrib-uglify
- 13. grunt-contrib-sass Compile Sass to CSS Run this task with the grunt sass command https://www.npmjs.com/package/grunt-contrib-sass
- 14. grunt-contrib-cssmin Minify CSS Run this task with the grunt cssmin command. https://www.npmjs.com/package/grunt-contrib-cssmin
- 15. 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
- 16. 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.
- 17. Installing modules using npm npm 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.
- 18. 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.