Препроцессоры CSS (SASS)

• 1996 - CSS
• 2006 - Sass
• 2009 - Less
• 2010 - Stylus
• 2013 - PostCSS

Популярные препроцессоры

SCSS

Переменные

$width: 1000px;
$bg-color: green;
#main {
	width: $width;
	background-color: $bg-color;
}

#main {
	width: 1000px;
	background-color: green;
}

Вложенности

#main {
	width: 100px;
	p, div {
		color: black;
	}
}

#main {
  width: 100px;
}
#main p, #main div {
	color: black;
}

Расширение селектора

a {
	color: blue;
	&:hover {
		color: green;
	}
}

a {
	color: blue;
}
a:hover {
	color: green;
}

Операции

• + - / %
• > < <= >= == !=

$one: 50px;
$two: 2;
#main {
	padding:{
		top: $one + 200;
		bottom: $one / $two;
		left: $two + px;
		right: 243px - 231px;
	}
	background-color: trans + parent;
}

#main {
	padding-top: 250px;
	padding-bottom: 25px;
	padding-left: 2px;
	padding-right: 12px;
	background-color: transparent;
}

Миксины, примеси: @mixin

• Позволяют сделать блок стилей, который может быть использован повторно в любом месте документа

@mixin my-border($color, $width) {
	border-color: $color;
	border-width: $width;
}
p {
	@include my-border(red, 2px);
}

p {
	border-color: red;
	border-width: 2px;
}