Czym jest @apply w CSS?

93

Przede wszystkim mam na myśli tag CSS.

Poszukałem w Google, @applyale nie mogłem znaleźć niczego, co mogłoby właściwie wyjaśnić mi jego znaczenie.

Jakie jest przeznaczenie takiego tagu?

css

— GameCoder
źródło

3

tabatkins.github.io/specs/css-apply-rule Prawdopodobnie przydatna lektura

— CollinD

1

Gdzie to spotkałeś?

— j08691

2

Natknąłem się na to pod tym linkiem: github.com/y0ssar1an/CSS3

— GameCoder

50

Dlaczego tak wielu ludzi odrzuciło to? To doskonale uzasadnione pytanie i dotyka zaawansowanej funkcji CSS, o której wiele osób najwyraźniej nic nie wie. Tailwind intensywnie korzysta z @applydyrektywy. Nie odrzucaj pytań ludzi tak szybko. Za dużo tego się tutaj dzieje. Co więcej, zauważyłem, że OP nie jest już członkiem stackoverflow, czy odszedł z tego powodu? To żałosne.

— stephenmurdoch

32

prosty sposób wyjaśnienia tego; wprowadzanie zmiennych do css (co jest cechą preprocesorów, takich jak sass) i mixin, które są zachowaniami podobnymi do funkcji (także w preprocesorach).

wyobraź sobie, że --header-themeto funkcja (mieszanie)

:root {
  --header-theme: {
    color: red;
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  @apply --header-theme;
}

w ten sposób możesz go używać w wielu różnych miejscach bez konieczności przepisywania go ponownie NA SUCHO

teraz część zmienna mogłaby wyjaśnić na tym przykładzie

:root {
  --brand-color: red;/*   default value*/
  --header-theme: {
    color: var(--brand-color);
    font-family: cursive;
    font-weight: 600;
  };
}

h1 {
  @apply --header-theme;
}


h2 {
  --brand-color: green; 
  @apply --header-theme;
}

do miksera zostanie wysłana zmienna i zmieni kolor

to nie są ograniczenia tej funkcji, możesz jej użyć o wiele więcej, możesz przeczytać więcej o miksie i zmiennych w SASS, aby uzyskać inne sposoby jej wykorzystania, po tym, jak sugeruję przeczytanie tego wpisu na blogu

teraz jak już cię podekscytowałem, czas na złe wieści, nie jest jeszcze zaimplementowany w przeglądarkach chrome , nadal warto wiedzieć, że nadchodzi i może jeśli chcesz się przygotować, zacznij od SASS

— oqx
źródło

czy funkcja var służy w SASS do tego samego celu co w javascript? Przepraszam, nie znam żadnego SASS.

— GameCoder,

zmienna to w jakiś sposób ta sama kontrolka z jednego miejsca zamiast przepisywania, funkcja jest trochę inna, ale służy tej samej ogólnej idei, co próbuję powiedzieć; na razie i tak nie będziesz mógł go używać; więc jeśli jesteś ciekawy funkcji check sass (ruby) lub mniej (node.js), to tam, gdzie wpadli na pomysł

— oqx

2

Post na blogu autora specyfikacji zatytułowany „Dlaczego porzuciłem @apply” sugeruje, że ta funkcja NIE zostanie wprowadzona do przyszłych przeglądarek. Specyfikacje, jakie znalazłem - tabatkins.github.io/specs/css-apply-rule/#intro Wycofanie na - xanthir.com/b4o00

20

@applypochodzi z propozycji , która została porzucona i zastąpiona CSS Shadow Parts .

reguła @apply, która umożliwia autorowi przechowywanie zestawu właściwości w nazwanej zmiennej, a następnie odwoływanie się do nich w innych regułach stylu.

— Eric Willigers
źródło

9

@applyjest całkiem fajny. Zasadniczo pozwala na ponowne użycie bloków CSS bez konieczności kopiowania ich i bez konieczności modyfikowania ich selektorów.

Ułatwi to korzystanie z ram CSS i jednoczesne zachowanie semantycznych nazw klas.

Uważam, że ten artykuł jest miłym wprowadzeniem do tej funkcji.

Niestety, w tej chwili obsługa przeglądarek praktycznie nie istnieje . Może być używany z preprocesorem CSS, takim jak PostCSS .

Jego przyszłość jest również niepewna, jeśli dobrze rozumiem. Główny orędownik tej funkcji przestał ją wspierać .

— Rolf
źródło

ikr! Uwielbiam sposób, w jaki mogę używać tych klas z Tailwind CSS w @apply. Wprowadza to wyjątkowo nowy sposób pracy z arkuszem stylów, który pozostawia klocki wielokrotnego użytku, które również można łatwo kategoryzować - w rzeczywistości możesz je sortować (możesz użyć do tego odniesienia, takiego jak ja z ToC dokumentacji CSS Tailwind), a nie właściwości, aby skanować arkusze stylów wydajnie! Istnieje wiele możliwości, takich jak pisanie prostych pinstrzałek zamiast wszystkich top/bottom/left/right: 0.

— vintproykt