timproDev/scss-structure.md

## scss-structure.md

      
    Raw
  

              scss-structure.md
            
          
    SCSS Structure


Template for scss files

//////////////////////
/// BLOCK__ELEMENT ///
//////////////////////

.wrapper {}

//////////////////
/// MODIFIERS ////
//////////////////

.wrapper {
	&.modicifation-class {
		// code here...
	}
}

//////////////
/// THEME ////
//////////////

.wrapper {
	&.theme-class {
		// code here...
	}
}

/////////////////////
/// MEDIA QUERIES ///
/////////////////////

@media #{$medium-only} {}
@media #{$small-only} {}

//////////////////////////////////////////////////////////////////////////////////////
//////////////////////////IE10+ specific styles go here //////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////
// NOTES: @extend is not supported within {media} ////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}

////////////////////////
/// IE MEDIA QUERIES ///
////////////////////////

@media only screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    @media only screen and (max-width: 1024px) and (min-width: 641px) {}
    @media only screen and (max-width: 640px) {}
}