itProger Видеокурсы Изучение препроцессора SASS / SCSS Урок #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;
}

Материалы для курса

sass-lesson-2.zip

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Файл 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 месяца

CSS3

HTML5