Question

Here is my Less code:

i.icon-gps {
  .sprite(@icon-gps);
  display:inline-block;
}
i.icon-home {
  .sprite(@icon-home);
  display:inline-block;
}
i.icon-map {
  .sprite(@icon-map);
  display:inline-block;
}
//and many more

Is it possible to write it in one expression?

Was it helpful?

Solution

If the usage is <i class="icon-gps" ></i>

i.icon
{
    &-gps {
      .sprite(@icon-gps);
      display:inline-block;
    }
    &-home {
      .sprite(@icon-home);
      display:inline-block;
    }
    &-map {
      .sprite(@icon-map);
      display:inline-block;
    }
}

If the usage is <i class="icon icon-gps"></i> (thanks to @Curt's comment)

i.icon
{
    display:inline-block;
    &-gps {
      .sprite(@icon-gps);
    }
    &-home {
      .sprite(@icon-home);
    }
    &-map {
      .sprite(@icon-map);
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top