SASS: Условия, циклы и @content — практическое руководство

Условный оператор @if

Оператор @if позволяет проверять условия и выполнять код в зависимости от результата. Пример миксина, задающего ширину блоков в зависимости от количества колонок ($cols):

@mixin block-width($cols) {
  @if $cols >= 5 {
    width: 100%;
    margin-right: 0;
  } @else {
    // Расчет ширины по формуле
  }
}

В условии используются операторы сравнения: >=, <=, ==, !=, >, <. Если $cols >= 5, блоки занимают всю ширину экрана (width: 100%; margin-right: 0;). В противном случае выполняется код из блока @else, где ширина рассчитывается по формуле с учетом margin-right.

Циклы в SASS

Оператор @for используется для создания циклов в SASS. Хотя существуют также @while и @each, @for применяется чаще.

Пример использования @for для генерации классов с разной шириной и высотой:

@for $i from 24 through 29 {
  .sam-class-#{$i} {
    width: 50px + $i;
    height: 50px + $i;
  }
}

Этот код создает классы sam-class-24, sam-class-25 и т.д. с шириной и высотой, зависящими от значения переменной $i. Цикл выполняется от 24 (включительно) до 29 (включительно). Внутри цикла можно выполнять любые математические операции с переменной цикла.

Оператор @content

Оператор @content расширяет возможности миксинов, позволяя добавлять дополнительные свойства. Пример миксина для стилизации ссылок:

@mixin link {
  a {
    color: blue;
    &:hover {
      color: darkblue;
    }
    &:active {
      color: red;
    }
  }
  @content;
}

Базовые стили для ссылок определены внутри миксина. @content позволяет добавлять дополнительные стили после вызова миксина:

#header {
  @include link {
    background-color: #000;
    a:visited {
      color: #faa;
    }
  }
}

Дополнительные стили, прописанные в фигурных скобках после вызова миксина с @content, добавляются к стилям, определенным внутри миксина. Это создает гибкие и расширяемые миксины.

Изучение условных операторов, циклов и оператора @content значительно расширяет возможности SASS, позволяя создавать более эффективный и поддерживаемый CSS-код.