Главная

» » Легкое погружение в Sass и Compass.

Легкое погружение в Sass и Compass.

Легкое погружение в Sass и Compass.


Sass – это css препроцессор, развязывающий вам руки в работе с css. Он позволяет вам писать масштабируемый и легко поддерживаемый css, а так же привносит много полезных фишек, таких как: переменные, функции, вложенность, наследование и многое другое. Compass – это css фреймворк, добавляющий еще больше жирного соуса к удобной работе с вашими css файлами.




В этом видеокасте мы научимся устанавливать Sass и Compass. Разберемся с переменными, встроенными в Sass функциями, а также с вложенностью и наследованием.

Все подробности в видео, а вот итоговый код:
@import "compass/reset";


$color: red;
$link_color: #d2d2d2;
$btn_color: #f4dd29;

h1 {
	color: $color;
}


ul {
	font-size: 14px;
	a {
		color: $link_color;
		&:hover {
			color: blue;
		}
	}

	div & + a {
		color: orange;
	}

}


.btn {
	border-radius: 5px;
	color: $btn_color;
	border: 1px darken($btn_color, 25%) solid;
	background-color: transparentize($btn_color, 0.9) ;
}

.warning {
	@extend .btn;
	color: green;
	background-color: transparentize(green, 0.9) ;
}

.success {
	@extend .btn;
	color: red;
	background-color: transparentize(red, 0.9) ;
}


Источник:
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.