gulp - Gulp SASS - gulp sass - gulp tutorial - learn gulp
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
What is SASS in GULP?
- Sass is a plugin which is used in gulp which is loaded from package dependencies
- Sass Stands for Syntactically Awesome Style Sheets which is a style sheet language and it is used as a plugin in gulp
- Sass is a scripting language which was interpreted and compiled in Cascading Style Sheets
Install SASS in Gulp
These are some syntax as per how to install Sass in Gulp
npm install gulp.sass
npm install gulp-sass --save-dev
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
Methods of SASS
There are two methods to compile the files while using Sass in Gulp and they are
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Method 2:
var gulp = require('gulp');
var sass = require('gulp.sass');
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
Options in SASS
- Sass Plugin in Gulp accepts a key/value Sass object options as a parameter
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Example:
fuse.plugin(
SassPlugin({
outputStyle: 'compressed'
}), CSSPlugin()
)
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- We can also use Sass indented syntax set indentedSyntax option which is one of the options which are used for Sass:
Example:
fuse.plugin(
SassPlugin({
indentedSyntax: true
}), CSSPlugin()
)
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
- Custom Set functions option is an option which is used in Sass in Gulp
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Example:
fuse.plugin(
SassPlugin({
functions: {
'torem($size)': function(size) {
size.setUnit('rem');
return size;
},
}
}), CSSPlugin()
)
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
Gulp SASS Specific Options
- Hence these are some of the Gulp SASS Specific Options which are given below
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
errLogToConsole: true
- If we pass errLogToConsole: true into the has options ,sass errors will be logged to the console
onSuccess: callback
- It passes in your own callback to be called upon after successful compilation done by node-sass.
- The callback has the form callback (css), and is passed to compile css as a string.
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
onError: callback
- It passes in your own callback to be called upon a sass error from node-sass.
- The callback has the form callback(err), where err is the error string which is generated by libsass..
sync: true
- If we pass sync: true into the hash options, sass.renderSync will be called.
Source Maps
- Gulp Sass can be used with gulp-sourcemaps to generate source maps for the SASS and CSS compilation.
- We need to initialize gulp-source maps priority to run the gulp.sass compiler
Syntax:
var sourcemaps = require('gulp-sourcemaps');
{
gulp.src('./scss/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css');
}
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy - gulp tutorial - gulp guides - gulp - rubyonrails - learn gulp - team
Imports and Partials
- Gulp Sass is automatically through the directory of every sass file where it parses as an include path for node-sass.
gulp tutorials tag - gulp , gulp sass , gulp watch , gulp meaning , gulp js , gulp uglify , concat javascript , eisi gulp , gulp concat , gulp install , gulp tutorial , what is gulp , npm install gulp , gulpjs
Syntax:
@import "includes/settings";
.content-navigation {
border-color: $blue;
color:
darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}