@mixin colour($name, $hex, $device: "") {
    %#{$device}text-#{"" + $name} {
        color: #{$hex};
    }

    %#{$device}hover-text-#{"" + $name}:hover {
        color: #{$hex};
    }

    @if $classes {
        .#{$device}text-#{"" + $name} {
            @extend %#{$device}text-#{"" + $name};
        }

        .#{$device}hover-text-#{"" + $name}:hover {
            @extend %#{$device}hover-text-#{"" + $name}:hover;
        }
    }
}

@each $name, $hex in $colours {
    @include colour($name, $hex);
}

@each $device, $pixels in $devices {
    @include media($device) {
        @each $name, $hex in $colours {
            @include colour($name, $hex, $device + "-");
        }
    }
}

@include mobile {
    @each $name, $hex in $colours {
        @include colour($name, $hex, "mobile-");
    }
}