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 місяця

Також варто подивитися