En el vas a poder tener orden de tu CSS, automatizar trabajo, escalabilidad del proyecto y ahorro de tiempo.
Se puede utilizar dos tipos de sintaxis *.sass y *.scss
*.scss
body {
font: 100% $font-stack;
color: $primary-color;
}
*.sass
body
font: 100% $font-stack
color: $primary-color
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Nos van a servir para declarar todos los archivos que pueden ser importados
_ejemplo.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
https://www.npmjs.com/package/gulp-sass
//Compilar
gulp.task('sass', function ( done ) {
gulp.src('./app/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./app/css'))
});
// Compila y minifica
gulp.task('sass', function ( done ) {
gulp.src('./app/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./app/css'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./app/css/'))
.on('end', done);
});
http://bourbon.io/