Почему Vue3 выбрал переменные CSS

Почему Vue3 выбрал переменные CSS

Vue 3Добавлена ​​экспериментальная функция -«Переменные CSS, управляемые состоянием компонента в одном файле»

Увидев это, у меня возникли следующие вопросы?

• CSSЧто такое переменные?
• Sass/LessРазве в нем нет определения переменной, зачем вам его использовать?CSSПеременная?
• ТекущийVueне через:styleспособ определения динамической привязкиCSS,ТотCSSВ чем разница между переменными и этим способом?
• Vue 3что ты сделал,SFC(Однофайловый компонент) можно лучше использоватьCSSПеременная

Эти вопросы обсуждаются ниже

Основы CSS-переменных

Переменные CSS — это не продукт фреймворка, а стандартная спецификация, определенная автором CSS.

CSSпеременная, также известная какCSSПользовательское свойство, содержащее значения, которые можно повторно использовать в документе. Значения устанавливаются пользовательскими тегами атрибутов (например:--main-color: black;),Зависит отvar()функция для получения значения (например:color:  var(--main-color);)

Зачем выбирать две линии соединения (--)Выражать? из-за переменной?одеялоSassиспользованный,@одеялоLessиспользованный. Чтобы не конфликтовать, официальнаяCSSВместо этого переменные используют две линии соединения.

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

<div class="parent">
  I am Parent
  <div class="child">
    I am Child
  </div>
</div>

.parent {
  /*  变量的作用域就是它所在的选择器的有效范围，所以.parent 读取不到 child 中的变量  */
  color: var(--body-child);
  /*  定义变量  */
  --parent-color: blue;
}
.child {
  /*  通过 var 读取变量  */
  color: var(--parent-color);
  --child-color: green;
}

Отображение результатов

прямо сейчас мы.parentопределить переменные в--parent-color: blue;,существует.childиспользуется вcolor: var(--parent-color);

Следует отметить, что областью действия переменной является допустимая область действия селектора, в котором она находится, например.childопределено в--child-color: green;, существует.parentнечитаемо, только для.childЭлементы под элементом действительны

Если вы хотите иметь доступ к нему в документе HTML, вы можете определить его в классе:rootсередина

В дополнение к основному использованию, есть следующие моменты, на которые следует обратить внимание.

• CSSИмена переменных чувствительны к регистру, т.е.--myColorи--mycolorразные
• var()Параметр может использовать второй параметр для установки значения по умолчанию, когда переменная недействительна, будет использоваться значение по умолчанию.
• Переменные CSS позволяют JavaScript взаимодействовать с CSS.,существуетJSмы можем работатьCSS, при нормальной работеCSSсвойства такие же

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

Здесь продемонстрировано самое простое использование, вы можете проверить деталиMDNДокументация

Использование переменных CSS в Vue 2

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

Ключ в том, как мы делаемVueСостояние в компоненте синхронизируется сCSSВ переменной это на самом деле очень просто, черезStyle 绑定Вот и все.Демонстрационный адрес Vue 2

<template>
  <!-- 如果要该组件都可以使用，则必须放置在根元素下 -->
  <div class="hello" :style="styleVar">
    <div class="child-1">I am Child 1</div>
    <div class="child-2">I am Child 2</div>
    <div @click="onClick">Change Red TO Blue</div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      styleVar: {
        "--colorBlue": "blue",
        "--colorRed": "red",
        "--fontSize": "30px",
        "--fontSizeTest": "30px",
      },
    };
  },
  methods: {
    onClick() {
      this.styleVar["--fontSizeTest"] = "40px";
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.child-1 {
  color: var(--colorBlue);
  font-size: var(--fontSize);
}
.child-2 {
  color: var(--colorRed);
  font-size: var(--fontSizeTest);
}
</style>

результат:

Нам просто нужно установить в корневом элементе компонента:style="styleVar"(Если вы хотите, чтобы этот компонент был доступен, его необходимо разместить под корневым элементом), вы можете использовать его вVue 2.xреализует состояние в компоненте иCSSПривязка значения, и это отношение привязки является чувствительным, например, я определяю метод для измененияfont-sizeЗначение , может обновляться в режиме реального времени.

onClick() {
  this.styleVar["--fontSizeTest"] = "40px";
},

Демонстрация эффекта:

:style против переменных CSS

Здесь есть проблема, существующаяVueв состоянии пройти:styleспособ определения динамической привязкиCSS, например, я могу прямо написать выше.child-1Следующий переплет делается посередине, и эффект такой же, как и выше.

<div class="child-1" :style="{ color: 'blue', fontSize: '30px' }">
  I am Child 1
</div>

Тогда почему я должен использоватьCSSПеременная? Есть ли смысл тратить столько хлопот?

Делаю вывод по двум причинам:

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

пройти черезCSSпеременная, вы можете напрямую установить переменную в корневом элементе компонента, внутри компонента<style>можно использовать непосредственно в

Причина 2: использование псевдоэлементов Если вы используете его напрямую:styleМы не можем стилизовать псевдоэлементы, иCSSпеременные могут

p::first-line {
  color: var(--theme-secondary-color);
}

Использование переменных CSS в Vue 3

Несмотря на то чтоVue 2.xможно использовать вCSSпеременная, но ее нужно передать с помощью привязки стиля, что выглядит не так элегантно, поэтомуVue 3сделал некоторые оптимизации в

Добавлена ​​привязка vars

<template>
  <div class="text">hello</div>
</template>

<script>
export default {
  data() {
    return {
      color: "red",
    };
  },
};
</script>

<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

существуетVue 3серединаSFCсередина,styleПоддержка этикетокvarsПривязка, этот параметр принимает вставку пары ключ-значение объекта.CSSпеременные, как показано выше<style vars="{ color }">. Вы можете увидеть эффектДемонстрационный адрес Vue 3

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

<div style="--color:red" class="text">hello</div>

Используйте с

когдаvarsи<style scoped>При совместном использовании применяетсяCSSПеременная будет начинаться с компонентаScoped idВ качестве префикса он также будет автоматически добавлен при доступеScoped id

Например, мы пишем так:

<style scoped vars="{ color }">
h1 {
  color: var(--color);
}
</style>

После компиляции становится

h1 {
  color: var(--6b53742-color);
}

Если мы хотим получить доступ к глобальному в этом случаеCSSА переменные? То есть мы не хотим добавлятьScoped Id, то напишите что-то вроде этого:

<style scoped vars="{ color }">
h1 {
  color: var(--color);
  font-size: var(--global:fontSize);
}
</style>

Это скомпилируется до следующего результата:

h1 {
  color: var(--6b53742-color);
  font-size: var(--fontSize);
}

Переменные VS CSS-переменные в Less/Sass

Я понимаю, что самый важный момент заключается в том, чтоCSSпосле переменной может следоватьJavaScriptулучшенная коммуникация, эквивалентнаяCSSиJavaScriptмост. существуетVueЭто до сих пор видно в

Также посмотрите пример переключения тем, если мы используемSassпеременные следующим образом:

$color-primary: blue;
$color-text: black;
$color-bg: white;
/* invert */
$color-primary-invert: red;
$color-text-invert: white;
$color-bg-invert: black;

.component {
  color: $color-text;
  background-color: $color-bg;

  a {
    color: $color-primary;
  }
}

.component--dark {
  color: $color-text-invert;
  background-color: $color-bg-invert;

  a {
    color: $color-primary-invert;
  }
}

У нас есть две темы, обычная тема и темная тема (dark).Обратите внимание, что в темном режиме нам нужна новая переменная цвета, чтобы обновить старую переменную цвета.. Если этот параметр очень большой, мы будем очень огорчены.

СмотретьCSSЕсли установлена ​​переменная

:root, [data-theme="default"] {
  --color-primary: blue;
  /* color contrasts */
  --color-bg: white;
  --color-contrast-lower: hsl(0, 0%, 95%);
  --color-contrast-low: hsl(240, 1%, 83%);
  --color-contrast-medium: hsl(240, 1%, 48%);
  --color-contrast-high: hsl(240, 4%, 20%);
  --color-contrast-higher: black;
}

[data-theme] {
  background-color: var(--color-bg);
  color: var(--color-contrast-high);
}

[data-theme="dark"] {
  --color-primary: red;
  /* color contrasts */
  --color-bg: black;
  --color-contrast-lower: hsl(240, 6%, 15%);
  --color-contrast-low: hsl(252, 4%, 25%);
  --color-contrast-medium: hsl(240, 1%, 57%);
  --color-contrast-high: hsl(0, 0%, 89%);
  --color-contrast-higher: white;
}

В этом случае нам не нужно определять дополнительную переменную цвета, потому что нам просто нужно установить переменную CSS в правильное значение.

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

Кроме того, препроцессор иCSSПеременные не конфликтуют, их комбинация может лучше улучшить наш открытый опыт.

Минусы - проблемы с совместимостью браузера

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

Чтобы разобраться с его совместимостью, мы также можем написать следующее:

a {
  color: #7F583F;
  color: var(--primary);
}

Суммировать

Наконец, резюмируем несколько вопросов, поднятых в начале статьи:

• CSSЧто такое переменные?

  • CSSпеременная, также известная какCSSНастраиваемое свойство, содержащее значение, которое можно повторно использовать в документе.

• ТекущийVueне через:styleспособ определения динамической привязкиCSS,ТотCSSВ чем разница между переменной и этим?

  • Сложные веб-сайты будут иметь большое количествоCSSкод, часто со многими повторяющимися значениями
  • Использование псевдоэлементов

• Vue 3что ты сделал,SFC(Однофайловый компонент) можно лучше использоватьCSSПеременная

  • новыйvarsсвязывать
  • и<style scoped>Используется вместе для расширения возможностей области видимости

• Sass/LessРазве в нем нет определения переменной, зачем его использовать?CSSПеременная?

  • CSSпосле переменной может следоватьJavaScriptулучшенная коммуникация, эквивалентнаяCSSиJavaScriptмост
  • Переменные SASS — это время компиляции, переменные CSS — это время выполнения

Ссылаться на

• Учебное пособие по CSS-переменным

• Why we prefer CSS Custom Properties to SASS variables