Collection of prefix macros


#1

I created some macros for prefixing css. I covered some of the flexbox properties. Feel free to add more, this might be useful for others, too!

<!-- display: flex; -->

{% macro displayFlex() %} 
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
{% endmacro %}



<!-- flex: 1 1 0; -->

{% macro flex(grow, shrink, basis) %} 
    {% set value = grow ~ ' ' ~ shrink ~ ' ' ~ basis %}
    -webkit-box-flex: {{ grow }};
    -ms-flex: {{ value }};
    flex: {{ value }};
{% endmacro %}



<!-- flex-direction: row; -->

{% macro flexDirection(value) %} 
     {% if value == 'initial' or value == 'inherit' %} 
        -webkit-box-orient: {{ value }};
        -webkit-box-direction: {{ value }};
        
    {% else %}
        {% if value == 'row' or value == 'row-reverse' %}
            -webkit-box-orient: horizontal;
        {% elif value == 'column' or value == 'column-reverse' %}
            -webkit-box-orient: vertical;
        {% endif %}
        
        {% if value == 'row-reverse' or value == 'column-reverse' %}
            -webkit-box-direction: reverse;
        {% elif value == 'row' or value == 'column' %}
            -webkit-box-direction: normal;
        {% endif %}
    {% endif %}
    
    -ms-flex-direction: {{ value }};
    flex-direction: {{ value }};
{% endmacro %}



<!-- flex-wrap: wrap; -->

{% macro flexWrap(value) %} 
    -ms-flex-wrap: {{ value }};
    flex-wrap: {{ value }};
{% endmacro %}



<!-- flex-basis: 20%; -->

{% macro flexBasis(value) %} 
    -ms-flex-preferred-size: {{ value }};
    flex-basis: {{ value }};
{% endmacro %}



<!-- align-items: flex-start; -->

{% macro alignItems(value) %} 
    {% if value == 'flex-start' %}
        -webkit-box-align: start;
        -ms-flex-align: start;
    {% elif value == 'flex-end' %}
        -webkit-box-align: end;
        -ms-flex-align: end;
    {% else %}
        -webkit-box-align: {{ value }};
        -ms-flex-align: {{ value }};
    {% endif %}
    
    -webkit-align-items: {{ value }};
    align-items: {{ value }};
{% endmacro %}



<!-- justify-content: flex-start; -->

{% macro justifyContent(value) %} 
    {% if value == 'flex-start' %}
        -webkit-box-pack: start;
        -ms-flex-pack: start;
    {% elif value == 'flex-end' %}
        -webkit-box-pack: end;
        -ms-flex-pack: end;
    {% elif value == 'space-between' %}
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
    {% elif value == 'space-around' %}
        -ms-flex-pack: distribute;
    {% else %}
        -webkit-box-pack: {{ value }};
         -ms-flex-pack: {{ value }};
    {% endif %}
    
    -webkit-justify-content: {{ value }};
    justify-content: {{ value }};
{% endmacro %}