Sacrificing readability for shorter compiled code

I'm currently revisiting some code I wrote in sass when I was learning it and I came upon a particular issue. I was able to write the code in 2 ways, with the first being the more readable code and the second being the shortest code when compiled to css. I was wondering whether it's a good thing to sacrifice some readability for smaller compiled file sizes.

In the current example, option 1 takes up about 60% less characters compiled in css. At 12 colums, the first option uses ~750 less characters than the second option. This is actually pretty significant.

The example is pretty straightforward, but when extending the code readability of the sass file can become more complicated. Is it worth sacrificing this for the smaller compiled file?

Option 1

// Create all columns
@for $i from 1 through $column_amount {
  .col-#{$i}-lg, .col-#{$i}-md, .col-#{$i}-sm {
    width: $i * $col-size;
  }
}

// At medium screen and below set all large columns to 100%
@media all and (max-width: $screen-medium-max) {
  @for $i from 1 through $column_amount {
    .col-#{$i}-lg {
      width: 100%;
    }
  }
}

// At small screen and below set all medium columns to 100%
@media all and (max-width: $screen-small-max) {
  @for $i from 1 through $column_amount {
    .col-#{$i}-md {
      width: 100%;
    }
  }
}

Option 2

// Creating the columns
@for $i from 1 through $column_amount {
  .col-#{$i}-lg, .col-#{$i}-md, .col-#{$i}-sm {
    width: $i * $col-size;
  }

  // At medium screen and below set all large columns to 100%
  @media all and (max-width: $screen-medium-max) {
    .col-#{$i}-lg {
      width: 100%;
    }
  }

  // At small screen and below set all medium columns to 100%
  @media all and (max-width: $screen-small-max) {
    .col-#{$i}-md {
      width: 100%;
    }
  }
}

If any extension exists that does this for me, it'd be nice to know about it, but it won't answer the question