سلام

من یک پروژه آماده دانلود کردم وقتی در vscode با استفاده از Live sccs Compile فایل ها رو تبدیل میکنم در بخشی از فایلها برای media مقادیری با استفاده از متغییر های تعریف شده و mixin به فایلهای css اضافه میشه که به نظر من اشتباه هست و تا به حال من همچین دستوری ندیدم یعنی به عنوان نام کلاس قرار میده. لطفاً راهنمایی کنید اشکالش کجاست؟

بخشی از خروجی:


.d-f {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}



.d-if {

  display: -webkit-inline-box;

  display: -ms-inline-flexbox;

  display: inline-flex;

}



@media screen and (min-width: 1440px) {  .d-f\@xl\+ {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

  }

  .d-if\@xl\+ {

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

  }

}


متغییر ها:


// ---------------------------------------------------------

// @Breakpoints

// ---------------------------------------------------------



$breakpoint-xl : 1440px;

$breakpoint-lg : 1200px;

$breakpoint-md : 992px;

$breakpoint-sm : 768px;

$breakpoint-xs : 0;



$breakpoints: (

  "xl\\+" "screen and (min-width: #{$breakpoint-xl})",

  "lg\\+" "screen and (min-width: #{$breakpoint-lg})",

  "md\\+" "screen and (min-width: #{$breakpoint-md})",

  "sm\\+" "screen and (min-width: #{$breakpoint-sm})",

  "xs\\+" "screen and (min-width: #{$breakpoint-xs})",



  "xl-" "screen and (max-width: #{$breakpoint-xl - 1px})",

  "lg-" "screen and (max-width: #{$breakpoint-lg - 1px})",

  "md-" "screen and (max-width: #{$breakpoint-md - 1px})",

  "sm-" "screen and (max-width: #{$breakpoint-sm - 1px})",



  "lg" "screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})",

  "md" "screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})",

  "sm" "screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})",

);



// ---------------------------------------------------------

// @Responsive Suffix Generator

// ---------------------------------------------------------



// Mixin used to generate responsive suffixes for classes (i.e. m-10@sm+).





@mixin generateResponsive() {

  @each $breakpoint in $breakpoints {

    $breakpointAlias     : nth($breakpoint, 1) !global;

    $breakpointCondition : nth($breakpoint, 2);



    @include mediaQueryCondition($breakpointAlias) {

      @content;

    }



    $breakpointAlias: null !global;

  }

}


// ---------------------------------------------------------

// @Media Queries Generator

// ---------------------------------------------------------



// Mixin used to generate responsive versions of css rules.



@mixin mediaQueryCondition($mq) {

  $breakpointFound: false;



  @each $breakpoint in $breakpoints {

    $alias: nth($breakpoint, 1);

    $condition: nth($breakpoint, 2);



    @if $mq == $alias and $condition {

      $breakpointFound: true;



      @media #{$condition} {

        @content;

      }

    }

  }



  @if $breakpointFound == false {

    @warn "Oops! Breakpoint ‘#{$mq}’ does not exist \:";

  }

}



// ---------------------------------------------------------

// @TOC

// ---------------------------------------------------------



// + @Variables

// + @Flex Wrap

// + @Flex Direction

// + @Flex

// + @Flex Basis

// + @Flex Grow

// + @Flex Shrink

// + @Flex Order



// ---------------------------------------------------------

// @Variables

// ---------------------------------------------------------



$responsive: true;



// ---------------------------------------------------------

// @Display

// ---------------------------------------------------------



.d-f     { display: flex; }

.d-if    { display: inline-flex; }



@if ($responsive == true) {

  @include generateResponsive() {

    .d-f\@#{$breakpointAlias}     { display: flex; }

    .d-if\@#{$breakpointAlias}    { display: inline-flex; }

  }

}



// ---------------------------------------------------------

// @Flex Wrap

// ---------------------------------------------------------



.fxw-w   { flex-wrap: wrap; }

.fxw-wr  { flex-wrap: wrap-reverse; }

.fxw-nw  { flex-wrap: nowrap; }



@if ($responsive == true) {

  @include generateResponsive() {

    .fxw-w\@#{$breakpointAlias}   { flex-wrap: wrap; }

    .fxw-wr\@#{$breakpointAlias}  { flex-wrap: wrap-reverse; }

    .fxw-nw\@#{$breakpointAlias}  { flex-wrap: nowrap; }

  }

}



// ---------------------------------------------------------

// @Flex Direction

// ---------------------------------------------------------



.fxd-c   { flex-direction: column; }

.fxd-cr  { flex-direction: column-reverse; }

.fxd-r   { flex-direction: row; }

.fxd-rr  { flex-direction: row-reverse; }



@if ($responsive == true) {

  @include generateResponsive() {

    .fxd-c\@#{$breakpointAlias}   { flex-direction: column; }

    .fxd-cr\@#{$breakpointAlias}  { flex-direction: column-reverse; }

    .fxd-r\@#{$breakpointAlias}   { flex-direction: row; }

    .fxd-rr\@#{$breakpointAlias}  { flex-direction: row-reverse; }

  }

}



// ---------------------------------------------------------

// @Align Items

// ---------------------------------------------------------



.ai-fs   { align-items: flex-start; }

.ai-fe   { align-items: flex-end; }

.ai-c    { align-items: center; }

.ai-b    { align-items: baseline; }

.ai-s    { align-items: stretch; }



@if ($responsive == true) {

  @include generateResponsive() {

    .ai-fs\@#{$breakpointAlias}   { align-items: flex-start; }

    .ai-fe\@#{$breakpointAlias}   { align-items: flex-end; }

    .ai-c\@#{$breakpointAlias}    { align-items: center; }

    .ai-b\@#{$breakpointAlias}    { align-items: baseline; }

    .ai-s\@#{$breakpointAlias}    { align-items: stretch; }

  }

}



// ---------------------------------------------------------

// @Align Self

// ---------------------------------------------------------



.as-fs   { align-self: flex-start; }

.as-fe   { align-self: flex-end; }

.as-c    { align-self: center; }

.as-b    { align-self: baseline; }

.as-s    { align-self: stretch; }



@if ($responsive == true) {

  @include generateResponsive() {

    .as-fs\@#{$breakpointAlias}   { align-self: flex-start; }

    .as-fe\@#{$breakpointAlias}   { align-self: flex-end; }

    .as-c\@#{$breakpointAlias}    { align-self: center; }

    .as-b\@#{$breakpointAlias}    { align-self: baseline; }

    .as-s\@#{$breakpointAlias}    { align-self: stretch; }

  }

}



// ---------------------------------------------------------

// @Align Content

// ---------------------------------------------------------



.ac-fs   { align-content: flex-start; }

.ac-fe   { align-content: flex-end; }

.ac-c    { align-content: center; }

.ac-s    { align-content: stretch; }

.ac-sb   { align-content: space-between; }

.ac-sa   { align-content: space-around; }



@if ($responsive == true) {

  @include generateResponsive() {

    .ac-fs\@#{$breakpointAlias}   { align-content: flex-start; }

    .ac-fe\@#{$breakpointAlias}   { align-content: flex-end; }

    .ac-c\@#{$breakpointAlias}    { align-content: center; }

    .ac-s\@#{$breakpointAlias}    { align-content: stretch; }

    .ac-sb\@#{$breakpointAlias}   { align-content: space-between; }

    .ac-sa\@#{$breakpointAlias}   { align-content: space-around; }

  }

}



// ---------------------------------------------------------

// @Justify Content

// ---------------------------------------------------------



.jc-fs   { justify-content: flex-start; }

.jc-fe   { justify-content: flex-end; }

.jc-c    { justify-content: center; }

.jc-sb   { justify-content: space-between; }

.jc-sa   { justify-content: space-around; }



@if ($responsive == true) {

  @include generateResponsive() {

    .jc-fs\@#{$breakpointAlias}   { justify-content: flex-start; }

    .jc-fe\@#{$breakpointAlias}   { justify-content: flex-end; }

    .jc-c\@#{$breakpointAlias}    { justify-content: center; }

    .jc-sb\@#{$breakpointAlias}   { justify-content: space-between; }

    .jc-sa\@#{$breakpointAlias}   { justify-content: space-around; }

  }

}



// ---------------------------------------------------------

// @Flex

// ---------------------------------------------------------



.fx-n    { flex: none; }

.fx-1    { flex: 1; }



@if ($responsive == true) {

  @include generateResponsive() {

    .fx-n\@#{$breakpointAlias}    { flex: none; }

    .fx-1\@#{$breakpointAlias}    { flex: 1; }

  }

}



// ---------------------------------------------------------

// @Flex Basis

// ---------------------------------------------------------



.fxb-a   { flex-basis: auto; }

.fxb-0   { flex-basis: 0; }



@if ($responsive == true) {

  @include generateResponsive() {

    .fxb-a\@#{$breakpointAlias}   { flex-basis: auto; }

    .fxb-0\@#{$breakpointAlias}   { flex-basis: 0; }

  }

}



// ---------------------------------------------------------

// @Flex Grow

// ---------------------------------------------------------



.fxg-1   { flex-grow: 1; }

.fxg-0   { flex-grow: 0; }



@if ($responsive == true) {

  @include generateResponsive() {

    .fxg-1\@#{$breakpointAlias}   { flex-grow: 1; }

    .fxg-0\@#{$breakpointAlias}   { flex-grow: 0; }

  }

}



// ---------------------------------------------------------

// @Flex Shrink

// ---------------------------------------------------------



.fxs-1   { flex-shrink: 1; }

.fxs-0   { flex-shrink: 0; }



@if ($responsive == true) {

  @include generateResponsive() {

    .fxs-1\@#{$breakpointAlias}   { flex-shrink: 1; }

    .fxs-0\@#{$breakpointAlias}   { flex-shrink: 0; }

  }

}



// ---------------------------------------------------------

// @Flex Order

// ---------------------------------------------------------



@for $i from 0 through 12 {

  .ord-#{$i} { order: $i; }



  @if ($responsive == true) {

    @include generateResponsive() {

      .ord-#{$i}\@#{$breakpointAlias} { order: $i; }

    }

  }

}