CODEWITHSUNDEEP
csssass
John the Painter
John the Painter

Reputation: 2615

SASS include variables in an @each loop

I have a SASS mixin set up to loop through a bank of colours and apply them to specific elements when the body has a specific data colour. This is all working fine but I'm curious to know if instead of using 'blue, green, red, purple, orange' if you can use variables as the colours too; '$blue, $green, $red' etc. which have varied hex values.

Any suggestions?

I have this currently...

$blue: #003fb8;
$green: #005f30;
$red: #fe5053;
$purple: #5f0d82;
$orange: #ff6d00;

@mixin coloured-elements($color) {
    a:hover, 
    a.site-title,
    nav.main ul li.active a,
    .projects--layout .project h3 {
        color: $color;
    }
}

$colors_names: blue, green, red, purple, orange;
$colors_variables: $blue, $green, $red, $purple, $orange;
@each $color in $colors_variables {
    body[data-colour="#{$color}"] {
        @include coloured-elements($color);
    }
}

Which outputs the below... but how can I use the $colors_name as the data attribute and not the hex value?

body[data-colour="#003fb8"] a:hover,
body[data-colour="#003fb8"] a.site-title,
body[data-colour="#003fb8"] nav.main ul li.active a,
body[data-colour="#003fb8"] .projects--layout .project h3 {
  color: #003fb8;
}

body[data-colour="#005f30"] a:hover,
body[data-colour="#005f30"] a.site-title,
body[data-colour="#005f30"] nav.main ul li.active a,
body[data-colour="#005f30"] .projects--layout .project h3 {
  color: #005f30;
}

body[data-colour="#fe5053"] a:hover,
body[data-colour="#fe5053"] a.site-title,
body[data-colour="#fe5053"] nav.main ul li.active a,
body[data-colour="#fe5053"] .projects--layout .project h3 {
  color: #fe5053;
}

body[data-colour="#5f0d82"] a:hover,
body[data-colour="#5f0d82"] a.site-title,
body[data-colour="#5f0d82"] nav.main ul li.active a,
body[data-colour="#5f0d82"] .projects--layout .project h3 {
  color: #5f0d82;
}

body[data-colour="#ff6d00"] a:hover,
body[data-colour="#ff6d00"] a.site-title,
body[data-colour="#ff6d00"] nav.main ul li.active a,
body[data-colour="#ff6d00"] .projects--layout .project h3 {
  color: #ff6d00;
}

Upvotes: 0

Views: 381

Answers (1)

Stephen C
Stephen C

Reputation: 863

I believe this is what you're looking for. A key value stored on a variable. 

$blue: (
  blue,
  #003fb8
);

$green: (
  green,
  #005f30
);

$red: (
  red,
  #fe5053
);

$purple: (
  purple,
  #5f0d82
);

$orange: (
  orange,
  #ff6d00
);


@mixin coloured-elements($color) {
  a:hover,
  a.site-title,
  nav.main ul li.active a,
  .projects--layout .project h3 {
    color: $color;
  }
}

$colors_variables: $blue, $green, $red, $purple, $orange;

@each $key, $value in $colors_variables {
  body[data-colour="#{$key}"] {
    @include coloured-elements($value);
  }
}

which will translate to

body[data-colour="blue"] a:hover,
body[data-colour="blue"] a.site-title,
body[data-colour="blue"] nav.main ul li.active a,
body[data-colour="blue"] .projects--layout .project h3 {
  color: #003fb8;
}

body[data-colour="green"] a:hover,
body[data-colour="green"] a.site-title,
body[data-colour="green"] nav.main ul li.active a,
body[data-colour="green"] .projects--layout .project h3 {
  color: #005f30;
}

body[data-colour="red"] a:hover,
body[data-colour="red"] a.site-title,
body[data-colour="red"] nav.main ul li.active a,
body[data-colour="red"] .projects--layout .project h3 {
  color: #fe5053;
}

body[data-colour="purple"] a:hover,
body[data-colour="purple"] a.site-title,
body[data-colour="purple"] nav.main ul li.active a,
body[data-colour="purple"] .projects--layout .project h3 {
  color: #5f0d82;
}

body[data-colour="orange"] a:hover,
body[data-colour="orange"] a.site-title,
body[data-colour="orange"] nav.main ul li.active a,
body[data-colour="orange"] .projects--layout .project h3 {
  color: #ff6d00;
}

Upvotes: 1

Related Questions