Урок #2 - Синтаксис и переменные

CSS3HTML5

Препроцессор 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 месяца!

CSS3HTML5

Предыдущий Следующий