Поиск…


Вступление

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

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

Синтаксис

  • : root {} / * псевдокласс, позволяющий более глобальное определение переменных * /
  • --variable-name: значение ; / * определить переменную * /
  • var (- variable-name, default-value ) / * использовать определенную переменную со значением значения по умолчанию * /

замечания

Переменные CSS в настоящее время считаются экспериментальной технологией.


ПОДДЕРЖКА / СОВМЕСТИМОСТЬ БРАУЗЕРА

Firefox: версия 31 + (по умолчанию включена)

Дополнительная информация от Mozilla

Chrome: версия 49 + (по умолчанию включена) .

«Эта функция может быть включена в Chrome версии 48 для тестирования, включив функцию experimental Web Platform . Введите этот chrome://flags/ в адресной строке Chrome».

IE: Не поддерживается.

Edge: Under Development

Safari: версия 9.1+

Переменный цвет

:root {
  --red: #b00;
  --blue: #4679bd;
  --grey: #ddd;
}
.Bx1 {
  color: var(--red);
  background: var(--grey);
  border: 1px solid var(--red);
}

Переменные размеры

:root {
  --W200: 200px;
  --W10: 10px;
}
.Bx2 {
  width: var(--W200);
  height: var(--W200);
  margin: var(--W10);
}

Переменный каскадный

CSS-переменные каскадом во многом аналогичны другим свойствам и могут быть легко скопированы.

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

Предполагая этот HTML:

<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>

Мы можем написать этот CSS:

.button {
  --color: green;
  padding: .5rem;
  border: 1px solid var(--color);
  color: var(--color);
}

.button:hover {
  --color: blue;
}

.button_red {
  --color: red;
}

И получите этот результат:

Варианты трех кнопок

Допустимы / Инвалидам

Именование При указании переменных CSS он содержит только буквы и тире, как и другие свойства CSS (например: line-height, -moz-box-sizing), но он должен начинаться с двойных тире (-)

//These are Invalids variable names
--123color: blue;
--#color: red;
--bg_color: yellow
--$width: 100px;

//Valid variable names
--color: red;
--bg-color: yellow
--width: 100px;

Переменные CSS чувствительны к регистру.

/* The variable names below are all different variables */
--pcolor: ;
--Pcolor: ;
--pColor: ;

Пустое пространство Vs

/* Invalid */
    --color:;

/* Valid */
  --color: ; /* space is assigned */

сцеплений

    /* Invalid - CSS doesn't support concatenation*/
    .logo{
        --logo-url: 'logo';
        background: url('assets/img/' var(--logo-url) '.png');
    }

    /* Invalid - CSS bug */
    .logo{
        --logo-url: 'assets/img/logo.png';
        background: url(var(--logo-url));
    }

    /* Valid */
    .logo{
        --logo-url: url('assets/img/logo.png');
        background: var(--logo-url);
    }

Осторожно при использовании единиц

    /* Invalid */
    --width: 10;
    width: var(--width)px;

    /* Valid */
    --width: 10px;
    width: var(--width);

    /* Valid */
    --width: 10;
    width: calc(1px * var(--width)); /* multiply by 1 unit to convert */
    width: calc(1em * var(--width));

С медиа-запросами

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

Здесь медиа-запрос изменяет переменные, используемые для настройки очень простой сетки:

HTML

<div></div>
<div></div>
<div></div>
<div></div>

CSS

:root{
    --width: 25%;
    --content: 'This is desktop';
}
@media only screen and (max-width: 767px){
    :root{
        --width:50%;
        --content: 'This is mobile';
    }
}
@media only screen and (max-width: 480px){
    :root{
        --width:100%;
    }
}

div{
    width: calc(var(--width) - 20px);
    height: 100px;
}
div:before{
    content: var(--content);
}

/* Other Styles */
body {
    padding: 10px;
}

div{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight:bold;
    float:left;
    margin: 10px;
    border: 4px solid black;
    background: red;
}

Вы можете попробовать изменить размер окна в этой демо-версии CodePen

Вот анимированный снимок экрана об изменении размера:

Изменение размера экрана



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow