Create easy CSS-based alphabetical order with SASS and FlexBox

_Order.sass

// Specific the element (for sample "div" or "li")
$element: null !default;

// Define the Attribute (for sample <div data-ao="YourName">), "ao" is "alphabetical order"
$attribute: data-ao !default;

// Define the characters (with lower- and uppercase)
$characters: (
	(a, A), (b, B), (c, C), (d, D), (e, E), (f, F), (g, G), (h, H), (i, I), (j, J), (k, K), (l, L), (m, M), (n, N), (o, O), (p, P), (q, Q), (r, R), (s, S), (t, T), (u, U), (v, V), (w, W), (x, X), (y, Y), (z, Z)
);

@each $lower, $upper in $characters {
	// calculate the order dynamically...
	$index:		index(($characters), ($lower, $upper));
	$folder:	$index + 100;
	$dot:		$index + 1000;
	$file:		$index + 100000;
	
	// Build the code...
	#{$element}[#{$attribute}^="F.#{$lower}"], #{$element}[#{$attribute}^="F.#{$upper}"] {
		order: $file + $dot;
	}
	
	#{$element}[#{$attribute}^="D.#{$lower}"], #{$element}[#{$attribute}^="D.#{$upper}"] {
		order: $folder + $dot;
	}
	
	#{$element}[#{$attribute}^="F#{$lower}"], #{$element}[#{$attribute}^="F#{$upper}"] {
		order: $file;
	}
	
	#{$element}[#{$attribute}^="D#{$lower}"], #{$element}[#{$attribute}^="D#{$upper}"] {
		order: $folder;
	}
	
	#{$element}[#{$attribute}^=".#{$lower}"], #{$element}[#{$attribute}^=".#{$upper}"] {
		order: $dot;
	}
	
	#{$element}[#{$attribute}^="#{$lower}"], #{$element}[#{$attribute}^="#{$upper}"] {
		order: $dot;
	}
}