Миксины

style.scss

@mixin clearfix() {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}


//Базовый адаптивный контейнер
@mixin container-fluid {
  width: auto;
  @include mobile-m-up {
    padding-left: 3%;
    padding-right: 3%;
  };
  @include tablet-up {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  @include desktop-up {
    width: 1110px;
  }
}
@mixin mobile-m-up {
  @media (min-width: 375px) { @content; }
}
@mixin mobile-l-up {
  @media (min-width: 425px) { @content; }
}
@mixin tablet-up {
  @media (min-width: 660px) { @content; }
}
@mixin desktop-up {
  @media (min-width: 1140px) { @content; }
}


//Миксин для шрифта
@mixin font ($font-size: 16, $font-weight: 400, $font-family: $font-roboto) {
  font-size: $font-size + px;
  font-weight: $font-weight;
  font-family: $font-family;
}

@mixin responsiveSize($property, $smallSize, $bigSize, $smallView, $bigView){
	//http://fvsch.com/code/css-locks/
	// y = m * x + b - уравнение прямой, где:
	// y - вертикальная ось с нужными нам шрифтами,
	// x - горизонтальная ось с шириной экрана (вьюпорта),
	// b - промежуток между пересечением графика (в данном случае это
	// функция прямой линии) с вертикальной осью x,
	// m - наклон прямой (степерь прироста координаты y при
	// каждом увеличении вьюпорта на 1px);

	$m: ($bigSize - $smallSize) / ($bigView - $smallView);
	$b: $smallSize - ($m * $smallView);

	@media only screen and (min-width: $smallView){
		#{$property}: calc(#{$m} * 100vw + #{$b});
	}

	@media only screen and (min-width: $bigView){
		#{$property}: $bigSize;
	}
}