css-atoms/src/less/radius-atom.less

A legal way of doing inline css

.radius(@list, @separator) {
    .loop(@index) when (@index > 0) {
        @pair: extract(@list, @index);
        @key: extract(@pair, 1);
        @value: extract(@pair, 2);
        @important-flag: e(extract(@pair, 3));

        .radius@{separator}@{key} {
            border-radius: @value @important-flag;
        }

        .radius-top@{separator}@{key} {
            border-radius: @value @value 0 0 @important-flag;
        }

        .radius-right@{separator}@{key} {
            border-radius: 0 @value @value 0 @important-flag;
        }

        .radius-bottom@{separator}@{key} {
            border-radius: 0 0 @value @value @important-flag;
        }

        .radius-left@{separator}@{key} {
            border-radius: @value 0 0 @value @important-flag;
        }

        .loop(@index - 1);
    }

    .loop(length(@list));

    .radius@{separator}circle {
        border-radius: 50%;
    }
}

.radius(@radius-list, @radius-separator);