SASS / SCSS

7 уроков
77 заданий
Урок #2 - Синтаксис и переменные

Урок #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 месяца

Также стоит посмотреть

Видеокурс по PHP, MySQL / Создание динамического сайта
Верстка сайта на HTML5 и CSS3
13 уроков
Изучение CSS/CSS3 от нуля до гуру!
15 уроков
Создание адаптивного сайта
4 урока
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Современная вёрстка адаптивного веб-сайта