Sass intro. Part two
In last lesson we began to learn Sass CSS prerpocessor. Today we’ll consider other Sass capabilities.
Code lesson (_vars.scss)
$font-size: 45px;
$textSizes: 16px 24px 32px 40px;
$fluid: false;
$headingSize: ("small": 16px, "medium": 24px, "large": 30px);
@mixin shadow($x, $y, $blur, $border, $color) {
box-shadow: $x $y $blur $border $color;
}
@mixin fontIcon($icon-name) {
.icon-#{$icon-name} {
color: red;
}
}
@each $size in $textSizes {
.heading-#{$size} {
font-size: $size;
}
}
@each $class, $size in $headingSize {
.header-#{$class} {
font-size: $size;
}
}
@for $i from 1 to 3 {
ul {
li {
&:nth-child(3n + #{$i}) {
color: gray;
}
}
}
}
$k: 1;
@while $k < 7 {
.h-#{$k} {
font-size: 72em / $k;
}
$k: $k + 1;
}
@function setContainerWidth($fluid) {
@if ($fluid) {
@return auto;
} @else {
@return 1200px;
}
}
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;
}
}
@include fontIcon('plus');
@if($fluid) {
.container {
width: auto;
}
} @else {
.container {
width: 1140px;
}
}
.site-container {
width: setContainerWidth($fluid);
}
0 Comments