Scss: Vill använda ett värde i en variabel med 2 värden oavsett om en annan variabel är satt till 'light' eller 'dark'

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

Scss: Vill använda ett värde i en variabel med 2 värden oavsett om en annan variabel är satt till 'light' eller 'dark'

$bg_color: if($variant == 'light', #ebeced, #33393b);

Som standard används #ebeced och skrivs till filen gtk-contained.css. Om variabeln $variant är satt till dark så ändras färgen till #33393b och skrivs till gtk-contained-dark.css.
Här kan ni se hur det är uppbyggt i sin helhet. gtk-contained(-dark).scss sätter variabeln $variant.

Problemet jag vill lösa. Använda #33393b temporärt på några element i gtk-contained.css utan att behöva skriva en massa nya variabler för att få använda den färgen i det ljusa temat.

Exempel på en mixin jag vill ändra. $c ska ha den mörka färgen #33393b i gtk-contained.css (det ljusa temat.)

@mixin headerbar_fill($c:$bg_color, $hc:transparentize($top_hilight, 0.4)) { // // headerbar fill // // $c: bg color // $hc: top highlight color // background-color: darken($c, 3%); box-shadow: inset 0 1px $hc; // top highlight }

Är det möjligt tro?

Gigabyte GA-Z97X-SLI, Intel Core i5 4460 3.2GHz, 128GB Samsung 850 PRO, Corsair 8GB, Gigabyte GeForce GTX 750ti, EVGA Supernova G2 750W
Min GitHub: https://github.com/lassekongo83

Trädvy Permalänk
Medlem
Plats
skåne
Registrerad
Jun 2004

Kan du inte bryta ut färgerna också?
Typ:

$color_dark: #33393b; $color_light: #ebeced; $bg_color: if($variant == 'light', $color_light, $color_dark);

så kan du accessa färgerna direkt utan att behöva ta hänsyn till $variant

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

@kundun: Visst kan jag göra det, men till slut behöver jag skapa nya mixins och annat så att inga andra element använder sig av det ljusa temat i det elementet jag vill använda det mörka. Det bästa vore om jag kunde ändra $variant till dark lokalt så alla element under tex "headerbar" använder sig av det också.

Gigabyte GA-Z97X-SLI, Intel Core i5 4460 3.2GHz, 128GB Samsung 850 PRO, Corsair 8GB, Gigabyte GeForce GTX 750ti, EVGA Supernova G2 750W
Min GitHub: https://github.com/lassekongo83

Trädvy Permalänk
Medlem
Plats
skåne
Registrerad
Jun 2004
Skrivet av lassekongo83:

@kundun: Visst kan jag göra det, men till slut behöver jag skapa nya mixins och annat så att inga andra element använder sig av det ljusa temat i det elementet jag vill använda det mörka. Det bästa vore om jag kunde ändra $variant till dark lokalt så alla element under tex "headerbar" använder sig av det också.

Det låter väldigt hackigt och kommer antagligen att bita dig där bak i framtiden.
Kan du inte definiera upp varje tema och dess element istället.
Nu är jag inte jättehemma i scss men något så här:

$theme-dark_bg: #123456; $theme-dark_hdr-bg: #232323; $theme-light_bg: #876565; $theme-light_hdr-bg: #665544; $c: $theme-{$variant}_hdr-bg;

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Trädvy Permalänk
Medlem
Plats
skåne
Registrerad
Jun 2004

Eller ännu hellre:

// theme colors $theme_dark-color_base_1: #112233; $theme_dark-color_accent_1: #998866; $theme_light-color_base_1: #778877; $theme_light-color_accent_1: #771111; $c: $theme_{$variant}-color_base_1;

Oldschool [å:ldsku:l] adj. Användandet av datorprodukter som är äldre än 3 månader.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Jun 2004

Ju mer jag tänker på det desto hackigare blir det. Jag får nog ta och göra som du sa i början. Får helt enkelt sedan skapa ny @if i mina mixins för element som ligger under 'headerbar' och lägga in dom i en "placeholder selector".

Mixin:

@mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge, $dc: $dark_bg_color, $dfc: $dark_fg_color) { @if $t==normal { background-color: lighten($c, 5%); } @if $t==header-normal { background-color: lighten($dc, 5%); } }

Placeholder selector:

%header_widgets { button { @include button(header-normal); } }

Headerbar:

headerbar { @extend %header_widgets; }

Då gäller det bara för mig att komma på vilka 'widgets' förutom 'button' som kan förekomma i en 'headerbar'. Har inte så stor kontroll på det eftersom det är GTK jag skapar ett tema till och inte HTML. Men tack för hjälpen i alla fall.

Gigabyte GA-Z97X-SLI, Intel Core i5 4460 3.2GHz, 128GB Samsung 850 PRO, Corsair 8GB, Gigabyte GeForce GTX 750ti, EVGA Supernova G2 750W
Min GitHub: https://github.com/lassekongo83