Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 При создании сложного SASS-файла неизбежно возникают различные типы значений: числа, строки и некоторые другие. В этом уроке мы рассмотрим базовые простые типы данных, с которых удобнее всего начинать свою работу с SASS.

2 К простым типам данных относятся:

3 <ol><li>Числа</li>

4 <li>Строки</li>

5 <li>Булевый тип</li>

6 </ol>Числа можно назвать одним из самых простых типов данных в SASS. Мы их встречали постоянно на протяжении прошлого курса по SASS. Число в препроцессоре состоит из самого значения и единицы измерения.

7 Взглянем на простой пример:

8 В переменную $number мы положили числовой тип данных.30является непосредственно значением, аpxявляются единицей измерения. Единицы измерения может и не быть, тогда от числа останется только значение. Это помогает при работе с арифметическими операциями.

9 Какие арифметические операции доступны с числами в SASS? Точно такие же, как и в реальной жизни. Мы можем складывать, вычитать, умножать, делить числа, а также брать остаток от деления. Если у вас есть опыт работы с любым языком программирования, то эти простейшие операции не вызовут у вас затруднений.

10 Применим основные операции в SASS. Для этого советую воспользоваться интерактивным режимом, который доступен в консоли после установки SASS в вашу систему. Подробнее об этом вы можете почитать в уроке, посвященном<a>установке SASS</a>.

11 Остановимся на умножении отдельно. Вы можете заметить, что в результате выполнения операции 10px * 10px вместо 100px мы получили невнятные 100px*px. Такое значение точно не понравится CSS, потому что единиц измерения px*px (или пиксель в квадрате) в стандарте не существует. Но может компилятор SASS сам поймет, что мы хотели и переведет это в просто пиксели. Проверим это, создав небольшой кусок SASS кода.

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

13 Компилятор нам сообщает, что такое значение "невалидно" для CSS и прервет компиляцию. Что же это значит? На самом деле компилятор работает по простым правилам математики из реальной жизни. То есть перемножаются и значение и единица измерения. Умножив 10 метров на 10 метров мы получим 100 квадратных метров. Значит или одно из чисел не должно иметь единицу измерения, или единица измерения поставится позже. С этим мы познакомимся при работе со строками.

14 <h2>Булевый тип</h2>

15 В математике и программировании булевым типом называется такой тип данных, который может иметь только одно из двух значений: правда или ложь. В SASS эти значения так и записываются: true и false.

16 Зачем же нам иметь такой минимальный тип данных, который ни посчитать нельзя, ни арифметических операций с ним произвести невозможно? На самом деле булевый тип широко распространен и часто используется при создании условных конструкций. С ними мы познакомимся в одном из следующих уроков. А пока нужно просто держать в голове то, что существует такой магический булевый тип данных со всего двумя возможными значениями.

17 <h2>Строки</h2>

18 Строки - одна из центральных тем в SASS. С их помощью мы можем передавать аргументы в функции и миксины, генерировать уникальные классы для нашего проекта. По умолчанию SASS все считает строкой.

19 Для того, чтобы создать строку, используются одинарные ' ' или двойные " " кавычки. Вы можете выбирать это на свой вкус. Самое главное - закрывающая кавычка должна быть такого же типа, что и открывающая.

20 Если же мы используем разный тип кавычек, то интерпретатор запутается и, в конечном итоге, начнет на нас ругаться.

21 По ходу написания собственного SASS-кода старайтесь придерживаться одного типа кавычек. Такое единообразие облегчит чтение кода и может предотвратить некоторые ошибки.

22 Строки в SASS мы можем складывать. Это помогает получить из нескольких разных строк одну единую. Такой процесс называетсяконкатенацией. Берутся две и более строки или строковые переменные и при помощи оператора + получается новая строка.

23 Помимо процессаконкатенацииесть родственный ему процесс, который называетсяинтерполяцией. В этом случае мы можем не просто добавить подстроку в строку, но и выполнить в этом процессе некоторое выражение. Например, подставить результат выполнения функции. В SASS это работает следующим образом: мы можем внутри любой строки указать конструкцию #{}, внутри которой возможно подставить значение любой переменной или даже целую функцию. Результат будет выведен внутри строки.

24 Пример выше при использованииинтерполяциибудет выглядеть следующим образом:

25 Такой процесс работы со строками более предпочтительный. Во-первых, мы изначально видим, что у нас строка. Во-вторых, такой способ избавляет нас от написания арифметических операций, что позволяет быстрее понимать процесс того, что происходит в коде.

26 Отличным примером использованияинтерполяцииявляется создание миксина, в котором имя класса или его часть передается в качестве аргумента миксина:

27 Здесь создается миксин, принимающий в качестве аргумента имя иконки. Это имя с помощьюинтерполяцииподставляется в имя класса и в путь к иконке. Теперь возможно просто подключать этот миксин с нужными значениями и класс сгенерируется автоматически.

28 Также обратите внимание на запись width: #{$size}px;. В данном случае мы не указываем кавычки, так как значение свойства width должно указываться без них. Так как SASS все интерпретирует как строки, то такая запись даст нам ожидаемый результат.

29 <h2>Проверка типа</h2>

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

31 Чтобы узнать тип данных в переменной, используется функция type-of. Вы можете в любом месте своегоSASSфайла указать конструкцию @debug type-of(имя переменной) и при компиляции через терминал вам будет выведен тип переменной.

32 <h2>Дополнительные материалы</h2>

33 <ul><li><a>Использование интерполяции внутри функций CSS</a></li>

34 </ul>