Меньше Css - нужно создать скины css (используйте расширение)

Мне нужно создать скин для темы WP, поэтому мне нужно сгруппировать все селектора, которые имеют сходные свойства вместе (например, «цвет»).Меньше Css - нужно создать скины css (используйте расширение)

Любой совет, как я могу создать что-то вроде скина CSS с меньшим? я в конечном итоге с этим решением ...

h1, h2, h3, h4, h5, h6{ 
    &:extend(.heading-color); 
    font-size: 12px; 
} 

.another-selector{ 
    &:extend(.heading-color); 
    font-size: 24px; 
} 

.heading-color{ 
     color: red; 
}

это выходы:

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    font-size: 12px; 
} 
.another-selector { 
    font-size: 24px; 
} 
.heading-color, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
.another-selector { 
    color: red; 
}

Это прекрасно работает за исключением того, что мне нужно, чтобы создать «поддельный» класса «.heading-цвет». Это хороший метод или я чего-то не хватает?

источник

2014-08-27 Dee

Для этого случая вам, вероятно, даже не нужна протяженность. Это можно сделать как [this] (http://codepen.io/hari_shanx/pen/ngsDH). Обратите внимание, что это не создало бы лишних классов в выводе CSS. – Harry

Да, конечно, но в первую очередь мне нужно однополюсное свойство группировать все похожие селектора, в моем примере у меня есть «цвет: красный», повторяемый только вовремя. Более легко переопределить CMS и так далее. – Dee

Я сомневаюсь, что такой результат взвинчивания стоит «переопределить с помощью CMS» (Итак, если изначально вам нужно было 3 класса и 99 объектов, вам нужно было бы генерировать 99 селекторных групп вместо?) Там должны быть другие способы сделать это (но все зависит от того, что именно вы подразумеваете под «переопределением с CMS»). В любом случае можно исключить такие фиктивные классы, переместив их в отдельный файл, импортированный с опцией ['reference'] (http://lesscss.org/features/#import-options-reference). См. [Например] (https://github.com/seven-phases-max/less.curious/blob/master/articles/rbgi.md#method-3-emulating-1177) –

Вы можете написать свои «поддельные классы» в отдельном файле .less, а затем использовать @import (reference).

fake.less:

.fake { 
    color: red; 
}

real.less:

@import (reference) "fake.less"; 

.real { 
    &:extend(.fake); 
}

real.css:

.real { 
    color: red; 
}

Sass поддерживает заполнитель, который более удобен в этом виде сценарий. Меньше участников, которые рассматривают возможность реализации аналогичных функций (с высоким приоритетом, см. https://github.com/less/less.js/issues/1177) уже более года ... поэтому я думаю, что обходной путь выше может быть полезен для вас.

источник

2014-12-01 08:57:45 Justineo

Меньше Css - нужно создать скины css (используйте расширение)

ответ

Смежные вопросы