Разница между переменными SCSS и переменными CSS?
Я не понимаю разницы между пользовательскими свойствами (переменными) CSS и переменными SCSS (кстати, я новичок в Sass)
Если этот код CSS:
:root{
--someColor: coral;
}
body{
background: var(--someColor);
}
достигает тех же результатов, что и этот код SCSS:
$someColor: coral;
body{
background: $someColor;
}
Почему были введены переменные SCSS? Они действительно такие же, как переменные CSS, или мне что-то не хватает?
Спасибо.
@Sid Я сослался на это, он не отвечает на мой вопрос, а именно, в чем разница между переменными SCSS и CSS (а не общая разница между SCSS / CSS), тем не менее, спасибо!
Ответы 1
SCSS - это препроцессор. Это означает, что это не CSS, но он преобразуется в CSS «во время компиляции». В результирующем коде CSS нет никакого сходства с исходным кодом SCSS. Следовательно, вы не можете изменять значения переменных во время выполнения CSS.
Исторически SCSS - довольно старый метод. Он был изобретен из-за того, что в CSS отсутствуют определенные функции, в том числе переменные (вложенность, циклы, миксины и т. д.).
Переменные CSS - совсем недавнее дополнение к стандарту CSS. Они не сделали переменные SCSS бесполезными, потому что с переменными SCSS можно делать то, что нельзя делать с переменными CSS (насколько мне известно), например, расчеты цвета.
С другой стороны, с переменными CSS можно делать то, что нельзя делать с переменными SCSS, например изменять во время выполнения.
Кстати: переменные CSS не являются официальным жаргоном. Их следует называть настраиваемыми свойствами. Но все называют переменные.
Приложение 1
Одно отличие, о котором я не говорил. Вы не можете изменить переменные SCSS с помощью JavaScript. Однако к настраиваемым свойствам CSS можно получить доступ и изменить с помощью JS.
Приложение 2
В этой статье о трюках CSS есть хороший обзор: https://css-tricks.com/difference-between-types-of-css-variables/
Это объясняет, почему скомпилированный SCSS заменяет вхождения переменной ее значением вместо использования настраиваемых свойств CSS! Вы говорите, что это связано с историческими причинами, потому что переменные SCSS были введены до пользовательских свойств CSS?
Историческая причина одна точка да. Расчет другой
термин Переменная действительно является официальным, но, вероятно, используется неправильно. Мы говорим о каскадные переменные и настраиваемые свойства. Эти две функции (определенные в той же спецификации: w3.org/TR/css-variables-1) сокращены до названия Переменные CSS.
@yamanidev ИМО, немного неправильно пытаться сравнивать оба, потому что они совсем не одно и то же. У них только общий термин Переменная и больше ничего.
@TemaniAfif Насколько я понимаю спецификацию: в термине --my-prop: 10px левая часть двоеточия является настраиваемым свойством, а правая часть двоеточия - каскадной переменной?
отчасти, но именно использование var() делает его каскадной переменной. Где-то в спецификации вы можете прочитать: Примечание. Хотя этот модуль фокусируется на использовании настраиваемых свойств с функцией var () для создания «переменных», они также могут использоваться как фактические настраиваемые свойства, анализируемые сценарием и управляемые им. <- 95% случаев использования используют var() в сочетании с настраиваемым свойством, но мы можем остановиться на функции настраиваемого свойства и больше не говорить о переменных. На самом деле у нас нет никаких примеров, но мы можем найти варианты использования, когда нам не нужно использовать var().
@TemaniAf, если я понимаю вашу точку зрения, SCSS и CSS - это две совершенно разные технологии, это сравнение стола со стулом. Причина моего сравнения - путаница; насколько я понял, SCSS был разработан для упрощения написания стилей путем введения различных функций, таких как переменные. Но если последний уже существует в CSS, зачем использовать другой способ достижения той же цели. К счастью, Юнзен предоставил четкий и хорошо написанный ответ, еще раз спасибо!
@yamanidev нет, они совсем не достигают той же цели. Это ловушка, в которую попадают все. Переменные CSS ни в коем случае не заменяют переменные SASS. Это две ортогональные особенности. Вы можете не заметить разницы, если вы новичок в CSS, но когда вы будете работать с ними слишком долго, вы поймете, что я имею в виду.
См .: geeksforgeeks.org/what-is-the-difference-between-css-and-scs s