119 lines
2.8 KiB
SCSS
119 lines
2.8 KiB
SCSS
@use "sass:math";
|
|
@use "sass:string";
|
|
|
|
|
|
// Clamp-калькулятор
|
|
$fluid-min-vw: 375px !default;
|
|
$fluid-max-vw: 1280px !default;
|
|
$fluid-base-font-size: 16px !default;
|
|
|
|
@function round-to($number, $digits: 4) {
|
|
$factor: 1;
|
|
@if $digits > 0 {
|
|
@for $i from 1 through $digits {
|
|
$factor: $factor * 10;
|
|
}
|
|
}
|
|
@return math.div(math.round($number * $factor), $factor);
|
|
}
|
|
|
|
@function to-rem($value, $base-font-size: $fluid-base-font-size) {
|
|
@return math.div($value, $base-font-size) * 1rem;
|
|
}
|
|
|
|
@function fluid-clamp($min-size,
|
|
$max-size,
|
|
$min-vw: $fluid-min-vw,
|
|
$max-vw: $fluid-max-vw,
|
|
$output: px,
|
|
$base-font-size: $fluid-base-font-size,
|
|
$digits: 4) {
|
|
$slope: math.div($max-size - $min-size, $max-vw - $min-vw);
|
|
$intercept: $min-size - $slope * $min-vw;
|
|
$vw-value: $slope * 100vw;
|
|
|
|
@if $output == rem {
|
|
$min-size: round-to(to-rem($min-size, $base-font-size), $digits);
|
|
$max-size: round-to(to-rem($max-size, $base-font-size), $digits);
|
|
$intercept: round-to(to-rem($intercept, $base-font-size), $digits);
|
|
$vw-value: round-to($vw-value, $digits);
|
|
}
|
|
@else if $output == px {
|
|
$min-size: round-to($min-size, $digits);
|
|
$max-size: round-to($max-size, $digits);
|
|
$intercept: round-to($intercept, $digits);
|
|
$vw-value: round-to($vw-value, $digits);
|
|
}
|
|
@else {
|
|
@error "$output должен быть px или rem.";
|
|
}
|
|
|
|
$clamp-min: $min-size;
|
|
$clamp-max: $max-size;
|
|
|
|
@if $min-size > $max-size {
|
|
$clamp-min: $max-size;
|
|
$clamp-max: $min-size;
|
|
}
|
|
|
|
$preferred: null;
|
|
|
|
@if $vw-value < 0 {
|
|
$preferred: "#{$intercept} - #{$vw-value * -1}";
|
|
}
|
|
@else if $vw-value > 0 {
|
|
$preferred: "#{$intercept} + #{$vw-value}";
|
|
}
|
|
@else {
|
|
$preferred: "#{$intercept}";
|
|
}
|
|
|
|
@return string.unquote("clamp(#{$clamp-min}, #{$preferred}, #{$clamp-max})");
|
|
}
|
|
|
|
|
|
// Расчет ширины слайдов в слайдере
|
|
@function slide-size($slides, $gap) {
|
|
@if not math.is-unitless($slides) {
|
|
@error "$slides должен быть числом без единицы измерения. Например: 2.25";
|
|
}
|
|
|
|
@if $slides <= 0 {
|
|
@error "$slides должен быть больше 0.";
|
|
}
|
|
|
|
$gap-total: $gap * ($slides - 1);
|
|
|
|
@return string.unquote("calc((100% - #{$gap-total}) / #{$slides})");
|
|
}
|
|
|
|
|
|
// Подключение шрифтов
|
|
@mixin font($name, $style, $weight, $url) {
|
|
@font-face {
|
|
font-family: $name;
|
|
font-style: $style;
|
|
font-weight: $weight;
|
|
src: url($url) format("woff2");
|
|
}
|
|
}
|
|
|
|
|
|
// Медиа-запросы
|
|
@mixin media-min($min) {
|
|
@media (min-width: $min) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-max($max) {
|
|
@media (max-width: #{$max - 0.02px}) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@mixin media-min-max($min, $max) {
|
|
@media (min-width: $min) and (max-width: #{$max - 0.02px}) {
|
|
@content;
|
|
}
|
|
} |