Wie Classen-Prefix mit einbauen?


03.07.2020, 06:22

Ich habe in der Zwischenzeit anders gelöst und jetzt einzelne Media-Queries gesetzt. Wäre trotzdem cool wenn der ein oder andere etwas Input liefert. Das ganze soll möglichst schlank bleiben, damit möglichst wenig kompiliert wird.

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

Ich schlage diese Version des Codes vor. Was halten Sie davon?
https://gist.github.com/glebkema/06501bc196aa48d4639fcba628a0fee9

$queries: ( 
 ( 'xs', 400, 4 ),
 ( 'sm', 550, 6 ),
 ( 'md', 750, 8 ),
 ( 'lg', 1000, 10 ),
 ( 'xl', 1200, 12 )
);

@each $prefix, $media, $columns in $queries {
 @media screen and ( min-width: $media + px) {
  @for $i from 1 through $columns {
   .col-#{$prefix}-#{$i} {
    flex: 0 0 100% / $columns * $i
   }
  }
 }
}

Das Ergebnis können Sie im obigen Link sehen.

-----

P. S. "Sass Maps vs. Nested Lists"

Woher ich das weiß:Beruf – Ich erstelle Wordpress-Themes, Plugins und Online-calculator

Damit hast Du voll ins Schwarze getroffen und damit auf jeden Fall weiterarbeiten kann. Ein fettes Dankeschön und schönes Wochenende!

1

Was möchtest Du wissen?