Я использую less.js с некоторым регулярным использованием миксинов. Например, у меня есть базовый класс gradientBlack, подобный этому.
.gradientBlack {
background: #333333;
background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
background: -webkit-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
background: -o-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
background: -ms-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5a5a5a', endColorstr='#000000', GradientType=0 );
background: linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
}
Затем я повторно использовать этот класс в нескольких определениях, например
h3 {
.gradientBlack;
...
}
.darkBox {
.gradientBlack;
...
}
. Недостатком этого подхода является то, что он раздувает CSS избыточными определениями. Например, вычисленный CSS может выглядеть примерно так.
h3 {
background: #333333;
background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
//... and maybe some more (redundant) definitions
}
.darkBox {
background: #333333;
background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5a5a5a), color-stop(60%, #333333), color-stop(100%, #000000));
//... and maybe some more (redundant) definitions
}
Для кого-то вроде меня, который использует много градиенты, roundCorners и т. д., это быстро складывается.
Я обнаружил, что известное название этой темы - наследование селектора (см. Sass ) и поскольку это кажется не реализованным прямо сейчас. Использование и преимущества обсуждаются здесь . Вычисленный CSS этого синтаксиса может выглядеть так.
h3,
.darkBox,
.gradientBlack {
background: #333333;
background: -moz-linear-gradient(top, #5a5a5a 0%, #333333 60%, #000000 100%);
...
}
Тем не менее, я был бы признателен за любые предложения, когда беспокоиться и когда not to - как и любые другие подсказки по теме, как действовать, если наследование селектора не является вариантом.