SASS Property Format

property-format.scss

.parent-selector {
    @extend %pattern;                // Extend a placeholder
    @extend %another-pattern;        // Extend another placeholder

    @include simple-mixin();         // Include a single line mixin
    @include another-simple-mixin(); // Include another single line mixin

    position: relative;              // Positioning
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    float: left;
    clear: left;

    display: block;                  // Display & box model
    overflow: hidden;
    box-sizing: border-box;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background-image: none;

    color: #000;                     // Colour
    background-color: #fff;

    font-family: sans-serif;         // Text
    font-size: 1em;
    line-height: 1.5;
    text-align: left;
    text-indent: 0;
    letter-spacing: auto;
    word-spacing: auto;
    white-space: auto;

    cursor: pointer;                 // Other
    transition: all 0.2s;
    
    @include block-mixin() {         // Include a mixin with content
        // Mixin @content
    }

    @include another-block-mixin() { // Include another mixin with content
        // Mixin @content
    }

    &:hover, &:focus {               // Interaction pseudo selectors
        // Hover and focus styles
    }

    &:first-child {                  // Pseudo selectors
        // First child styles
    }

    &:before, &:after {              // Pseudo elements
        content: '';
    }

    .child-selector {                // Child elements
        // Repeat above format
    }
}