General/M2 Less Formatting/Content Structure

less-format.less

//
// Magento_Review
// --------------------------------------------------


//
// Variables
// ------------------------------------------

@helpful-variable-margin: 10px 0 40px 0;

@rating-box-height: 22px;
@rating-box-width: 106px;

@rating-icon-count: 5;
@rating-icon-content: @icon-star;
@rating-icon-content-empty: @icon-star-empty;
@rating-icon-size: 18px;
@rating-icon-color: @brand-primary;
@rating-icon-color-empty: #000;
@rating-icon-spacing: 2px;


//
// Utilities
// ------------------------------------------

// I am a helpful utility mixin for this module
.lib-helpful-mixin(@helpful-variable: 20px) {

}


//
// Common
// ------------------------------------------

// The first big piece of important CSS rules (i.e. .product-essential)
.container {
   display: inline-block;

    .selector {
        display: inline-block;

        &:before {
            color: @rating-icon-color-empty;
        }

        & > span {
            display: block;

            &:before {
                color: @rating-icon-color;
            }

            span {
                &:extend(.sr-only all);
            }
        }
    }
}

.container-1 {

}

.container-2 {

}

// Meaningful Chunk of CSS Styles
.another-big-container {

}

//
// Desktop
// ------------------------------------------

@media screen and (min-width: (@screen-md + 1)) {

}


//
// Mobile
// ------------------------------------------

@media screen and (max-width: @screen-md) {

}