Введение в Sass
В этом видео мы начнем работать с очень популярным инструментом — css препроцессором Sass. CSS препроцессоры (LESS, Sass, Stylus) позволяют вам писать «динамический css». По сути CSS становится языком программирования (с переменными, циклами, условиями и пр).
В этом уроке мы установим sass в наш node.js проект, рассмотрим использование переменных, вложенности селекторов, родительских селекторов, миксин и пр.
Код урока (_vars.scss)
$font-size: 45px;
@mixin shadow($x, $y, $blur, $border, $color) {
box-shadow: $x $y $blur $border $color;
}Код урока (style.scss)
@import "vars";
body {
$color: #333;
font-size: $font-size;
color: $color;
}
p {
//color: $yellow; error ($yellow is local var)
}
nav {
}
nav ul {
}
nav ul li a {
}
nav {
ul {
li {
display: inline-block;
a {
&:hover {
text-decoration: none;
}
}
}
}
}
nav {
@include shadow(0, 7px, 10px, -4px, rgba(0, 0, 0, 0.4));
}
%alert {
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px 25px;
}
.alert {
@extend %alert;
&-error {
@extend %alert;
margin-top: 10px;
border-color: #ff3840;
}
}
А мне даже нравится что есть некие «огрехи в видео» — приятно слушать живого человека. Спасибо!
Спасибо.