Tab Atkins, член рабочей группы CSS и команды Google Chrome, опубликовал слайды презентации, которую он проводил в прошлую среду.
Эта презентация демонстрирует четыре относительно новых концепта:
Переменные
Объявляя переменную через конструкцию var, указав ее имя, значение, и все что-угодно от цвета до длины, вращений и функций, она может быть доступна для всего CSS, используемого на странице.
Поддержка локальных переменных также будет присутствовать, через конструкцию local
Примеси
Примеси дают возможность расширить правило необходимыми свойствами с возможностью установки значений по умолчанию.
Вложения правил
Текущие вложения в CSS, особенно без использования классов или id, являются болезненными. Конструкция this преставлена для упрощения этого. Она будет применяться к потомкам действующего правила, наследуя его имя. Теперь можно будет сделать более ясной такую структуру:
Модули
Нет, не те модули, которые составляют CSS 3. Модули — это обычные пространства имен для переменных и примесей. Переменные и примеси могут быть определены через прописание имени модуля в начало собственного имени, либо используя конструкцию use.
Хотя текущий код доступен всего на нескольких машинах в Сиднее, Гугл планирует опубликовать начальную спецификацию в этом квартале и реализовать новшества до конца года. Учитывая, что ни эти планы переменных, ни планы примесей не были распространены в почтовой подписке www-style, будет интересно увидеть, как изменения будут приняты остальными браузерами. Похожие обсуждения, несколько лет назад показали, что это довольно спорные вопросы с очень разными мнениями.
Слайды презентации
Эта презентация демонстрирует четыре относительно новых концепта:
Переменные
Объявляя переменную через конструкцию var, указав ее имя, значение, и все что-угодно от цвета до длины, вращений и функций, она может быть доступна для всего CSS, используемого на странице.
Поддержка локальных переменных также будет присутствовать, через конструкцию local
@var paragraph-size length 12px;
@var paragraph-color color rgba(0,0,0,0);
p {
color: var(paragraph-color);
font-size: var(paragraph-size);
}
Примеси
Примеси дают возможность расширить правило необходимыми свойствами с возможностью установки значений по умолчанию.
@mixin error {
background: #fdd;
color: red;
font-weight: bold;
}
div.error {
border: thick solid red;
padding: .5em;
@mixin error;
}
span.error {
text-decoration: underline;
@mixin error;
}
Вложения правил
Текущие вложения в CSS, особенно без использования классов или id, являются болезненными. Конструкция this преставлена для упрощения этого. Она будет применяться к потомкам действующего правила, наследуя его имя. Теперь можно будет сделать более ясной такую структуру:
header {
color: red;
@this a {
color: blue;
}
}
Модули
Нет, не те модули, которые составляют CSS 3. Модули — это обычные пространства имен для переменных и примесей. Переменные и примеси могут быть определены через прописание имени модуля в начало собственного имени, либо используя конструкцию use.
@module foo {
@var bar color red;
@mixin baz { color: blue; }
}
.foo {
color: var(bar); // Не работает
}
.bar {
@use foo;
color: var(bar); // Работает
}
.baz {
@mixin foo|baz; // Работает
}
Хотя текущий код доступен всего на нескольких машинах в Сиднее, Гугл планирует опубликовать начальную спецификацию в этом квартале и реализовать новшества до конца года. Учитывая, что ни эти планы переменных, ни планы примесей не были распространены в почтовой подписке www-style, будет интересно увидеть, как изменения будут приняты остальными браузерами. Похожие обсуждения, несколько лет назад показали, что это довольно спорные вопросы с очень разными мнениями.
Слайды презентации