Cardinal wind directions

[quasipickle]

I had 2 problems with the wind direction icons:

1. I don't deal in degees, I deal in cardinal directions (N, SSE, etc)
2. There are no exact matches in degrees, to all cardinal points

So I've created a little mixin, .wind-direction. The mixin will create all 16 cardinal points, and their inverse classes in case people are backwards:

.wi-wind-default{
    .wind-direction('n';    's';    0);
    .wind-direction('nne';  'ssw';  1);
    .wind-direction('ne';   'sw';   2);
    .wind-direction('ene';  'wsw';  3);
    .wind-direction('e';    'w';    4);
    .wind-direction('ese';  'wnw';  5);
    .wind-direction('se';   'nw';   6);
    .wind-direction('see';  'nnw';  7);
}

/* Wind direction mix-in */
.wind-direction(@title;@opposite;@slice){
    @rotation:          360deg/16 * @slice;
    @opposite_rotation: 360deg/16 * (@slice + 8);
    @escaped_title:     e(@title);
    @escaped_opposite:  e(@opposite);

    &._@{escaped_title},
    &._@{escaped_opposite}-inverse{
        .wind-rotate(@rotation);
    }

    &._@{escaped_opposite},
    &._@{escaped_title}-inverse{
        .wind-rotate(@opposite_rotation);
    }
}
/* Included .wind-rotate from the project LESS, as I'm not compiling from your LESS files */
.wind-rotate(@degrees){
    -webkit-transform: rotate(@degrees);
    -moz-transform: rotate(@degrees);
    -ms-transform: rotate(@degrees);
    -o-transform: rotate(@degrees);
    transform: rotate(@degrees);
}

The CSS it generates looks like:

.wi-wind-default._n,
.wi-wind-default._s-inverse {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}
.wi-wind-default._s,
.wi-wind-default._n-inverse {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
.wi-wind-default._nne,
.wi-wind-default._ssw-inverse {
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  -ms-transform: rotate(22.5deg);
  -o-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}
.wi-wind-default._ssw,
.wi-wind-default._nne-inverse {
  -webkit-transform: rotate(202.5deg);
  -moz-transform: rotate(202.5deg);
  -ms-transform: rotate(202.5deg);
  -o-transform: rotate(202.5deg);
  transform: rotate(202.5deg);
}

I'm happy to modify and submit this as a pull request if you're interested.

[frandevel]

Very nice. This will also be useful for me. Thanks a lot

[bakman2]

Is it correct that the generated output is missing something ? (i am not using less, can't generate it). Cardinal is the way to go indeed. thanks for this.

edit got it, online converter did it.

[erikflowers]

There will be aliases for these, as well as 360 single degree icon rotation classes.

Essentially an alias for every 22.5 degrees (rounded to 23 as CSS can't do decimal) of the directions

due out this week