Что такое calc () в CSS (и как его использовать)

Некоторые функции CSS являются мощными, но редко используются не потому, что они трудны, а потому, что доступны более простые альтернативы. Calc () - один из них. Это очень полезно, но часто омрачено зажимом ().

Calc () решает некоторые задачи макета, которые Clamp () не может коснуться. Он отлично подходит для точных высот секции, настраивая липкие заголовки и смешивание гибких и фиксированных единиц в одной строке кода. И вот хорошие новости: вы можете использовать Calc (), не написав ни одной строки кода.

В Divi 5 он встроен прямо в интерфейс, поэтому просто введите свое значение, а Divi обрабатывает остальное. Хотите увидеть, как? В этом посте вы узнаете, как работает Calc (), где он помогает, и как использовать его внутри Divi 5.

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

Что такое calc () в CSS?

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

Давайте поймем это с примером. Предположим, вы хотите, чтобы элемент занял 80% экрана, но все же оставляет место для прокладки. Вы можете написать:

width: calc(80% - 40px);

Это сообщает браузеру динамически расчет ширины, вычитая 40 пикселей из 80 процентов его контейнера. В сочетании с методами центрирования, такими как автоматическая маржа, оставшееся пространство от вычитания распределяется равномерно. Значение регулирует автоматически на основе размера экрана.

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

• Подкладка: Calc (5VW + 20px); сохраняет жидкость. Даже на маленьких экранах он никогда не падает ниже 20 пикселей.
• Высота: Calc (100vh - 80px); Содержит контент видимым, когда у вас есть фиксированный заголовок. Он регулируется автоматически на основе высоты экрана.
• Ширина: Calc (60% - 1Rem); дает вам гибкий контроль над шириной секции при сохранении последовательного расстояния. Вы можете отрегулировать окружающую маржу, используя такие значения, как левые поля: Calc (40% + 0,5Rem); Визуально центрировать или выровнять элемент в его контейнере.

Короче говоря, Calc () Удаляет необходимость писать дополнительные CSS для каждой точки останова. Вместо того, чтобы переписать стили многократно, вы можете встроить логику непосредственно в свои значения и позволить макету отвечать автоматически. Вы не только определяете размеры, но и решаете, как должны вести себя элементы.

Понимание того, как работает calc ()

Основной синтаксис calc () выглядит так:

 calc(value operator value) 

Здесь вы можете использовать любую допустимую длину или единицу значения, а оператор может быть +, -, *или /.

Например, если вы хотите уменьшить ширину элемента на 40 пикселей, вы бы написали ширину: Calc (100% - 40px);. Обратите внимание на использование %? Вот что делает ширину гибкой.

Если бы мы использовали Calc (100px - 40px), результат всегда будет 60 пикселей, то есть статично. Но, используя процент, мы позволяем браузеру рассчитать размер на основе экрана или родительского элемента. Он регулируется автоматически по мере изменения макета.

Быстрый совет (а также общее правило): всегда добавляйте пробелы между значениями и операторами, чтобы сделать должным образом CALC (). Без пространств CSS не будет работать. Ниже вы увидите, что ширина контейнера восстанавливается по умолчанию, так как функция calc () без пробелов больше не действительна:

Используя несколько единиц

Вы только что видели, как наступает реальная выгода от Calc (), когда вы начинаете объединять различные относительные единицы. Например, проценты с пикселями или шириной просмотра с REMS, потому что именно тогда ваш макет начинает реагировать на основе изменений размера экрана.

Чтобы прояснить это, вот несколько полезных комбо, чтобы попытаться увидеть, как они работают в реальных макетах.

Вы также можете объединить несколько значений и единиц в одной линии, что делает размеры отзывчивых макетов более точными. В этом примере ниже используются %, px и rem для смешивания массивы макета, фиксированного расстояния и типографии:

 width: calc(50% - 40px + 1rem); 

• 50% масштаб с контейнером
• 40px вычитает фиксированное пространство, как боковая панель
• 1Rem добавляет интервал на основе размера шрифта

Функции гнездования Calc ()

Вы также можете гнетать один калькулятор () внутри другого, чтобы построить более сложную логику макета. Это отличный способ отразить то, как вы думаете о дизайне (слой по слону) с четкими отношениями между ценностями. Например, ширина: Calc (200px - Calc (100px + 2Rem));

Здесь браузер сначала вычисляет 100px + 2Rem , который может представлять прокладку, поля или размер другого элемента. Затем он вычитает это от 200 пикселей, чтобы получить окончательную ширину. Ширина остается относительной из -за rem.

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

Вам не понадобится вложенный Calc () часто, но это может помочь при работе с слоистыми расстояниями или перекрывающимися элементами. Тем не менее, вы можете сначала начать с простых расчетов, так как они могут ошеломлять. Добавление сложности будет чувствовать себя естественным, как только вы почувствуете себя комфортно с тем, как она работает.

Зачем использовать CALC (), когда у вас есть Clamp ()?

Если вы используете Clamp () чаще, у вас может быть этот вопрос. Чтобы получить четкий ответ, было бы неплохо понять разницу между ними:

Clamp () современен, поэтому взволнован использованием его для создания жидкости, не полагаясь на запросы на медиа, легко. Но хотя Clamp () кажется умнее, есть много ситуаций, когда Calc () более актуальна, например, следующее:

• Вычитание фиксированных значений из гибких макетов: Использование высоты: CALC (100VH - 80PX) гарантирует, что раздел заполняет экран за вычетом высоты фиксированного заголовка, поэтому элементы не перекрываются. Clamp () не может сделать это, потому что он не поддерживает вычитание.
• Элементы смещения с точностью: значение, такое как маржинево-левое: Calc (50%-200px); Сдвигает элемент относительно своего контейнера, сохраняя его визуально сбалансированным. Clamp () не может выполнить этот вид реляционного позиционирования.
• Выравнивание бок о бок по бок с разделами: помогает вам создавать отзывчивые макеты с двумя столбцами, где один столбец с шириной: Calc (60%-2Rem); занимает 60% пространства за вычетом постоянного разрыва. Clamp () идеально подходит для масштабирования одного значения, в то время как Calc () превосходит, когда необходимы отношения между несколькими значениями.

В целом, Clamp () великолепен при определении того, как одно значение должно масштабироваться по размерам экрана. Но Calc () - это то, что вам нужно, когда ваш макет зависит от нескольких сразу, как в приведенных выше случаях.

Объединение calc () + clamp ()

В то время как Calc () и Clamp () являются мощными сами по себе, зачем использовать один, когда вы можете объединить оба? Вы можете гнездовать Calc () Inside Clamp () для создания жидкости со встроенной логикой, например, объединение гибкого масштабирования с точным управлением.

Например, прокладка: зажим (1Rem, calc (2VW + 10px), 3Rem); Создает интервал, который масштабируется от 11 до 3REM, но «предпочтительное» значение основано на формуле Calc (), которая смешивает ширину просмотра и фиксированное значение.

Это дает вам отзывчивый, логичный и точный контроль над вашим дизайном. После того, как вы узнаете, когда использовать calc () и clamp () индивидуально, а когда их объединить, вы можете полностью контролировать свою макет, не полагаясь на пользовательские точки останова

Использование переменных CSS с calc ()

Вы также можете расширить гибкость Calc () с помощью переменных CSS. Объедините переменные с другими подразделениями, делайте математику и создайте логику макета вокруг значений многократного использования. Например, если вы определите: root {–gap: 40px;}, то используя накладку: calc (var (–gap) + 1Rem); Помогает вам установить адаптивную прокладку на основе ваших корневых значений.

ПРИМЕЧАНИЕ. При использовании переменных CSS внутри calc () оберните переменную вокруг var (). Посмотрите, как я сделал выше.

Это позволяет вам создавать полный веб -сайт, используя постоянную систему проектирования (ваши переменные CSS), в то же время имея точное управление с Calc (). И если вы хотите внести (глобальные) изменения, такие как настройка расстояния через свой макет, вы можете сделать это, изменив корневые значения.

Это не так легко с зажимом (). В то время как Clamp () поддерживает переменные CSS, каждое значение должно решить до полного действительного устройства. Что я имею в виду под этим?

Функция, такая как зажим (1Rem, var (–fluid-размер), 3Rem), работает только в том случае, если –fluid-размер решает что-то вроде 4VW. И если вам нужно сделать математику с переменной, такой как добавление или вычитание из нее, вам необходимо обернуть эту часть в calc (). Эти незначительные вещи делают Calc () необходимым при создании динамических значений с переменными.

Calc () в Divi 5

Как Calc (), так и Clamp () являются продвинутыми функциями CSS, которые дают вам мощный контроль над макетами, интервалом и отзывчивостью, но только если вам удобно писать код. Это ограничивает их использование для разработчиков или веб -специалистов. Но как насчет тех, кто предпочитает визуальные рабочие процессы и все еще хочет использовать Calc () и Clamp () в своих проектах? Вы можете это сделать?

Да, вы можете. Inside Divi 5, как Calc (), так и Clamp () доступны в виде расширенных единиц, и вам не нужно писать ни одной строки кода для работы с ними.

Подписаться на наш канал на YouTube

Все, что вы делаете, это вводите Calc () непосредственно в любое числовое поле ввода, и все.

Divi Builder действует мгновенно. После того, как вы введете значение calc (), вы получаете обратную связь при проектировании. Нет необходимости переключаться между строителем, Devtools или превью, и не догадаться, как это будет выглядеть.

Divi 5 делает строительство более умным и более гибким конструкциями простыми без каприката кода. Вы даже можете объединить Calc () с переменными дизайна Divi или своими собственными переменными CSS для создания многоразовых динамических макетов. Я покажу вам, как это сделать в следующем разделе.

Кстати, знаете ли вы, что Divi 5 также поддерживает все функции CSS в продвинутых подразделениях? Вы также захотите узнать о них

Узнайте все о передовых подразделениях Divi 5

Как Divi 5 делает использование calc () без усилий

Вы только что видели, что Divi 5 делает использование Calc () в ваших проектах без усилий, давая вам мгновенный предварительный просмотр во время работы. Но есть еще. Divi дает не только обходной путь, но и полностью интегрированный, бесконечный способ создания отзывчивых, на основе логических макетов, используя те же инструменты, на которые полагаются разработчики, без написания линии кода.

Вот как это поможет вам использовать Calc () героически, когда тихо работал в тени:

1. Примените Calc () к любому числовому полю

То, что вы не кодируете, не означает, что вы ограничены. В Divi 5, Calc () работает в любом месте, принимается числовое значение (подумайте: ширина, высота, заполнение, маржа, разрыв, размер шрифта, в любом месте). Если поле принимает число, оно поддерживает Calc ().

И применение calc () относительно просто. Все, что вам нужно сделать, это выбрать Calc () из других продвинутых единиц и ввести свою формулу.

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

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

2. Получите превью Instrant Live

Одна из лучших частей об использовании Calc () в Divi 5 - это то, что вы можете увидеть, что вы делаете в режиме реального времени. Вам не нужно догадаться, как будет выглядеть расстояние или выравнивание. Когда вы вводите формулу calc (), строитель мгновенно обновляется.

Как видите, заполнение сразу же изменилась, когда я вводил значения calc (). Я также переключился между различными точками останова, чтобы показать вам, как корректируется накладка на основе размера экрана.

Какие бы изменения вы вносили, вы увидите результат при печати. Эта немедленная обратная связь помогает вам понять, как расчет влияет на ваш макет, и позволяет быстро настраивать значения без переключения вкладок.

3. Создайте расширенные рабочие процессы с помощью CALC ()

Использование calc () в Divi 5 не мощно, потому что теперь вы можете добавить или вычитать значения. Настоящая сила заключается в разблокировке умных рабочих процессов. Divi позволяет комбинировать Calc () с расширенными инструментами, такими как Clamp (), переменные CSS, переменные проектирования и пресеты групп опционных, все внутри визуального строителя.

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

1. Распространение calc () с переменными CSS

Divi 5 поддерживает переменные CSS непосредственно внутри поля проектирования, что означает, что вы можете определить значения многоразового использования и рассчитать из них визуально. Допустим, я хочу использовать фиксированную прокладку во всех разделах моих страниц, поэтому я сохраняю ее как переменную CSS:

:root {
--section-padding: calc(4rem + 2vw);
}

Для этого я перейду в настройки страницы> Advanced> Пользовательские CSS и добавлю здесь свои корневые значения:

Теперь, вместо того, чтобы входить в полную формулу повсюду, вы можете просто использовать VAR (–mecection) в любом поле набивки внутри Divi. Обновления результатов вживую, и если я буду изменять корневое значение позже, весь макет мгновенно отражает это изменение.

Обратите внимание, что обновленная передовая единица показывает CALC VAR, что означает, что переменная CSS была вставлена ​​с использованием функции var () внутри формулы CALC ().

Использование переменных CSS в Divi на удивление просто. Вы можете просто определить их на самой странице, не касаясь своей таблицы стилей. Это помогает поддерживать постоянную структуру проектирования, проверить новые значения и создавать отзывчивые правила макета.

2. Используйте CALC () в вашей структуре проектирования

Divi 5 позволяет сохранять значения calc () в качестве переменных дизайна, что позволяет легко использовать одну логику макета на всем вашем веб -сайте. Допустим, вы хотите, чтобы ваши сервисные разделы всегда заполняли экран за вычетом высоты фиксированного заголовка. Затем вы можете создать числовую переменную и назвать ее раздела высоты со значением Calc (120VH - 30px).

Здесь 30px - это высота фиксированного заголовка.

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

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

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

3. Создание и сохранение предварительных настроек групп опций

Как только ваш макет использует значения calc () последовательно, Divi 5 облегчает сохранение этой логики для повторного использования. Вы можете сохранить всю настройку стиля (или индивидуальные настройки, такие как прокладки, пробелы, поля и ширину) в качестве предустановки опционных групп. Это означает, что вместо неоднократно применения формул Calc () вы просто выбираете предустановку, и математика макета применяется мгновенно.

Например, если вы использовали накладку: Calc (4Rem + 2VW) в нескольких разделах, вам не нужно перецироваться везде. Просто сохраните его как предустановку:

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

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

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

Это Power Divi 5 приносит. Это помогает вам масштабировать вашу систему проектирования, сохраняя при этом постоянную логику макета последовательной по всему сайту. После того, как вы привыкаете объединять передовые единицы, такие как Calc () (см. Здесь больше вариантов использования Calc () с советами по эффективному их освоению) с помощью модульной системы проектирования Divi, вы разблокируете эффективный и интересный способ создания веб -сайтов.

Divi делает математику чувствовать себя легкой

Вам не нужно быть разработчиком, чтобы использовать функции CSS, такие как Calc () и Clamp (). Divi 5 привносит эти расширенные инструменты в визуальный интерфейс, который легко исследовать, тестировать и применять. Вы можете сделать все, от простых настроек макета до сложных систем проектирования без написания линии кода.

Независимо от того, регулируете ли вы расстояние, используя переменные или строительные предварительные предприятия, Divi делает адаптивную математику дизайна доступной для всех. Хотите проверить, как плавно работает Calc () внутри Divi? Загрузите Divi Public Alpha сегодня и испытайте это для себя.

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