SASS

Syntactically Awesome Style Sheets

SASS vs LESS

Antes de elegir un preprocesador.

Instalación

Instalando SASS y Compass.

Sintaxis

Ejemplos de sintaxis en SASS.

Variables

$pasto: #5c832f;

.camaleon{
	color: $pasto;
}

Nesting

.canguro{
    .cangurito{
    	overflow: visible;
    }
}

Operadores

$abejas: 1000;
$polen: 100; // por abeja

.miel:after{
    content: "#{$abejas*$polen}";
}

Parciales

_reset.scss:

body{
	margin:0;
	padding:0;
}

estilo.scss

@import "reset";

Extend

.hormiga{
	background: #bd8d46;
}
%alas{
	border-width:1px;
}
.hormiga-voladora{
    @extend .hormiga;
    @extend %alas;
}

Mixines

@mixin icon($position: before, $icon: false) {
	@if $position == both {
		$position: 'before, &:after';
	}
	&:#{$position} {
		@if $icon {
			content: $icon;
			font-family: 'Icons';
		}
	}
	@content;
}
.horse{
	@include icon($position: before, $icon: '\e600');
}

Compass

Un pequeño ejemplo.

@include keyframes(hover){
	0%{
    	@include transform(translate(0, -100px) rotate(-10deg) scale(1));
    }
    50%{
    	@include transform(translate(0, 100px) rotate(10deg) scale(1.4));
    }
    100%{
    	@include transform(translate(0, -100px) rotate(-10deg) scale(1));
    }
}
.elefante{
	@include animation('hover' 5s infinite ease-in-out);
}

config.rb

Archivo de configuración de Compass.

http_path = "./"
css_dir = "../css/"
sass_dir = ""
images_dir = "../images/"
javascripts_dir = "../js/"
fonts_dir = "../fonts/"
output_style = :compressed

Para seguir

Gracias