LESS vs Sass: grid

grid.less

@desktopColumnWidth: 60px;
@tabletColumnWidth: 95px;
@gutter: 10px;

.desktop-column (@theColumn: 1) {
    width: (@desktopColumnWidth * @theColumn) + (@gutter * (@theColumn - 1) * 2);
}
.tablet-column (@theColumn: 1) {
    width: (@tabletColumnWidth * @theColumn) + (@gutter * (@theColumn - 1) * 2);
}

@media screen and (min-width: 980px) {
    .desktop-1 { .desktop-column(1); }
    .desktop-2 { .desktop-column(2); }
    .desktop-3 { .desktop-column(3); }
    .desktop-4 { .desktop-column(4); }
    .desktop-5 { .desktop-column(5); }
    .desktop-6 { .desktop-column(6); }
    .desktop-7 { .desktop-column(7); }
    .desktop-8 { .desktop-column(8); }
    .desktop-9 { .desktop-column(9); }
    .desktop-10 { .desktop-column(10); }
    .desktop-11 { .desktop-column(11); }
    .desktop-12 { .desktop-column(12); }
}

@media screen and (min-width: 690px) and (max-width: 979px) {
    .tablet-1 { .tablet-column(1); }
    .tablet-2 { .tablet-column(2); }
    .tablet-3 { .tablet-column(3); }
    .tablet-4 { .tablet-column(4); }
    .tablet-5 { .tablet-column(5); }
    .tablet-6 { .tablet-column(6); }
}

grid.scss

@mixin grid ($prefix, $gridWidth, $columnCount, $columnWidth, $gutterWidth) {
    @for $columns from 1 through $columnCount {
        .#{$prefix}#{$columns} { width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)); }
    }
}

@media screen and (min-width: 980px) {
    @include grid('desktop-', 960px, 12, 60px, 10px);
}

@media screen and (min-width: 690px) and (max-width: 979px) {
    @include grid('tablet-', 690px, 6, 95px, 10px);
}