Я ищу хорошее сокращение, чтобы применить один и тот же эффект к нескольким псевдоклассам в попутном ветре.
Например, я могу захотеть применить синий фон к состояниям :hover и :focus в div.
В настоящее время мне пришлось бы написать следующее:
<div className = "hover:bg-blue focus:bg-blue>Text<div>
ИЛИ, я мог бы использовать apply для создания пользовательского класса, подобного этому:
.hover-focus-bg-blue {
@apply hover:bg-blue focus:bg-blue
}
Но ни один из этих вариантов не является отличным вариантом, когда мне нужно применять сложные состояния (в моем текущем проекте мне нужно охватить 11 состояний для одного элемента (отдых/наведение/активность/фокус/фокус-видимый/фокус-видимый && наведение и т. д.).
Метод применения сохраняет код только в том случае, если он используется несколько раз.
То, что я хотел бы видеть, это что-то вроде:
<div className = "[hover, focus]:bg-blue">Text</div>
Кто-нибудь знает такой синтаксис? Нигде не могу найти.
Это здорово - спасибо, вставьте это как ответ на вопросы, и я отмечу это правильно. Ваше здоровье!
Это вопрос, который задают часто. В основном речь идет о группировке классов в один сгруппированный синтаксис (например, hover:(bg-red-500 border-2)
.
Это ответ, который я получил после поиска решения этого вопроса. Короче говоря, этого функционала пока нет. Несмотря на то, что этот ответ относится к группировке утилит в один селектор, та же логика должна применяться к группировке псевдоселекторов:
В какой-то момент разработчики Tailwind рассмотрели эту функцию, но в конечном итоге решили пока отложить ее. Смотрите эту тему в Твиттере: https://twitter.com/adamwathan/status/1461519820411789314
Итак, как вы можете видеть из ответа и ленты в Твиттере, в настоящее время он приостановлен. В ветке Twitter разработчики тестировали эту функцию на предмет производительности, и похоже, что эта функция в своем текущем состоянии дублирует CSS по сравнению с использованием отдельных утилит:
Поэтому мы провели тест, в котором преобразовали каждый отдельный шаблон пользовательского интерфейса Tailwind (более 500 файлов) для использования сгруппированного синтаксиса, чтобы увидеть, сколько пропускной способности сэкономит вам группировка пропускной способности при обслуживании HTML.
Это имеет смысл, если подумать, потому что использование сгруппированного синтаксиса (например,
focus:(font-bold,underline)
) приводит к меньшему количеству повторяющихся символов в документе, потому что теперь есть больше уникальных имен классов.
Используя негрупповой синтаксис, каждый экземпляр
focus:font-bold
можно сжать и заменить коротким заполнителем (например, %). Используя групповой синтаксис,focus:font-bold
иfocus:(font-bold,underline)
нельзя сжать, потому что они больше не совпадают. Поворот сюжета: после сжатия файлы становятся больше, а не меньше!
Итак, вывод здесь заключается в том, что, хотя сгруппированный синтаксис выглядит как меньше кода, когда вы его создаете, на самом деле он создает как больший файл CSS, так и больший файл HTML в рабочей среде, что делает его очень черно-белым анти-шаблоном производительности.
Тем не менее, писать приятнее, и затраты на производительность невелики, поэтому есть шанс, что мы разработаем его дальше только для опыта разработчиков для людей, которым это нравится. Но, по общему признанию, не решается поощрять что-либо, что плохо влияет на производительность.
Я думаю, что вопрос сформулирован немного иначе, чем вы ответили. Человек спрашивает, как добавить несколько псевдоселекторов в один стиль, а не наоборот. В любом случае, я не думаю, что эта функция существует.
Обновлено: эти функции бесполезны, потому что ваш сайт будет запущен еще до того, как эти функции запустятся. Оставьте их здесь на случай, если вы сможете использовать их, если не используете vite.
Недавно я дал ответ на другой вопрос о группировке классов здесь, но ваш вопрос немного отличается, поэтому вот улучшенная версия предыдущей функции:
const pseudoJoin = (selectors, str) => {
let result = "";
selectors.forEach(selector=> result+=selector+":"+str.split(" ").join(" "+selector+":")+" ")
return result;
}
Теперь вы можете вызывать его где угодно, например:
<div className=`${pseudoJoin(['hover','focus'],"classes you want on hover & focus")} some more classes here ${pseudoJoin(['focus'],"classes when focused")}`>Hello World!</div>
Или когда вы используете фреймворк classnames
:
<div className = { classnames(
pseudoJoin(['hover','focused'], "classes you want on hover & focused"),
"Other classes here",
pseudoJoin(['focused'], "classes when focused")
)}>Hello World!</div>
Чтобы сделать его еще короче, вы можете заменить pseudoJoin
на более короткое имя, потому что я не мог придумать лучшего имени.
Мой предыдущий ответ был легкой и быстрой функцией, но этот не фокусируется на производительности, а скорее объясняет простоту.
const pseudoJoin = (str) => {
let result= [];
let storedvar;
str=str.split(" ");
str.forEach(function(s,i){
if ((/\:\(/).test(s)) storedvar=i;
if (!storedvar) result.push(s);
if (s.endsWith(")")){
result.push(str.slice(storedvar,i+1).join(" "))
storedvar=null;
}
})
str=[]
result.forEach(function(s,i){
if ((/\w\:/).test(s)){
storedvar = s.split(/\:(.*)/s);
if (s.endsWith(")")){
storedvar[1].slice(1,-1).split(" ").forEach(function(t){
storedvar[0].split("+").forEach(function(x){str.push(x+":"+t)})
})
} else {
storedvar[0].split("+").forEach(function(x){
str.push(x+":"+storedvar[1])
})
}
} else {
str.push(s)
}
})
return str.join(" ");
}
Вот пример использования новой функции:
pseudoJoin("hover:text-black hover+focus+active:(bg-white margin-[3.2rem] underline) before+after:content-[Hello_\+_I_am_groot] sm:hidden"));
Я знаю, что это не работает с псевдоселекторами, и я почти уверен, что здесь применима та же логика. Читайте здесь: stackoverflow.com/questions/74166688/…