Концепция

• View / Представление
  — набор стилей характеризующих сущность пользовательского интерфейса (в определённом Состоянии);
• State / Состояние
  — условия влияющие на Представление;
• Mode / Режим
  — множество Состояний одной сущности.

Пример простой

// set modes
@each $skinName, $skinColor in (
	( 'green',   $green ), 
	( 'blue',    $blue )
	) {

	.button_color_#{ $skinName } { // set state «link»
		@include skinView($skinName, 'link', $skinColor); // call view
		}

	.button_color_#{ $skinName }:hover:not(.button_disabled) { // set state «hover»
		@include skinView($skinName, 'hover', $skinColor); // call view
		}

	.button_color_#{ $skinName }:active:not(.button_disabled) { // set state «active»
		@include skinView($skinName, 'active', $skinColor); // call view
		}
	}

// set views
@mixin skinView($skin, $state, $color) {
	& {
		background-color:
			if( $state == 'link',   $color,               null )
			if( $state == 'hover',  lighten($color, 10%), null )
			if( $state == 'active', darken($color,  10%), null );
		}
	
	&:before {
		border-bottom-color:
			if( $state == 'link',   darken($color, 10%), null )
			if( $state == 'hover',  $color,              null )
			if( $state == 'active', darken($color, 20%), null );
		}

	.button__text {
		color:
			if( $state == 'link',   #fff,                 null )
			if( $state == 'hover',  lighten($color, 45%), null )
			if( $state == 'active', lighten($color, 40%), null );
		}
	}

Пример посложнее

И каждый из них может быть как «широким», так и «узким» в зависимости от различных условий.

Схожая зависимость присуща и другим контентным блокам. Контентная область сниппета кода на большом экране узкая, его ширина составляет 640px, а на маленьком — узкая, но другая.

• wide / широкий
  широкий на большом экране, широкий на маленьком;
• tricky / хитрый
  узкий на большом экране, широкий на маленьком;
• slim / узкий
  узкий на большом экране, узкий на маленком.

// set modes
@mixin slimContent($mode) {

	// set states for desktop and tablet
	@include device(desktop, tablet) {
		@include screen_m-- {
			@include slimContent__view($mode, 'screenBig'); // call view
			}
		
		@include screen_--s {
			@include slimContent__view($mode, 'screenSmall'); // call view
			}
		}

	// set state for phone
	@include device(phone) {
		@include slimContent__view($mode, 'screenSmall'); // call view
		}
	}

// set views
@mixin slimContent__view($mode, $screenSize) {
	@if $mode == 'wide' {
		@if $screenSize == 'screenBig' {
			@include slimContent__view-helper(padding, 0); // call view-helper
			}

		@if $screenSize == 'screenSmall' {
			@include slimContent__view-helper(padding, 0); // call view-helper
			}
		}

	@if $mode == 'tricky' {
		@if $screenSize == 'screenBig' {
			@include slimContent__view-helper(margin, auto); // call view-helper
			}

		@if $screenSize == 'screenSmall' {
			@include slimContent__view-helper(margin, 0); // call view-helper
			}
		}

	@if $mode == 'slim' {
		@if $screenSize == 'screenBig' {
			@include slimContent__view-helper(padding, auto); // call view-helper
			}

		@if $screenSize == 'screenSmall' {
			@include slimContent__view-helper(padding, $d); // call view-helper
			}
		}
	}

// view-helper
@mixin slimContent__view-helper($property, $value) {
	@include device(desktop, tablet, phone) {
		
		@if $value == 'auto' {
			#{$property}-left: calc((100% - #{$contentWidth})*(1/3));
			#{$property}-right: calc((100% - #{$contentWidth})*(2/3));
			}

		@else {
			@if $value != 0 {
				#{$property}-left: $value;
				#{$property}-right: $value;
				}
			}
		}
	
	@include device(ie) {
		@if $value == 'auto' {
			#{$property}-left: 3*$d;
			#{$property}-right: 6*$d;
			}

		@else {
			@if $value != 0 {
				#{$property}-left: $value;
				#{$property}-right: $value;
				}
			}
		}
	}

.ui-snippet {
	@include slimContent(slim);
	@include ritm(1*$v);
	overflow-x: auto;
	}

.ui-image {
	&.ui-image_wide {
		@include slimContent(wide);
		}

	&.ui-image_narrow {
		@include slimContent(tricky);
		}
	}

.btn_color_blue {
  background-color: #1aa2e6;
}
.btn_color_blue:before {
  border-bottom-color: #1481b8;
}
.btn_color_blue .btn__text {
  color: #fff;
}

.btn_color_blue:hover:not(.btn_disabled) {
  background-color: #47b4eb;
}
.btn_color_blue:hover:not(.btn_disabled):before {
  border-bottom-color: #1aa2e6;
}
.btn_color_blue:hover:not(.btn_disabled) .btn__text {
  color: #e8f6fc;
}

.btn_color_blue:active:not(.btn_disabled) {
  background-color: #1481b8;
}
.btn_color_blue:active:not(.btn_disabled):before {
  border-bottom-color: #0f618a;
}
.btn_color_blue:active:not(.btn_disabled) .btn__text {
  color: #d1ecfa;
}

@media screen and (min-width: 1240px) {
  pre.ui-code {
    padding-left: calc((100% - 640px)*(1/3));
    padding-right: calc((100% - 640px)*(2/3));
  }
}
@media screen and (max-width: 1239px) {
  pre.ui-code {
    padding-left: 24px;
    padding-right: 24px;
  }
}
// селектор по тегу используется, так как существует инлайновый span.ui-code

@media screen and (min-width: 1240px) {
  .ui-img.ui-img_narrow {
    margin-left: calc((100% - 640px)*(1/3));
    margin-right: calc((100% - 640px)*(2/3));
  }
}

• устройств 4
• контентных блоков около 20
• каждый контентный блок «внутри» конкретного устройства имеет 1–2 состояния