Hasilkan nilai lalai dan pembolehubah CSS menggunakan SCSS

Question

Saya sedang melaksanakan penggayaan laman web.

Atas sebab sokongan warisan, saya perlu menyokong IE11, sekurang-kurangnya untuk seketika. Untuk aliran kerja dan sebab kewarasan saya, saya ingin menggunakan pembolehubah css apabila boleh.

Saya telah melihat ke dalam penyelesaian ini dan ia menghasilkan sesuatu yang berfungsi, tetapi agak bertele-tele untuk digunakan.

Matlamat saya adalah untuk mendapatkan nilai kod keras yang segera digantikan oleh pembolehubah CSS. Dengan cara ini saya boleh menambah tema lalai untuk semua orang dan menambah tema yang berbeza (seperti mod gelap) untuk penyemak imbas yang menyokong pembolehubah css. Saya jelas tidak perlu menulis semua ini sendiri.

Jadi idea saya ialah saya boleh menulis sesuatu seperti ini:

$foo {...?}

:root {
  --foo: red;
}

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

p {
  color: $foo;
}

Ia diterjemahkan sebagai

:root {
  --foo: red;
}

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

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

Bolehkah ini dicapai menggunakan scss? Saya tidak mahu membebankan projek ini dengan menambahkan beberapa modul npm rawak atau penyusun dan transpiler pihak ketiga yang lain.

Saya tahu ada kemungkinan untuk menambah poliisi untuk IE11 untuk menambah sokongan untuk pembolehubah CSS, tetapi kebanyakan yang saya temui setakat ini mempunyai beberapa bentuk pengehadan yang malang (tambahan, ia adalah kod pihak ketiga yang saya suka) Elakkan jika mungkin). Inilah penyelesaian yang mungkin saya gunakan jika tiada penyelesaian yang baik menggunakan SCSS.

Answer 1

Berikut ialah penyelesaian pantas yang mungkin anda ingin perbaiki:

1. Tentukan peta menggunakan semua warna:

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

2. Gelung melalui peta untuk mencipta sifat tersuai CSS:

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

3. Buat campuran untuk mengeluarkan nilai jumlah sandaran.
   Saya memutuskan untuk mencipta mixin yang mengambil 2 parameter, sifat css dan warna yang anda mahukan.

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

4. Kemudian anda boleh menggunakannya seperti ini:

.foobar {
    @include propertyPlusColorValue(color, "blue");
    @include propertyPlusColorValue(background-color, "red")
}

---

Kod penuh:

@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")
}