В этой статье вы узнаете о различиях между переменными 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
:
2
rem;
.box{
height
: $height;
width
: $width;
background-color
:$
green
;
border-radius:
10px
;
}
.text{
text-align
:
center
;
font-size
:
2
rem;
font-weight
:
bolder
;
}
Скомпилированный CSS-код
sass style.scss:style.css
CSS
.box {
height
:
50px
;
width
:
2
rem;
background-color
:
green
;
border-radius:
10px
;
}
.box .text {
text-align
:
center
;
font-size
:
2
rem;
font-weight
:
bolder
;
}
Выход:
Функции | CSS-переменные | Препроцессоры CSS |
Определение | Как и базовые переменные в любом другом языке программирования, переменные CSS также являются простыми переменными. | Препроцессоры CSS — это языки сценариев, которые расширяют стандартные или встроенные функции ванильного CSS. |
Возможность повторного использования | Переменные можно использовать повторно. | CSS Мы можем повторно использовать код в препроцессорах, потому что они предоставляют функциональность, называемую примесью; |
Компиляция | Это уже код css, поэтому нет необходимости компилировать его снова и снова. | Препроцессоры должны компилировать свой код в CSS, потому что браузеры понимают только CSS. |
Основное преимущество препроцессоров перед переменными CSS заключается в том, что они занимают меньше места, потому что компилируются в правильный CSS. Не опасаясь, что это повредит другие браузеры или файлы, вы можете использовать их в таблицах стилей.