Scss, incercare de a crea ceva dinamic

Limbaje de Programare HTML & CSS
1

Salut, incerc sa scot o paleta de culori plecand de la una de baza, eg: red.

Functia mea, este cam asa:

$body-bg: red;
/* level for lighten */
$light1: 5;
$light2: 10;
$light3: 15;
$light4: 20;
$light5: 25;

/* level for darken */
$dark1: 5;
$dark2: 10;
$dark3: 15;
$dark4: 20;
$dark5: 25;

Ok, in opinia mea, ceva deja nu e in regula,adica se poate si mai bine.Am incercat sa fac level pentru lighten si pentru darken , dar cred ca se poate face si printr-un loop, sa-mi incrementeze valoarea * 5;

In continuare am array-ul :

$colors: (
        body: (
                base: $body-bg,
                light-1: lighten($body-bg, $light1), 
                light-2: lighten($body-bg, $light2),
                light-3: lighten($body-bg, $light3),
                light-4: lighten($body-bg, $light4),
                light-5: lighten($body-bg, $light5),

                dark-1: darken($body-bg, $dark1),
                dark-2: darken($body-bg, $dark2),
                dark-3: darken($body-bg, $dark3),
                dark-4: darken($body-bg, $dark4),
                dark-5: darken($body-bg, $dark5),
        ));

Care este destul de urat, adica daca vreau sa ma duc pana la nivelul 10, deja va dati seama cum ar arata.

Nu am lucrat foarte mult cu sass, nu stiu cum sa fac functia dinamica,plecand de la o anumita constanta, si sa fac un loop sa-mi genereze valorile in array,de genul :

dark-1: darken($body-bg,$dark*5); //ideea asta ar fi.

Si as vrea sa creez si clasele ,de genul .body-dark-2 sau .body-light-4 …
Ma puteit ajuta?Multumesc frumos !!

2 
SCSS SYNTAX
$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
1 Like
3

Salut,

Incearca ceva de genul asta (in care step-ul este constant)

$c: (
    primary: #ff0000,
    secondary: #0000ff,
);
$s: 25;

@mixin color($name, $color, $step) {
    $i: $step;
    
    @while $i <= 100 {
        .color-#{$name}-lighten-#{$i} {
            color: lighten($color, $i);
        }
        
        .color-#{$name}-darken-#{$i} {
            color: darken($color, $i);
        }
        
        $i: $i + $step;
    }
}

@mixin palette($colors, $step) {
    @each $name, $color in $colors {
        @include color($name, $color, $step)
    }
}

@include palette($c, $s)

sau varianta cu steps prevedfinit

$c: (
    primary: #ff0000,
    secondary: #0000ff,
);
$s: 21, 40, 55, 93;

@mixin color($name, $color, $steps) {
    
    @each $step in $steps {
        .color-#{$name}-lighten-#{$step} {
            color: lighten($color, $step);
        }
        
        .color-#{$name}-darken-#{$step} {
            color: darken($color, $step);
        }
    }
}

@mixin palette($colors, $steps) {
    @each $name, $color in $colors {
        @include color($name, $color, $steps)
    }
}

@include palette($c, $s)

PS: Sunt destul de convins ca se mai pot face improvements la cod, da’ sper sa fie ceea ce cauti :smiley:

Edit:

$colors: (
    primary: #ff0000,
    secondary: #0000ff,
);
$steps: 21, 40, 55, 93;

@mixin palette($colors, $steps) {
    @each $name, $color in $colors {
        @each $step in $steps {
            .color-#{$name}-lighten-#{$step} {
                color: lighten($color, $step);
            }
            
            .color-#{$name}-darken-#{$step} {
                color: darken($color, $step);
            }
        }
    }
}

@include palette($colors, $steps)

nu arata rau deloc nici cu nested @each deci cred ca poate ramane asa, pare destul de lizibil

2 Likes
4

Din experiență îți zic că este mai bine să:

  1. Definești manual culorile, nu să le generezi dinamic. Poate că o nuanță de roșu arată bine cu lighten de 10%, dar probabil pe verde o să ai nevoie de 17% sau 23% pentru albastru. Și tot felul de excepții și edge-case-uri care îți vor complica inutil codul.

  2. Evită logică complexă în Sass. Probabil ți se pare o idee bună ce vrei să faci, până când… o să vrei să modifici codul și îți dai seama că nu este lizibil. Sau, mai grav, să cauți în cod.

  3. În loc de dark1, dark2 etc îți sugerez nume mai… generice. Gen shade1, din simplul motiv că o schemă inversă (e.g. dark theme) va avea nevoie de culori luminoase. Și vei avea un minunat $dark1: white :smiley:

  4. var(--css) este suportat de toate browserele moderne. Dacă nu ai nevoie de IE (parcă ~ 1% marketshare) nu ai motive prea bune pentru a NU folosi variabilele. În plus, poți face niște chestii foarte mișto (gen variabile @media), lucruri ce sunt imposibil de realizat în Sass :wink:

2 Likes
5

Sunt de acord că e cam multă logică dacă nu e vorba de un design system.

Chiar și cu un design system îți definești clar paleta de culori pentru designer sau din paleta lui din design, eventual folosești storybook, nu trebuie generate. Fiecare lighten e o culoare cu un nume unic…

6

Multumesc , cred ca ai dreptate. De exemplu, am gasit ASTA , si vad ca imi da o schema de culori, voi tot astfel de tool-uri folositi?

7

Schemele de culori sunt tratate cu prea multă … ignoranță. :slight_smile:

It’s not a science

As tempting as it is, you can’t rely purely on math to craft the perfect color palette.
[…]
Once you actually start using your colors in your designs, it’s almost inevitable that you’ll want to tweak the saturation on a shade, or make a couple of shades lighter or darker. Trust your eyes, not the numbers.

Personal am încercat în zeci de feluri separarea unei teme de culori astfel încât să furnizez doar trei-patru culori și să se genereze restul. Niciodată n-a mers satisfăcător.