DevGang
Авторизоваться

Руководство для начинающих по Sass

В последние годы CSS превратился из написания простых наборов правил в мощный движок для создания прекрасного пользовательского опыта. Но по мере того, как проекты усложняются, как и CSS, который пишется, становится все труднее управлять и еще сложнее вносить изменения. В нативном CSS реализованы некоторые новые инструменты, такие как Grid и переменные, но препроцессоры CSS поднимают написание и управление CSS на следующий уровень.

Помимо написания гибких, повторно используемых наборов правил, препроцессоры CSS, такие как Sass, привносят мощную программную логику в CSS. Это верно - используя Sass, вы можете выполнять арифметические операции, писать функции ( @mixins ) и даже использовать управляющие структуры, такие как операторы if / else и циклы. В этой статье мы рассмотрим все способы написания программируемой логики в CSS. Синтаксис используется SCSS.

СОВЕТ: Если вы никогда ранее не использовали SCSS, я рекомендую ознакомиться с этим руководством, чтобы начать. Но не волнуйтесь! Если вы просто хотите увидеть , что SCSS может предложить, насколько логическая программа идет, вы можете сделать это в CodePen.io

Низко висящий фрукт: арифметические операторы

Самый простой способ начать программирование в SCSS - это заняться математикой. Вы можете выполнить пять арифметических операций:

  1. Дополнение с +
  2. Вычитание с -
  3. Умножение с *
  4. Отдел с /
  5. Получить остаток с %

Это позволяет использовать математику для определения размера шрифта или даже создавать приятные градиенты в стилях. Вот пример:

 $scale: 1.5;
    $heading-base: 65px;

    h1 {
      font-size: $heading-base;
    }

    h2 {
      font-size: $heading-base / $scale;
    }

Благодаря простому делителю размеры шрифта вашего заголовка теперь масштабируются относительно друг друга. А позже вы увидите, как сделать это еще лучше.

Стоит отметить, что если вы можете использовать эти операторы только на аналогичных устройствах. Таким образом, вы не можете умножить px и em например. Вы можете использовать операторы на шестнадцатеричных цветах, чтобы сделать несколько интересных цветов! Как правило, я стараюсь использовать только цифры без единиц для математики в SCSS, когда могу.

Но использование математики в CSS - это только начало. Давайте посмотрим на еще более мощные функции программирования SCSS.

@mixins: функции SCSS

Повторяемый код является важным аспектом любого языка программирования, и SCSS ничем не отличается. Используя @mixin , вы можете создать набор кода, который можно использовать повторно. Вот простой пример:

@mixin button() {
        background: #880000;
        color: #FFFFFF;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
}

a.button {
  @include button;
}

В этом миксине у нас есть набор общих правил для всех кнопок. Затем, когда мы объявляем что-то, что должно иметь эти правила, мы можем использовать директиву @include для импорта этого набора правил.Но все становится лучше. Вы также можете передавать переменные в mixins. Допустим, например, что вы хотите контролировать цвет кнопки:  

@mixin button($color) {
        background: $color;
        color: #FFFFFF;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
}

a.button {
  @include button(#008800);
}

Наконец, если вы хотите изменить цвет по умолчанию, вы можете установить дополнительную переменную:

@mixin button($color: #880000) {...}

Тогда, если вы отправите цвет, это используется. А если нет, используется значение #880000 по умолчанию .

Вы можете себе представить, что это достаточно мощный инструмент для определения, управления и изменения набора общих стилей. Если общий стиль для всех кнопок когда-либо изменится, вам нужно всего лишь изменить его в @mixin .

Благодаря возможности обобщать код и делать его повторяемым, есть еще одна вещь, которую вы можете добавить в свой набор инструментов: принятие решений.

Управление потоком: использование операторов if для вашего CSS

Некоторые утверждают, что программирование в значительной степени принимает конкретные решения на основе определенных условий. И хотя я оставлю философские обсуждения для другой статьи, это правда, что принятие решений открывает много возможностей в коде для управления потоком программы.

В SCSS речь идет не столько о реагировании на взаимодействия в реальном времени (для этого нужны медиа-запросы), а о возможности консолидировать и лучше управлять большими блоками наборов правил. Давайте посмотрим на пример:

@mixin shape($w, $h, $circle: false) {
        width: $w;
        height: $h;
        background: #FF0000;
        @if $circle {
                border-radius: 50%;
        }
}

.square {
  @include shape(100px, 100px);
}

.circle {
  @include shape(100px, 100px, true);
}

В этом миксине мы создаем общую фигуру (ну, в действительности, квадрат), но благодаря этому @if мы можем использовать тот же самый миксин для создания круга. В более практичном примере, который используется  для @else , у вас может быть миксин для управления базовыми стилями для «темного режима»:  

@mixin theme-styles($dark-mode: false) {
 @if $dark-mode {
    //Set styles based on dark mode variables
  } @else {
    //Set styles based on light mode variables
  }       
}

Таким образом, математика позволяет нам делать более точные вычисления для наших измерений, миксины позволяют нам обобщать наборы правил, чтобы сделать их более простыми для управления с высокого уровня, а операторы if/else позволяют нам сделать это управление еще одним шагом вперед, условно добавляя наборы правил и свойства по мере необходимости.

Но, возможно, самая большая экономия времени в логике программы SCSS - это циклы.

Повторение: создайте красивые стили с помощью циклов

Циклы позволяют вам повторять задачу, пока выполняется некоторое условие. В SCSS есть три типа циклов:

  1. @for
  2. @while
  3. @each

Цикл for

Цикл @for представляет собой простой цикл подсчета. Вы можете выполнить задачу определенное количество раз. Отличным примером этого является легкое создание масштабированных размеров заголовков, которые мы рассматривали ранее:

$heading-size: 65px;

@for $i from 1 through 6 {
        h#{$i} {
                font-size: $base-size;
        }

        $heading-size: $heading-size / 1.25;
}

Здесь у нас есть переменная, которую мы определили как $i (обычно используемая в циклах; вы можете думать о ней как об «индексе» или «интеграторе»), которая начинается с 1 и увеличивается до 6. Тогда у нас есть немного умного синтаксиса в SCSS, который позволяет нам использовать имена переменных в селекторах. Сначала мы используем знак хеша ( # ), чтобы указать, что мы начинаем имя переменной, затем заключаем переменную в фигурные скобки ( { } ).

Итак, здесь мы используем, $i чтобы определить каждый из 6 тегов заголовка. Затем мы устанавливаем размер шрифта на основе $heading-size переменной. В конце цикла мы делим эту переменную на 1,25 , уменьшаем ее, а затем делаем то же самое для следующего тега заголовка. Таким образом, отрендеренный CSS выглядит так:

h1 { font-size: 65px; }
h2 { font-size: 52px; }
h3 { font-size: 41.6px; }
h4 { font-size: 33.28px; }
h5 { font-size: 26.624px; }
h6 { font-size: 21.2992px; }

Хорошие, математически масштабированные размеры заголовков!

Цикл while

Циклы @while похожи, но мы не отнесены ни к одному инкрементору. Мы можем сделать что-то вроде создания масштабированного градиента, основываясь на некотором множителе:

$gradient: 1;
$i: 1;
@while $gradient >= 0.1 {
        main p:nth-child(#{$i}) {
                background: rgba(0,0,240, $gradient);
                min-height: 20px;
                margin: 0;
        }

        $gradient: $gradient - 0.1;
        $i: $i + 1;
}

В этом примере мы нацеливаемся p на  элемент main и снижаем голубой градиент для каждого дочернего элемента.  . У нас есть 2 счетчика: тот $gradient , который контролирует непрозрачность, и $i , который рассчитывает на nth-child .  

Это также можно использовать для создания набора классов градиента или создания приятного визуального эффекта для длинного контента.

Цикл each

Возможно, самый интересный цикл в SCSS - это @each цикл. Это позволит вам пройтись по спискам переменных (версия массивов SCSS). Вы можете сделать некоторые изящные вещи с правильной комбинацией информации. Допустим, вы хотите серию предупреждений. Вы можете просмотреть массив цветов следующим образом:

$alerts: red, blue, green, yellow;

@each $alert in $alerts {
        .alert-#{$alert} {
                background: $alert;
                color: #FFFFFF;
                padding: 10px;
                text-align: center;
        }
}

Это говорит, что для каждой записи в $alerts списке, создайте класс с именем записи и установите запись в качестве цвета фона.

Вы можете сделать этот шаг еще дальше с помощью пар карт – key → value в списках. Если вы хотите больше описательных имен, вы можете сделать это:

$alerts: ("error" : red,
    "neutral" : blue,
    "good" : green,
    "warning" : yellow
);

@each $name, $color in $alerts {
        .alert-#{$name} {
                background: $color;
                color: #FFFFFF;
                padding: 10px;
                text-align: center;
        }
}

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

Идите вперед и программируйте CSS!

С этим вы готовы начать кодировать свой собственный SCSS. Теперь у вас есть синтаксис, необходимый для выполнения математических операций if и циклов для ваших стилей. Для чего вы собираетесь использовать эту вновь обретенную силу? Дайте нам знать об этом в комментариях!

Ваш интерфейс загружает процессор ваших пользователей?

Поскольку веб-интерфейсы становятся все более сложными, жадные до ресурсов функции все больше требуют от браузера. Если вы заинтересованы в мониторинге и отслеживании использования ЦП на стороне клиента, использования памяти и многого другого для всех ваших пользователей, попробуйте LogRocket.

LogRocket похож на видеорегистратор для веб-приложений, записывая все, что происходит в вашем веб-приложении или на сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и сообщать о ключевых показателях производительности внешнего интерфейса, воспроизводить сеансы пользователей вместе с состоянием приложения, регистрировать сетевые запросы и автоматически отображать все ошибки.  

Источник:

#CSS #Sass
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать

В этом месте могла бы быть ваша реклама

Разместить рекламу