Je viens tout juste de commencer à utiliser SASS. Je ne sais donc pas si la syntaxe est correcte, mais je suis incapable de trouver la réponse à mon problème où que ce soit.
Je crée mon propre cadre de grille que je vaisutilise pour les projets clients et j'essaie d'ajouter de définir la classe .keep qui empêchera cette boîte / colonne particulière de réduire / modifier la largeur lors du redimensionnement.
Par exemple, la classe de colonne.la moitié de la boîte se réduira lorsque la largeur maximale de l'écran sera de 768 pixels - ceci a été défini dans le point d'arrêt. Cependant, je veux ajouter .keep qui empêchera que cela se produise. J'utilise des requêtes multimédias en ligne pour conserver tous les éléments ensemble et parce que la taille de framework.css sera négligeable.
Le code que j'ai est le suivant.
//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 j'essaie de le compliler, 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 dans SASS, donc toute aide serait extrêmement appréciée.
Le code du 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
Réponses:
0 pour la réponse № 1Si vous changez ceci:
@mixin keep($max) { @include mq-max($max) &.keep { @content; } }
pour ça:
@mixin keep($max)
@include mq-max($max) &.keep
@content
Il fonctionnera sans erreur, même si je ne comprends toujours pas pourquoi. Je suis beaucoup plus familier avec SCSS qu'avec la syntaxe Sass, alors quelqu'un d'autre peut peut-être éclaircir le problème avec ce mélange.