Сергей delphinpro

$val: 0.01;

font-size: $val * 1vw;

$size: 36px;
border-radius: calc(#{($size/2) / $size});

$size: 36px;
$result: ($size/2) / $size;
border-radius: calc(#{$result});

$size: 36px;
border-radius: calc((#{$size}/2) / #{$size});

$size: 36px;
border-radius: (($size/2) / $size);

$colors: {
  1: #333,
  5: #111,
  100: #222,
}

@each $index, $color in $colors {
  #var#{$index} {
    color: $color;
  }
}

src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'); 
src: url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'),
     url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

$font-size: 16px;

@function rem($px) {
  @return ($px / $font-size) + rem;
}

:root {
  --font-size: #{$font-size};
}

opechatka
.soc {
}

opechatka .soc {
}

{
  opechatka
  display: flex;
}

{
  opechatka: 10px;
  display: flex;
}

.class1, .class2 {
    &.subclass {
        color: #CCC;
    }
}

Вложенных массивов же Sass не знает? В доке не нашёл.

$text_sizes: (
    s:   ( s:20px, m:48px, l:100px ),
    m:   ( s:24px, m:56px, l:114px ),
    l:   ( s:28px, m:68px, l:138px ),
    xl:  ( s:32px, m:74px, l:154px ),
    xxl: ( s:36px, m:88px, l:184px ),
);

@each $size, $def in $text_sizes {
    .text_size_#{$size} {
        @each $word_size, $word_width in $def {
            .text__word_width_#{$word_size} {
                width: $word_width;
            }
        }
    }
}