SASS 101
Prepocesador
En el vas a poder tener orden de tu CSS, automatizar trabajo, escalabilidad del proyecto y ahorro de tiempo.
Usado en
Sintaxis
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
Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
Partials
Nos van a servir para declarar todos los archivos que pueden ser importados
_ejemplo.scss
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
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
Operators
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
Mayor control y
calidad de codigo
Compilar y minificar
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/
Gracias!!
SASS 101
By Nicolas Molina
SASS 101
Introduccion a SASS
- 1,610