[Sass: right-to-left CSS] #sass #css #rtl

Sass: right-to-left CSS.scss

/*
My proposed solution to the right-to-left CSS issue for BBC Responsive World Service (UPDATED with @danscotton) -> version_2 is what we're proposing...
*/

$rtol: true;

@mixin context ($property, $value_left, $value_right) {
    @if $rtol {
        #{$property}: $value_right;
    } @else {
        #{$property}: $value_left;
    }
}

@function _($ltr: '', $rtl: '') {
    @if $rtol {
        @return $rtl;
    } @else {
        @return $ltr;
    }
}

.image_v1 {
    margin: 0 16px 0 0;
}

.image_v1 {
    float: _($ltr: left, $rtl: right);

    margin-left: _($rtl: 16px);
    margin-right: _($ltr: 16px); // downside: duplicated in compiled code

    padding-left: _($ltr: 16px);
    padding-right: _($rtl: 16px);
}

.image_v2 {
    margin-left: 8px;
    margin-right: 10px;
}

.image_v2 {
    @include context(float, left, right);
    @include context(margin-left, null, 16px);
    @include context(margin-right, 16px, null);
}

This is a nice idea, but the problem is that the function is used on the value.
What about margin-left for example, where the property has to change?

@jamesl1001 give you a shout in two seconds :-) see update above