SASS Mixin ne compilant pas avec @include

Question

Je viens juste de commencer à utiliser SASS, donc je ne sais pas si j'obtiens la syntaxe correcte, mais je n'ai pas réussi à trouver la réponse à mon problème n'importe où. Je crée ma propre structure de grille que j'utiliserai pour les projets clients et j'essaie d'ajouter la classe .keep qui empêchera cette boîte/colonne de réduire/changer les largeurs quand elle est redimensionnée.

Par exemple, la classe de la colonne .box-half s'effondrera lorsque l'écran aura la largeur maximale de 768px - cela a été défini dans le point d'arrêt. Cependant, je veux ajouter .keep qui va empêcher cela. J'utilise des requêtes média en ligne pour garder tous les éléments ensemble et parce que la taille de framework.css sera négligeable.

Le code que j'ai est celui-ci.

//Breakpoint Mixins 
@mixin mq-min($min) { @media screen and (min-width: $min) { @content; } } 
@mixin mq-max($max) { @media screen and (max-width: $max) { @content; } } 
@mixin mq-min-max($min, $max) { @media screen and (min-width: $min) and (max-width: $max) { @content; } } 

// Keep Functions Mixins 
// All .keep functions are in Max-Width Breakpoints 
@mixin keep($max) { @include mq-max($max) &.keep { @content; } } 

Lorsque je tente de complile il, l'erreur que je reçois est la suivante:

Error: Invalid CSS after "...{ @content; } }": expected 1 selector or at-rule, was "{}" 

Comme je l'ai dit, je suis très nouveau pour SASS, de sorte que toute aide serait très apprécié.

code fichier entier est ici:

// Device Size Breakpoint Declarations 
$extra-large: 1800px; 
$desktop: 1200px; 
$tablet: 768px; 
$phablet: 650px; 
$mobile: 480px; 
$sml-mobile: 360px; 

//Fixed Widths 
$fixed-width: 1280px; 
$max-width: 1500px; 

// Percentage widths 
$third: 100%/3; 
$two-thirds: (100%/3)*2; 

@mixin flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } 
@mixin flex-wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } 

//Breakpoint Mixins 
@mixin mq-min($min) { @media screen and (min-width: $min) { @content; } } 
@mixin mq-max($max) { @media screen and (max-width: $max) { @content; } } 
@mixin mq-min-max($min, $max) { @media screen and (min-width: $min) and (max-width: $max) { @content; } } 

// Keep Functions Mixins 
// All .keep functions are in Max-Width Breakpoints 
@mixin keep($max) { @include mq-max($max) &.keep { @content; } } 

/* RESET */ 

body 
    padding: 0 
    margin: 0 
/* END RESET */ 

.container 
    @include flex 
    @include flex-wrap 
    justify-content: space-around 
    padding: 10px 
    &.align-left 
      justify-content: flex-start 
      -webkit-justify-content: flex-start 
    &.align-right 
      justify-content: flex-end 
      -webkit-justify-content: flex-end 
    &.align-center 
      justify-content: center 
      -webkit-justify-content: center 
    &.center-all 
      justify-content: center 
      -webkit-justify-content: center 
      align-items: center 
      -webkit-align-items: center 

.wrapper 
    @include flex 
    @include flex-wrap 
    width: 100% 
    max-width: $max-width 

.fixed-width 
    max-width: $fixed-width 
    margin: auto 

.box-10, .box-20, .box-30, .box-40, .box-60, .box-70, .box-80, .box-90, .box-sixteenth, .box-eighth, .box-quarter, .box-three-quarters, .box-third, .box-two-thirds, .box-half, .box-full, .filler 
    @include flex 
    height: 100px 
    color: #fff 
    font-family: sans-serif 
    text-transform: uppercase 
    background-color: #333 
    padding: 5px 
    align-items: center 
    justify-content: center 
    box-sizing: border-box 
    background-clip: content-box 


.filler 
    flex-grow: 10 
    background-color: #123456 

.clip 
    background-clip: content-box 

.small-mobile 
    display: inherit 
    &.no 
     @include mq-max ($sml-mobile) 
      display: none 
    &.only 
     display: inherit 
     @include mq-min (#{$sml-mobile + 1px}) 
      display: none 

.mobile 
    display: inherit 
    &.no 
     @include mq-max ($mobile) 
      display: none 
    &.only 
     @include mq-min (#{$mobile + 1px}) 
      display: none 

.phablet 
    display: inherit 
    &.no 
     @include mq-min-max (#{$mobile + 1px}, $phablet) 
      display: none 
    &.only 
     display: inherit 
     @include mq-max ($mobile) 
      display: none 
     @include mq-min (#{$phablet + 1px}) 
      display: none 

//Phone and Tablet Devices 
.phone 
    display: inherit 
    &.no 
     @include mq-max ($phablet) 
      display: none 
    &.only 
     display: inherit 
     @include mq-min (#{$phablet + 1px}) 
      display: none 

.tablet 
    display: inherit 
    &.no 
     @include mq-min-max (#{$mobile + 1px}, $tablet) 
      display: none 
    &.only 
     display: inherit 
     @include mq-max (#{$tablet - 1px}) 
      display: none 
     @include mq-min ($desktop) 
      display: none 

//All Devices from Small Mobile to Tablet 
.device 
    display: inherit 
    &.no 
     @include mq-max ($desktop) 
      display: none 
    &.only 
     @include mq-min (#{$desktop - 1px}) 
      display: none 

/* Keep Original Width */ 

.no-padding 
    padding: 0 

.no-padding-left 
    padding-left: 0 

.no-padding-right 
    padding-right: 0 

.no-padding-sides 
    padding-right: 0 
    padding-left: 0 

.no-padding-top 
    padding-top: 0 

.no-padding-bottom 
    padding-bottom: 0 

.no-padding-top-bottom 
    padding-top: 0 
    padding-bottom: 0 

.box-full 
    width: 100% 

.box-half 
    min-width: 50% 
    @include mq-max ($tablet) 
     min-width: 100% 
    &.keep 
     @include mq-max ($tablet) 
      min-width: 50% 

.box-third 
    min-width: $third 
    @include mq-max ($mobile) 
     min-width: 100% 
    &.keep 
     @include mq-max ($mobile) 
      min-width: $third 

.box-two-thirds 
    min-width: $two-thirds 
    @include mq-max ($tablet) 
     min-width: 100% 

.box-quarter 
    min-width: 25% 
    @include mq-max ($phablet) 
     min-width: 50% 
    @include mq-max ($sml-mobile) 
     min-width: 100% 

.box-three-quarters 
    min-width: 75% 
    @include mq-max ($tablet) 
     min-width: 100% 

.box-eighth 
    min-width: 12.5% 
    @include mq-max ($tablet) 
     min-width: 25% 
    @include mq-max ($sml-mobile) 
     min-width: 50% 

.box-10 
    min-width: 10% 
    @include mq-max ($tablet) 
     min-width: $third 
     &.keep 
      min-width: 10% 
     &.keep-tablet 
      min-width: 10% 
    @include mq-max ($sml-mobile) 
     &.keep-tablet 
      min-width: $third 

.box-20 
    min-width: 20% 
    @include mq-max ($tablet) 
     min-width: $third 
     &.keep 
      min-width: 20% 
     &.keep-tablet 
      min-width: 20%  
    @include mq-max ($sml-mobile) 
     min-width: 50% 
     &.keep-tablet 
      min-width: 50% 

.box-30 
    min-width: 30% 
    @include mq-max ($tablet) 
     min-width: 50% 
     &.keep 
      min-width: 30% 
     &.keep-tablet 
      min-width: 30% 
    @include mq-max ($sml-mobile) 
     min-width: 100% 
     &.keep-tablet 
      min-width: 100% 

.box-40 
    min-width: 40% 
    @include mq-max ($tablet) 
     min-width: 50% 
     &.keep 
      min-width: 40% 
     &.keep-tablet 
      min-width: 40% 
    @include mq-max ($sml-mobile) 
     min-width: 100% 
     &.keep-tablet 
      min-width: 100% 

.box-60 
    min-width: 60% 
    @include mq-max ($tablet) 
     min-width: 100% 
     &.keep 
      min-width: 60% 
     &.keep-tablet 
      min-width: 60% 
    @include mq-max ($sml-mobile) 
     &.keep-tablet 
      min-width: 100% 

.box-70 
    min-width: 70% 
    @include mq-max ($tablet) 
     min-width: 100% 
     &.keep 
      min-width: 70% 
     &.keep-tablet 
      min-width: 70% 
    @include mq-max ($sml-mobile) 
     &.keep-tablet 
      min-width: 100% 

.box-80 
    min-width: 80% 
    @include mq-max ($tablet) 
     min-width: 100% 
     &.keep 
      min-width: 80% 
     &.keep-tablet 
      min-width: 80% 
    @include mq-max ($sml-mobile) 
     &.keep-tablet 
      min-width: 100% 

.box-90 
    min-width: 90% 
    @include mq-max ($tablet) 
     min-width: 100% 
     &.keep 
      min-width: 90% 
     &.keep-tablet 
      min-width: 90% 
    @include mq-max ($sml-mobile) 
     &.keep-tablet 
      min-width: 100% 

Cordialement Michael

Answer 1

Si vous changez ceci:

@mixin keep($max) { @include mq-max($max) &.keep { @content; } } 

à ceci:

@mixin keep($max) 
    @include mq-max($max) &.keep 
     @content 

Il sera ru n sans erreur, bien que je ne sache toujours pas pourquoi. Je suis beaucoup plus familier avec SCSS qu'avec la syntaxe Sass, alors peut-être que quelqu'un d'autre peut éclaircir ce que tout le monde était à propos de ce mixin.