04

SCSS

Нанобиблиотека SCSS

Цель: изучение основ использования препроцессора, синтаксиса и возможностей SCSS; приобретение навыков применения SCSS и его возможностей, компиляции кода в CSS.

Содержание и порядок выполнения лабораторной работы:

  1. Изучить теорию:

    • Объявление переменных и их использование;
    • Вложенные правила (в том числе комбинаторы + >, родительский селектор &);
    • Миксины (@mixin и @include);
    • Partials;
    • Директивы:
      • @use / @forward;
      • @extend;
    • Числовые операторы;
    • Встроенные модули:
      • color;
      • map.

  2. Принять задание по ссылке https://classroom.github.com/a/N4TkYD4c. Клонировать репозиторий и приступить к работе по заданию. Разработка по этой лабораторной работе должна вестись в отдельной ветке.

  3. Создать проект “нанобиблиотеки” для стилизации html элементов используя scss.

  4. Сформировать частичный файл для цветовой палитры. Цвета можно взять здесь - https://coolors.co/palettes/trending. Цвета организуйте в map, чтобы в других файлах их переиспользовать и напишите функцию, которая бы сразу по ключу возвращала значение из map. Также к цветах создайте примесь (mixin) gradient, который в качестве параметров принимает два цвета и создает линейный градиент. Этот миксин используйте для кнопок далее.

  5. Сформировать частичный файл для типографики. Шрифты можете взять любые с https://fonts.google.com/. Возьмите один шрифт с засечками, второй - без. Для шрифтов создайте примесь (mixin) font-face, который в качестве параметров принимает $family, $weight, $style, $file-path и упрощает работу с 3-м пунктом из https://gwfh.mranftl.com/fonts/roboto.

  6. Сформировать частичный файл для grid-разметки. Должен быть класс для контейнера на 12 колонок и 12 классов, которые позволяют указать сколько полос займет элемент с этим классом (.col-1 - .col-12) эти классы должны быть созданы через циклы.

  7. Сформировать частичный файл для группирующих элементов header, main, section, footer, nav чтобы для них скорректировать margin и padding.

  8. Сформировать частичный файл для оставшихся элементов h1, h2, h3, h4, p, a, img, button, ol, ul, li. Заголовки и основной текст должны иметь разные шрифты (одни с засечками, тогда другие без или наоборот). Размеры заголовков должны быть пропорциональны (h1 самый крупный, остальные меньше по убывающей). Изображение имеет max-width: 100%. Ссылки и кнопки стилизованы во всех своих состояниях за счет изменения цвета с помощью модуля color и c использованием вложенности в scss.

  9. Сформировать частичный файл для вспомогательных классов из прошлого семестра: .visually-hidden и .wrapper.

  10. Добавить все частичные файлы в style.scss.

  11. Скомпилировать один файл style.css и поместите его в корень репозитория.

  12. Заполнить readme.md кратким описанием.

  13. Создать демо страницу из стилизованных тегов и продемонстрируйте работы grig-сетки.

Примеры

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге проверенная, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

  1. https://sass-lang.com/
  2. https://sass-scss.ru/
  3. https://sass-guidelin.es/ru/
  4. Препроцессор Sass. Полное руководство и зачем он нужен
  5. Примеры структуры проекта eng

Вопросы для защиты

  1. Что такое SCSS и чем он отличается от обычного CSS?
  2. Каково назначение миксина в SCSS, как его определить и использовать?
  3. Что такое методология BEM и как она работает в SCSS?
  4. Что такое функция в SCSS, как ее определить и использовать?
  5. В чем разница между @extend и @include в SCSS, и когда вы будете использовать каждый из них?
  6. Как использовать циклы в SCSS, и какие примеры можно привести, когда их можно использовать?
  7. Как можно вложить стили в SCSS?
  8. Как объявить и использовать переменную в SCSS?
  9. Назовите встроенные модули в SCSS и примеры использования?
  10. Как можно протестировать код SCSS, чтобы убедиться, что он работает правильно?
Предыдущая Следующая