Разница между переменными CSS и препроцессором

CSS-хитрости, которые должен знать каждый веб-разработчик Изучение

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

Переменные CSS и препроцессоры — это две разные вещи. Оба имеют преимущества и недостатки. Препроцессор CSS — это язык, который можно использовать для определения собственных правил CSS. Его можно использовать для пользовательских свойств или просто для создания переменных. С другой стороны, переменные CSS (также называемые пользовательскими свойствами) — это динамические значения, которые можно повторно использовать для нескольких элементов и правил стиля на веб-странице. Вы можете определить значения один раз и ссылаться на них в нескольких местах, что упрощает обновление и поддержку ваших стилей.

Переменные CSS. Как и базовые переменные в любом другом языке программирования, переменные CSS также являются простыми переменными. Эти переменные имеют диапазон, в котором они могут использоваться, и используются для хранения значений. Основное преимущество переменных также заключается в том, что они позволяют обновлять/изменять определенные значения из одного места при повторном использовании тех же значений в другом месте в определенном диапазоне.

Некоторые ключевые моменты, которые следует помнить при определении переменных CSS

  • Имя переменной всегда начинается с двойного дефиса (—) и заканчивается точкой с запятой.
  • Лучше всего указать переменную внутри корня: псевдокласс.
  • При использовании переменной сначала используйте ключевое слово var(), а затем внутри упоминайте имя переменной. Например var(—белый цвет)

Синтаксис:

:root {
    --variable-name: value;
}

—variable-name: это название переменной, которую указывает программист. Рекомендуется указать осмысленное имя. Это необходимый параметр.

value: это необязательный параметр, который можно оставить пустым, но при использовании он принимает резервное значение.

For example: var(--white-color,#ffff)

В приведенном выше примере говорится, что если —white-color не определен, используйте вместо него #ffff.

Не обязательно всегда использовать root: также называемый псевдоклассом, который может указать область действия по вашему усмотрению. Обычной практикой является использование root, который указывает глобальную область для использования указанных переменных во всем коде. Имя переменной чувствительно к регистру. Например: «—white-color» и «—WHITE_COLOR» разные.

Выполнение:

property : var(--variable-name);

Имя переменной всегда используется внутри метода var().

Пример:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>variables</title>
    <style>
        :root{
         --green : rgb(0,128,0);
         --height:50px;
         --width:2rem:
        }
          .box{
              height: var(--height);
              width: (--width);
              background-color: var(--green);
              border-radius: 10px; 
          }
          .text{
              text-align: center;
              font-size: 2rem;
              font-weight: bolder;
          }
          
    </style>
</head>
 
<body>
    <h1 style="color:green;text-align: center;">
          GeeksforGeeks
      </h1>
    <div class="box">
        <h3 class="text">welcome geeks</h3>
    </div>
</body>
</html>

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

  • Препроцессоры минимизируют дублирование кода, что помогает программистам писать код быстрее.
  • Чтобы HTML отображал страницу на стороне клиента, компилятор преобразует код после его создания в препроцессорах в простой файл CSS.

На рынке есть много небольших препроцессоров, но когда-то они были мало популярны:

  • Scss/sass
  • Less
  • Stylus
  • PostCss

Все вышеперечисленное поставляется с дополнительными функциями для ванильного CSS.

Sass/scss: расшифровывается как Syntactically Awesome Style Sheet (Sass) или Sassy Cascading Style Sheets (Scss).

Scss Syntax:

CSS

$green : rgb(0,128,0);
$h:50px;
$w:200px;
 
.box {
    height:$h;
    width:$w;
    background-color:$green;
}

Здесь знак $ используется для определения переменной, а расширение файла —.scss.

Sass syntax:

CSS

$green: rgb(0,128,0)
$h: 50px
$w: 200px
 
.box {
    height: $h
    width: $w
    background-color: $green
}

С другой стороны, sass больше основан на отступах и не имеет фигурных скобок, но используется точка с запятой. Расширение файла.sass.

Это код для преобразования файла scss с именем style.scss в файл CSS с именем style.css, поскольку браузеры понимают только CSS.

sass style.scss:style.css

Скомпилированный CSS-код:

CSS

.box {
    height: 50px;
    width: 200px;
    background-color: rgb(0,128,0);
}

Less: Less означает таблицы стилей учащихся, а расширение для их сохранения —.less.

Less Syntax:

CSS

@green: rgb(0,128,0);
@h: 50px;
@w: @h + 150px;
 
.box {
    width: @w;
    height: @h;
}

Здесь знак @ используется для определения переменной. Less также имеет гораздо больше встроенных функций.

Это код для преобразования файла less с именем style.less в файл CSS с именем style.css, поскольку браузеры понимают только CSS.

lessc style.less style.css

Скомпилированный код CSS.

CSS

.box {
    height: 50px;
    width: 200px;
}

Stylus: Stylus предлагает свойства sass, а также множество прозрачных миксинов, передачу аргументов и многое другое.

CSS

green-color : rgb(0,128,0)
h: 50px
w: 150px
 
.box {
    width: w
    height: h
}

.styl Это расширение файла для стилуса. Вы также можете определять переменные со знаком $.

PostCss: PostCss — это современный препроцессор в postcss, в котором вы пишете код так же, как в ванильном CSS, но postcss может преобразовывать этот код в любой желаемый формат. Он поставляется с множеством плагинов, таких как postcss-utilities, atcss, рюкзак и многие другие. Это просто инструмент для преобразования CSS с помощью JavaScript.

Пример:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>preprocessor</title>
</head>
 
<body>
    <h1 style="color:green;text-align: center;">
          GeeksforGeeks
      </h1>
    <div class="box">
        <h3 class="text">welcome geeks</h3>
    </div>
</body>
</html>

Файл с расширением style.scss

CSS

$green : rgb(0,128,0);
$height:50px;
$width:2rem;
 
.box{
    height: $height;
    width: $width;
    background-color:$green;
    border-radius: 10px;
}
 
.text{
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
}

Скомпилированный CSS-код

sass style.scss:style.css

CSS

.box {
    height: 50px;
    width: 2rem;
    background-color: green;
    border-radius: 10px;
}
.box .text {
    text-align: center;
    font-size: 2rem;
    font-weight: bolder;
}

Выход:

йл с расширением style

                      Функции                              CSS-переменные                                    Препроцессоры CSS                          
                            Определение Как и базовые переменные в любом другом языке программирования, переменные CSS также являются простыми переменными. Препроцессоры CSS — это языки сценариев, которые расширяют стандартные или встроенные функции ванильного CSS.
Возможность повторного использования Переменные можно использовать повторно. CSS Мы можем повторно использовать код в препроцессорах, потому что они предоставляют функциональность, называемую примесью;
Компиляция Это уже код css, поэтому нет необходимости компилировать его снова и снова. Препроцессоры должны компилировать свой код в CSS, потому что браузеры понимают только CSS.

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

Читайте также:  5 лучших технологий для построения Microservices Architecture (микросервисной архитектуры)
Оцените статью
bestprogrammer.ru
Добавить комментарий