Premiär! Fyndchans i SweClockers Månadens Drop
Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

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'

1
Skriv svar
Permalänk
Medlem ★
●

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?

Visa signatur

Min GitHub: https://github.com/lassekongo83

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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

Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

@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å.

Visa signatur

Min GitHub: https://github.com/lassekongo83

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
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å.

Gå till inlägget

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;
Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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;
Visa signatur

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

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

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.

Visa signatur

Min GitHub: https://github.com/lassekongo83

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara