Есть ли инструмент, позволяющий комбинировать классы CSS? Кажется удобным объединить их в чем-то вроде Tailwind css, но есть ли способ "сложить их" в CSS? У Sass есть @extend, что похоже на то, что я думаю. Но есть ли что-то похожее на это:

Html:

<div class="author"></div>

Css:

.card {with: 100px; height: 100px;}
.green (background-color: green}

.author { .card + .green }

Или, может быть

.author = .card.green

Затем с другими классами получилось бы что-то вроде:

.author, 
.staff, 
.jockey = .card.green.padding-large.centered.motif-top

Это существует?

3
A. Kolbo 8 Окт 2018 в 07:07

2 ответа

Лучший ответ

Это можно сделать с помощью Less.css. Просто добавьте этот тег <script> в свой HTML-файл:

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>

И добавьте <link> во внешнюю таблицу стилей, подобную этой (это не нужно, но Less менее ошибочен, если записан во внешнем файле .less, а не внутри тегов <style> в HTML):

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Вот этот пример, который вы предоставили:

.card {width: 100px; height: 100px;}
.green (background-color: green}

.author { .card + .green }

Может быть записано в Less как:

.card {
    width: 100px;
    height: 100px;
}

.green {
    background-color: green;
}

.author {
    .card();
    .green();
}

И второй пример:

.author, 
.staff, 
.jockey = .card.green.padding-large.centered.motif-top

Записано в Менее как:

.author, .staff, .jockey {
    .card();
    .green();
    .padding-large();
    .centered();
    .motif-top();
}

Надеюсь, это помогло вам, и перейдите на официальный сайт, чтобы узнать больше о Less CSS ( Le arner S tyle S heets)

2
Jack Bashford 8 Окт 2018 в 04:30

Это чистый CSS способ, но синтаксис немного отличается, и вам не нужна первая строка:

.author {} /* 1st line is not required*/

.author, .class1 {
  width: 100px;
}
.author, .class2 {
  height: 100px;
  background-color: black;
}
<div class="author"><div>

Дополнительная информация здесь: Может ли класс CSS наследовать один или несколько другие классы?

2
Daniel Tedesco 9 Окт 2018 в 14:58