Added comments for each function.

pull/60/head
Lasse S. Haslev 9 years ago
parent fe2c0e74b6
commit be264c2857

@ -1,4 +1,5 @@
// Functions for fixing unicode characters
// Functions for fixing unicode characters see link below if any questions
// https://github.com/sass/sass/issues/1395#issuecomment-57658736
@function unicode($str){
@return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
}

@ -1,34 +1,64 @@
// Mixin for handle rotation of degrees
// Mixin for handle fallback support for transform-rotation
// We use it to rotate the degrees of the wind icon
@mixin wind-rotate($degrees) {
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
// Function for printing out classes for weather icons
// Function for outputing all classes for weather icons
@mixin icons($collection) {
// Get the length of collection and store it in a variable for reusing
$length: length($collection);
// Loop throug all the variables in collection
@for $i from 0 to $length {
// Get the current collection item
$tmp: nth($collection, $i+1);
// Get the class name from the variable collection
$name: nth($tmp, 1);
// Get the value of the value collection
$val: nth($tmp, 2);
// Output the content based on the variables in the collection
.#{$weather-icons-prefix}-#{$name}:before {
// Output the unicode character through the unicode function.
// For more information see the partials/_functions.scss
content:unicode($val);
}
}
}
// Create all rotations based on steps
// Output all the rotation classes based on the step and how long we should go.
// $step How big of a step should we take between each degree
// $max How far should we go about this degree
@mixin wind-rotations($step,$max) {
// Get how many classes we should make based on the input
$length: $max/$step;
// Loop through all the steps to output the classes
@for $i from 0 to $length+1 {
// Calculate what is the next step based on the step and how many times the loop has run
$currStep: $i*$step;
// Print out the echo
.#{$weather-icons-prefix}-wind-default._#{$currStep}-deg {
// We use the wind rotate mixin for this
@include wind-rotate(#{$currStep}deg);
}
}
}

@ -4,8 +4,14 @@ $WeatherIconVersion: "1.3.0";
$weather-icons-prefix: wi;
$weather-icons-font-family: weathericons;
// Glyph Names
// Create a collection of all the names and variables to use in a loop later on.
// Note that the unicode character should be written without the "\" we adds that later
// Example: "\f000" should be "f000" and we output the rest.
// For more information see "partials/functions.scss"
$collection:
// Glyph Names
("day-cloudy-gusts", "f000")
("day-cloudy-windy", "f001")
("day-cloudy", "f002")

Loading…
Cancel
Save