Sass intro
In this video we will begin to work with popular frontend tool – Sass css preprocessor. CSS preprocessors let you write “dynamic css”. In fact CSS become programming language (with variables, loops, conditions etc).
In this video we’ll install sass to our node.js project, consider using of vars, nesting, parent selectors, mixins etc.
Code lesson (_vars.scss)
$font-size: 45px;
@mixin shadow($x, $y, $blur, $border, $color) {
box-shadow: $x $y $blur $border $color;
}Code lesson (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;
}
}
0 Comments