CODEWITHSUNDEEP
csssass
raduken
raduken

Reputation: 2119

sass css map to store images sizes

I am trying store images and sizes with sass, right now I can load all, but I would like be more specific and be able to load different images in my .logo class

like for example define what image will load in the class like twitter or google.

$logos: (
  twitter:  ( width:200px, height:100px,background-image: url('twitter.png')),
  google:   ( width:600px, height:200px,background-image: url('google.png'))

);

        @each $social, $icon in $logos {
                .logo {
                    width: map-get($icon, width);
                    height: map-get($icon, height);
                    background-image:map-get($icon,background-image);
                }
        }

output:

.logo {
  width: 200px;
  height: 100px;
  background-image: url("twitter.png");
}

.logo {
  width: 600px;
  height: 200px;
  background-image: url("google.png");
}

output I want:

//twitter logo if I define that above.

.logo {
  width: 200px;
  height: 100px;
  background-image: url("twitter.png");
}

// google logo if I define that above too

.logo {
  width: 600px;
  height: 200px;
  background-image: url("google.png");
}

Upvotes: 2

Views: 254

Answers (1)

rebecca
rebecca

Reputation: 963

EDIT: if you just wanted to add a comment above your the .logo code just add /*#{$social}*/ above .logo in your @each-loop. Example output:

/*twitter*/
.logo {
  width: 200px;
  height: 100px;
  background-image: url("twitter.png");
}

do you want something like this compiled? 

.logo.twitter{---}

if you wrap your variable inside a #{} you can use it!

Example: 

    $logos: (
  twitter:  ( width:200px, height:100px,background-image: url('twitter.png')),
  google:   ( width:600px, height:200px,background-image: url('google.png'))

);
@each $social, $icon in $logos {

  .logo.#{$social}{
     width: map-get($icon, width);
     height: map-get($icon, height);
     background-image:map-get($icon,background-image);
    }
 }

outputs 

.logo.twitter {
  width: 200px;
  height: 100px;
  background-image: url("twitter.png");
}

.logo.google {
  width: 600px;
  height: 200px;
  background-image: url("google.png");
}

you can also only use your $social variable, just remove .logo in your @each loop and you'll get

.twitter {
 ...
}

.google {
  ...
}

Upvotes: 1

Related Questions