Мой Справочник | CSS3 | SCSS

Мой Справочник | CSS3 | SCSS - Переменные

$ Переменные
($) у SASS (@) у LESS	`$navy: #1d365d; .sample { background-color: $navy; } .rule-1 { $align: right; text-align: $align; } .rule-2 { // в этом месте произойдёт ошибка text-align: $align; } @align: left; // text-align примет значение right .rule-1 { @align: right; text-align: @align; } // text-align примет значение left .rule-2 { text-align: @align; }`	Переменные можно объявлять как «снаружи» правил, так и «внутри». В случае «внутреннего» объявления переменная будет доступна только внутри правила, в котором она объявлена
Вложенность
Вложенность правил	`.super-class-name { color: #fff; } .super-class-name a { text-decoration: none; } .super-class-name a span { font-size: 1em; } // Можно заменить на: .super-class-name { color: #fff; a { text-decoration: none; span { font-size: 1em; } } }`	Самая распространённая фича стилевого препроцессоринга. Вложенные правила просто пишутся внутри других правил. Из цепочек вложенных правил SCSS сам составляет итоговые селекторы.
Управление селекторами (&) Одинаково для LESS и SASS	`.super-button-red { color: red; } .super-button-blue { color: blue; } // Можно заменить на: .super-button { &-red { color: red; } &-blue { color: blue; } } .btn:hover, btn:active { color: red; } .btn.hide { display: none; } // Можно заменить на: .btn { &:hover, &:active { color: blue; } &.btn { display: none; } }`
Мат. операции
Мат. операции	`padding-top: 10px + 20; // = 30px padding-bottom: 100px - 50; // = 50px font-size: 2em * 2; // = 4em left: 50% / 2; // = 25% rgb(10, 10, 10) + 10; // то же самое, что rgb(20, 20, 20) ceil((16px + 2cm) / 2) - округ. в большую ст. floor((16px + 2cm) / 2) - округ. в меньшую ст. round((16px + 2cm) / 2) - округ. в ближ. ст.`	Над любыми численными значениями в SCSS-коде можно произвести математические операции сложения, вычитания, умножения или деления
Переменные-вставки
Переменные-вставки	`@state: success; @propepty: color; @icon: "question"; @pixels: 2; .btn-@{state} { background-color: green; } .btn-error { background-@{propepty}: red; } .btn-help { background-image: url("/img/icons/@{icon}.png"); } .btn-info { border: ~"@{pixels}px" solid blue; } /* РЕЗУЛЬТАТ: */ .btn-success { background-color: green; } .btn-error { background-color: red; } .btn-help { background-image: url("/img/icons/question.png"); } .btn-info { border: 2px solid blue; }`	Переменные можно использовать не только в значениях CSS-свойств, но и как составные части селекторов, названий свойств или как «кусочки» значений свойств. С помощью такой подстановки переменных, или Variable Interpolation, можно динамически формировать разные части CSS-правил. Чтобы сделать подстановку значения переменной, нужно использовать фигурные скобки вокруг её имени Кстати, тильда ~ в примере выше нужна для хитрого механизма экранирования LESS. Без неё «склеивание» переменной и единицы измерения не сработает. С помощью «переменных-вставок» можно формировать имена селекторов динамически в зависимости от определённых условий или в цикле
Переменные в чистом CSS
Создание переменных в чистом CSS	`/* Объявление переменных */ :root { --my-custom-color: tomato; --my-custom-size: 16px; }`	Для глобальной видимости эти свойства нужно объявлять в корневом элементе html, лучше в :root (для svg). Название кастомного свойства должно начинаться с двойного тире --
Применение	`.some-class { color: var(--my-custom-color); font-size: var(--my-custom-size); }` `/* Объявление внутри с присваиванием или переопределение */ .some-class { color: var(--my-custom-color, red); font-size: var(--my-custom-size, 14px); }`
Взаимодействие с функцией calc()	`.some-class { font-size: calc(var(--my-custom-size)*0.5); }`	Можно использовать математические операции с цифровыми значениями с помощью функции calc()