Сергей delphinpro

rootnoroot, Еще раз повторяю – именно так и написать:

body[class*="template-account_"] .p-body-header {
  display: none;
}

https://developer.mozilla.org/ru/docs/Web/CSS/:has
https://caniuse.com/css-has

Наверное так

.wui-select-container:has(input:disabled)::after {

}

Формулировка заголовка вопроса тянет на шедевр =)

Действительно - какое же имя дать? Надо на тостере спросить =))
Ждем продолжения по остальным переменным =))

Ну а если по делу, то как-то так (из последних двух проектов):


Запоминать не требуется. Таблица цветов наряду в другими вещами выведена на специальной странице ui.html.

.main-menu {
    $this: &;
    display: none;
    &--open {
        display: block;
        #{$this}__link {  }
    }
}

Но я предпочитаю такой вариант:

.main-menu {
    display: none;
    &--open { display: block; }
    &--open &__link {  }
}

Less — 9,051,733 available code results
Scss — 9,744,238 available code results
Sass — 311,623 available code results
Stylus — 311,251 available code results
scss+sass = 10,055,861

Вау, я вижу человека, который еще ничего не слышал про системы сборки =)
https://www.npmjs.com/package/gulp-less

Кто-то в 2017-ом еще верстает на голом html/css без доп инструментов?

Gulp - наш выбор.

По-моему во всех трех популярных препроцессорах нет никакой принципиальной разницы. Чуть-чуть различается синтаксис, но это дело привычки. Я не ощущаю никакого дискомфорта при работе с любым из них, хотя большую часть времени приходится работать с sass.

div{
  .media-s({
    width: 100%;
    color: #000;
  });
}

так вроде в less

Неиспользуемые - это объявления просто, без правил?
типа .somclass {} ?

Ну и зачем они вам в выходном css файле? Всё правильно less делает.

Да в общем-то на сервере им делать нечего. Достаточно того, что они лежат в репозитории.

Правда бесит ситуация, когда берешься за доработку, открываешь стили, и видишь, что сверстаны они с использованием препроцессора. Спрашиваешь у заказчика исходники, а он говорит, что ему когда делали, передали только css, или вообще не в курсе. Мораль: заказчику нужно отдавать все исходники, и объяснить, что они будут нужны будущему разработчику для доработок.

Интерполяция не прокатит разве?
#{$margin}

add-cart($margin, $prop)
  .animated-add-cart
    animation-duration 1.5s

  @keyframes add-cart
    0%
      #{$margin}:  -($prop / 1.1)
    50%
      #{$margin}:  -($prop / 1.2)
    100%
      #{$margin}:  -($prop / 1.1)

  .add-cart
    animation-name add-cart

$px = 5px
add-cart('margin-bottom', $px)

Вместе с бутстрапом скачиваются его исходники на less (bower i bootstrap) или sass (bower i bootstrap-sass).
Импортируйте в свой проект только файл grid.less (grid.scss) и будет у вас только сетка. (Ну может еще конфиг нужен будет)
Если не используете препроцессоры, самое время начать :)