亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Generieren Sie Standardwerte und CSS-Variablen mit SCSS
P粉295616170
P粉295616170 2024-04-06 17:46:54
0
1
949

Ich setze Website-Styling um.

Aus Gründen der Legacy-Unterstützung muss ich IE11 zumindest für eine Weile unterstützen. Aus Gründen des Arbeitsablaufs und meiner Vernunft m?chte ich wann immer m?glich CSS-Variablen verwenden.

Ich habe mir diese L?sung angesehen und sie generiert etwas, das funktioniert, aber ziemlich ausführlich zu verwenden ist.

Mein Ziel ist es, einen fest codierten Wert zu erhalten, der sofort von einer CSS-Variablen überschrieben wird. Auf diese Weise kann ich für alle ein Standardthema hinzufügen und für die Browser, die CSS-Variablen unterstützen, ein anderes Thema (z. B. den Dunkelmodus) hinzufügen. Ich muss das natürlich nicht alles selbst schreiben.

Meine Idee ist also, dass ich so etwas schreiben k?nnte: 

$foo {...?}

:root {
  --foo: red;
}

:root.dark {
  --foo: black;
}

p {
  color: $foo;
}

Es wird als

übersetzt 
:root {
  --foo: red;
}

:root.dark {
  --foo: black;
}

p {
  color: red;
  color: var(--foo);
}

Kann dies mit scss erreicht werden? Ich m?chte dieses Projekt nicht durch das Hinzufügen einiger zuf?lliger NPM-Module oder anderer Compiler und Transpiler von Drittanbietern aufbl?hen. Ich wei?, dass es m?glich ist, eine Polyfüllung für IE11 hinzuzufügen, um Unterstützung für CSS-Variablen hinzuzufügen, aber die meisten davon, die ich bisher gefunden habe, weisen eine unglückliche Einschr?nkung auf (au?erdem handelt es sich um Code von Drittanbietern, den ich bevorzuge). Vermeiden Sie, wenn m?glich). Dies ist die L?sung, die ich w?hlen k?nnte, wenn es keine gute L?sung mit SCSS gibt.

P粉295616170
P粉295616170

Antworte allen(1)
P粉242126786

以下是您可能想要改進(jìn)的快速解決方案：

  1. 使用所有顏色定義地圖：
$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);
  1. 循環(huán)地圖以創(chuàng)建 CSS 自定義屬性：
@each $color, $value in $colors {
    :root {
        --#{$color}: #{$value};
    }
}
  1. 創(chuàng)建一個 mixin 以輸出后備和值。
    我決定創(chuàng)建一個需要 2 個參數(shù)的 mixin，即 css 屬性和您想要的顏色。
@mixin propertyPlusColorValue($property, $color) {
    #{$property}: map.get($colors, $color);
    #{$property}: var(--#{$color});
}
  1. 然后你可以像這樣使用它：
.foobar {
    @include propertyPlusColorValue(color, "blue");
    @include propertyPlusColorValue(background-color, "red")
}

完整代碼：

@use "sass:map";

$colors: ("blue": #0000ff, "red": #ff0000, "green": #00ff00);

@each $color, $value in $colors {
    :root {
        --#{$color}: #{$value};
    }
}

@mixin propertyPlusColorValue($property, $color) {
    #{$property}: map.get($colors, $color);
    #{$property}: var(--#{$color});
}

.foobar {
    @include propertyPlusColorValue(color, "blue");
    @include propertyPlusColorValue(background-color, "red")
}
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage