Direkt zum Inhalt springen
CSS-Tricks
  • Artikel
  • Notizen
  • Links
  • Anleitungen
  • Almanach
  • Zufall
Suche

Artikel mit Schlagwort
Sass

45 Artikel
{
,

}
Direkter Link zum Artikel: Getting JavaScript to Talk to CSS and Sass
custom properties JavaScript Sass

Getting JavaScript to Talk to CSS and Sass

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 — …

Avatar of Marko Ilic
Marko Ilic am 25. Aug 2020
Direkter Link zum Artikel: Sass !default and themeable design systems
design systems Sass

Sass !default and themeable design systems

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
}
…
Avatar of Robin Rendle
Robin Rendle am 11. Mär 2020
Direkter Link zum Artikel A Handy Sass-Powered Tool for Making Balanced Color Palettes
color Sass

A Handy Sass-Powered Tool for Making Balanced Color Palettes

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 …

Avatar of Stephanie Eckles
Stephanie Eckles am 9. Dez 2019
Direktlink zum Artikel: Einführung in Sass-Module
Module Sass

Einführung in Sass-Module

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 …

Avatar of Miriam Suzanne
Miriam Suzanne am 14. Okt. 2019
Direkter Link zum Artikel: A Proof of Concept for Making Sass Faster
Sass

A Proof of Concept for Making Sass Faster

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 …

Avatar of Sebastian Webb
Sebastian Webb am 9. Okt 2019
Direkter Link zum Artikel: Erstellen eines wartungsfreundlichen Icon-Systems mit Sass
background-image icons Sass sass maps svg icons

Erstellen eines wartungsfreundlichen Icon-Systems mit 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

  • Sie erfordern keine zusätzlichen HTTP-Anfragen
…
Avatar of Tracy Rotton
Tracy Rotton am 3. August 2021
Direkter Link zum Artikel Gestaffelte CSS-Übergänge
Hover nth-child Sass transition-delay

Gestaffelte CSS-Übergänge

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 …

Avatar of Chris Coyier
Chris Coyier am 14. Aug. 2019
Direkter Link zum Artikel Schlagen CSS Custom Properties Sass-Schleifen?
Eigene Eigenschaften Schleifen Sass

Schlagen CSS Custom Properties Sass-Schleifen?

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 …

Avatar of Robin Rendle
Robin Rendle am 2. Mär. 2019
Direkter Link zum Artikel Wo verschachteln Sie Ihre Sass-Breakpoints?
media queries nesting Sass

Wo verschachteln Sie Ihre Sass-Breakpoints?

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;
  }
…
Avatar of Chris Coyier
Chris Coyier am 17. Apr. 2020
  • Neuer
  • 1
  • 2
  • 3
  • ...
  • 5
  • Ältere

CSS-Tricks wird unterstützt von DigitalOcean.

Bleiben Sie auf dem Laufenden über Web-Entwicklung

mit unserem handverlesenen Newsletter

DigitalOcean
  • Über DO
  • Cloudways
  • Rechtliches
  • Holen Sie sich kostenloses Guthaben!
CSS-Tricks
  • Schreiben Sie für uns!
  • Werben Sie bei uns
  • Kontaktieren Sie uns
Soziales
  • RSS-Feeds
  • CodePen
  • Mastodon
  • X
Nach oben

© .