Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// Set the desired number of columns in a variable for flexibility

$total-columns: 24;

// Create a placeholder for the grid container

%grid-container {
    width:100%;
    max-width:1000px; // adjust to your needs
    margin:0 0 1.5em; // bit of margin bottom for vertical rythm
}

// Create a placeholder for styles common to all columns

%grid {
    float:left;
    margin:0;
    padding:0 2%; // flexible gutters thanks to box-sizing:border-box
}

// Loop through all the columns and generate the correct width
// use @extend to pull in common styles

@for $i from 1 through $total-columns {
    %grid-#{$i}-of-#{$total-columns} {
        @extend %grid;
        width: ($i / $total-columns) * 100%;
    }
}

// Now make use of the placeholders with meaningful class names

.products-page {
    @extend %grid-container;
}
.products-sidebar {
    @extend %grid-8-of-24; // 1/3 of page
}
.products-list-container {
    @extend %grid-16-of-24; // 2/4 of page

    .products-list {
        @extend %grid-container; // nested grid
    }
    .product {
        @extend %grid-6-of-24; // new grid context, each product is 1/4 of container
    }
}

SassMeister-output.css

.products-page, .products-list-container .products-list {
  width: 100%;
  max-width: 1000px;
  margin: 0 0 1.5em;
}

.products-list-container .product, .products-sidebar, .products-list-container {
  float: left;
  margin: 0;
  padding: 0 2%;
}

.products-list-container .product {
  width: 25%;
}

.products-sidebar {
  width: 33.33333%;
}

.products-list-container {
  width: 66.66667%;
}