starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-26 09:25:50 +03:00

[GH-ISSUE #255] Suggestion to "improve" sass and less files #168

New issue

Closed

opened 2026-03-03 14:35:07 +03:00 by kerem · 7 comments

kerem commented

2026-03-03 14:35:07 +03:00

Owner

Originally created by @felixvictor on GitHub (Jun 8, 2016).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/255

Love your project...

What about this: instead of listing all the imports in the sass (less) files, you could use a loop. For example

$countries: ad, ae, af;
$n: length($countries);

@for $i from 1 through $n {
  $country: nth($countries, $i);
  .flag-icon-#{$country} {
  background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg);
  &.flag-icon-squared {
    background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg);
  }
 }
}

And for less

@countries: ad, ae, af;
@n: length(@countries);
.generate-icons(@n);

.generate-icons(@n, @i: 1) when (@i =< @n) {
  @country: extract(@countries, @i);
  .flag-icon.@{country} {
    background-image: ~"url((@{flag-icon-css-path}@{flag-icon-rect-path}/@{country}.svg)";
    &.flag-icon-squared {
      background-image: ~"url(@{flag-icon-css-path}@{flag-icon-square-path}/@{country}.svg)";
    }
  }
  .generate-icons(@n, (@i + 1));
}

Originally created by @felixvictor on GitHub (Jun 8, 2016). Original GitHub issue: https://github.com/lipis/flag-icons/issues/255 Love your project... What about this: instead of listing all the imports in the sass (less) files, you could use a loop. For example ``` $countries: ad, ae, af; $n: length($countries); @for $i from 1 through $n { $country: nth($countries, $i); .flag-icon-#{$country} { background-image: url(#{$flag-icon-css-path}#{$flag-icon-rect-path}/#{$country}.svg); &.flag-icon-squared { background-image: url(#{$flag-icon-css-path}#{$flag-icon-square-path}/#{$country}.svg); } } } ``` And for less ``` @countries: ad, ae, af; @n: length(@countries); .generate-icons(@n); .generate-icons(@n, @i: 1) when (@i =< @n) { @country: extract(@countries, @i); .flag-icon.@{country} { background-image: ~"url((@{flag-icon-css-path}@{flag-icon-rect-path}/@{country}.svg)"; &.flag-icon-squared { background-image: ~"url(@{flag-icon-css-path}@{flag-icon-square-path}/@{country}.svg)"; } } .generate-icons(@n, (@i + 1)); } ```

kerem closed this issue

2026-03-03 14:35:07 +03:00

kerem commented

2026-03-03 14:35:08 +03:00

Author

Owner

@lipis commented on GitHub (Jun 8, 2016):

It's easier to maintain, sort, add, remove, check, etc...

@lipis commented on GitHub (Jun 8, 2016): It's easier to maintain, sort, add, remove, check, etc...

kerem commented

2026-03-03 14:35:08 +03:00

Author

Owner

@lipis commented on GitHub (Jun 8, 2016):

Also multi-cursor is your friend..

@lipis commented on GitHub (Jun 8, 2016): Also [multi-cursor](https://www.sublimetext.com/) is your friend..

kerem commented

2026-03-03 14:35:08 +03:00

Author

Owner

@felixvictor commented on GitHub (Jun 8, 2016):

Just an idea ;-)

@felixvictor commented on GitHub (Jun 8, 2016): Just an idea ;-)

kerem commented

2026-03-03 14:35:09 +03:00

Author

Owner

@lipis commented on GitHub (Jun 8, 2016):

So what do you think about this idea after the answer?

@lipis commented on GitHub (Jun 8, 2016): So what do you think about this idea after the answer?

kerem commented

2026-03-03 14:35:09 +03:00

Author

Owner

@tomlutzenberger commented on GitHub (Jun 8, 2016):

I partially agree with @felixvictor, except I would just loop the list and call the mixin.

@tomlutzenberger commented on GitHub (Jun 8, 2016): I partially agree with @felixvictor, except I would just loop the list and call the mixin.

kerem commented

2026-03-03 14:35:09 +03:00

Author

Owner

@felixvictor commented on GitHub (Jun 8, 2016):

Sorry, @lipis, I don't understand your question.

@felixvictor commented on GitHub (Jun 8, 2016): Sorry, @lipis, I don't understand your question.

kerem commented

2026-03-03 14:35:09 +03:00

Author

Owner

@lipis commented on GitHub (Jun 13, 2016):