0Pricing
CSS Academy · Урок

Функции Sass и поток управления

Пишите динамическую логику CSS с помощью встроенных функций Sass и директив @if, @each и @for.

«Функции Sass и поток управления» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Встроенные функции Sass

Sass предоставляет множество встроенных функций для работы с цветом, математических вычислений, операций со строками и других задач. Они выполняются во время компиляции.

<div class="darker">darken($base, 15%)</div>
  <div class="lighter">lighten($base, 15%)</div>
  <div class="faded">transparentize($base, 0.5)</div>
  <div class="mixed">mix($base, white, 60%)</div>

Функции работы с цветом

Основные функции Sass для работы с цветом:

  • darken($color, $amount)
  • lighten($color, $amount)
  • saturate($color, $amount)
  • mix($color1, $color2, $weight)
  • rgba($color, $alpha)
  • color.scale($color, $lightness: 20%)

Пользовательские функции с @function

Определяйте повторно используемые функции, которые возвращают значения, а не правила CSS:

<h2 class="heading">Heading (2rem)</h2>
  <p class="body">Body text (1.125rem)</p>

Управление потоком с помощью @if @else

Условно выводите CSS на основе значений переменных:

<p class="text-large">Large text variant</p>
  <p class="text-small">Small text variant</p>
  <p class="text-default">Default text variant</p>

Цикл @each

Перебирайте список или карту, чтобы создавать несколько правил:

<button class="btn-primary">Primary</button>
  <button class="btn-danger">Danger</button>
  <button class="btn-success">Success</button>

Цикл @for

Создавайте CSS для диапазона значений:

<div class="col-1">col-1 (20%)</div>
  <div class="col-2">col-2 (40%)</div>
  <div class="col-3">col-3 (60%)</div>
  <div class="col-4">col-4 (80%)</div>
  <div class="col-5">col-5 (100%)</div>

Цикл @while

Повторяйте действия, пока условие истинно. Используйте этот цикл умеренно: в большинстве случаев достаточно @each и @for:

<div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>
  <div class="item-4">4</div>

Карты Sass

Карты — это структуры данных Sass, состоящие из пар «ключ — значение»:

<div class="box">Responsive box (resize wider than 768px to see color change)</div>

@error @warn @debug

Sass предоставляет три диагностические функции:

  • @error: останавливает компиляцию и выводит сообщение
  • @warn: записывает предупреждение, не останавливая компиляцию
  • @debug: записывает значение во время разработки

Интерполяция #{...}

Используйте #{$variable}, чтобы вставлять значения переменных в селекторы, имена свойств или медиазапросы:

<p class="element">Interpolated property (#{$property})</p>

Быстрая проверка

В чём разница между Sass @mixin и Sass @function?

Итоги

Встроенные функции работы с цветом в Sass (darken, lighten, mix) позволяют изменять цвета во время компиляции. Пользовательская @function возвращает вычисленное значение. @if/@else добавляет условный вывод. @each перебирает списки и карты. @for перебирает диапазоны чисел. Эти возможности позволяют создавать мощные и соответствующие принципу DRY таблицы стилей с минимальным повторением.

Часто задаваемые вопросы

Урок «Функции Sass и поток управления» бесплатный?

Да — полный текст урока «Функции Sass и поток управления» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Функции Sass и поток управления»?

Пишите динамическую логику CSS с помощью встроенных функций Sass и директив @if, @each и @for. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Функции Sass и поток управления»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Вложенность переменных и частичные файлы
  2. Миксины и включения
  3. Расширение и селекторы-заполнители
  4. Функции Sass и поток управления
← Назад к CSS Academy