Урок #2 - Синтаксис и переменные
Препроцессор SASS позволяет создавать переменные. В них можно хранить разного рода информацию и использовать её в качестве значений для CSS свойств. В уроке вы научитесь создавать переменные, а также использовать их в проекте.
Видеоурок
Зачастую на сайтах есть множество значений и свойств, которые неоднократно повторяются, например: цвета, размер шрифта, цвет обводки, цвет текста и многое другое.
Все повторяющиеся свойства можно вынести в отдельные переменные. После чего, прописывать переменные в качестве значений к свойствам CSS.
Пример:
$some_color: red;
$font_size: 16px;
.txt {
font-size: $font_size;
}
.block {
backgroud: $some_color;
font-size: $font_size;
}
.heading {
font-size: $font_size;
}Материалы для курса
Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт
Исходный код
Файл SCSS
// Comment
$bgColor: #000;
$color: #cccccc;
$blockWidht: 300px;
$border: 4px solid red;
* {
padding: 0;
margin: 0;
}
.block:not(.first) {
background: $bgColor;
height: 200px;
border: $border;
width: $blockWidht;
margin-bottom: 20px;
}
.first {
background: $bgColor;
border: $border;
width: $blockWidht;
height: 100px;
margin-bottom: 20px;
}Задание к уроку
Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям
Большое задание по курсу
Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца
