JavaScript und CSS leben seit über 20 Jahren nebeneinander. Und doch war es bemerkenswert schwierig, Daten zwischen ihnen auszutauschen. Es gab große Versuche, sicher. Aber ich habe etwas Einfaches und Intuitives im Sinn — …
Das ist ein großartiger Blogbeitrag von Brad Frost, in dem er uns durch ein interessantes Beispiel führt. Nehmen wir an, wir erstellen ein Theme und haben Sass wie dieses
.c-text-input {
background-color: $form-background-color;
padding: 10px
}
Für diejenigen, die keinen Design-Hintergrund haben, basiert die Auswahl einer Farbpalette oft auf persönlichen Vorlieben. Die Farbauswahl kann mit einem Online-Farbwerkzeug erfolgen, aus einem Bild abgetastet, von Lieblingsmarken „ausgeliehen“ oder einfach …
Sass hat gerade ein wichtiges neues Feature veröffentlicht, das Sie vielleicht aus anderen Sprachen kennen: ein Modulsystem. Dies ist ein großer Schritt nach vorn für @import, eine der meistgenutzten Sass-Funktionen. Während die aktuelle @import-Regel es erlaubt …
Zu Beginn eines neuen Projekts dauert die Sass-Kompilierung nur einen Augenblick. Das fühlt sich großartig an, besonders wenn es mit Browsersync gekoppelt ist, das das Stylesheet für uns im Browser neu lädt. Aber mit zunehmender Menge an Sass …
Eine meiner Lieblingsmethoden, um Icons zu einer Website hinzuzufügen, ist, sie als Hintergrundbilder von Data-URLs in Pseudoelementen (z. B. ::after) in meinem CSS einzufügen. Diese Technik bietet mehrere Vorteile
Nehmen wir an, Sie möchten ein Element für einen lustigen visuellen Effekt bei :hover bewegen.
@media (hover: hover) {
.list--item {
transition: 0.1s;
transform: translateY(10px);
}
.list--item:hover,
.list--item:focus {
transform: translateY(0);
}
}Cool, cool. Aber was, wenn Sie …
Ich vermute, dass viele unserer Verwendungen von Sass-Maps durch CSS Custom Properties ersetzt werden können – aber hören Sie mir kurz zu.
Bei der Gestaltung von Komponenten müssen wir oft dieselbe Struktur einer Komponente verwenden …
Ich liebe es, meine @media query Breakpoints zu verschachteln. Das ist für mich vielleicht das wichtigste Feature von Sass. Vielleicht wähle ich eine Methode und mache es so
.element {
display: grid;
grid-template-columns: 100px 1fr;
@include breakpoint(baby-bear) {
display: block;
}