我刚开始使用SASS，所以我不确定我的语法是否正确，但我无法在任何地方找到问题的答案。
我正在创建自己的网格框架，我将用于客户端项目，我正在尝试添加定义类.keep，它将在调整大小时停止折叠/更改宽度的特定框/列。
例如，当屏幕的最大宽度为768px时，列类.box-half将崩溃 - 这已在断点中定义。但是，我想添加.keep来阻止这种情况发生。我正在使用内联媒体查询将所有元素保持在一起，因为framework.css的大小可以忽略不计。
我的代码就是这个。
//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; } }
当我尝试编译它时，我收到的错误是：
Error: Invalid CSS after "...{ @content; } }": expected 1 selector or at-rule, was "{}"
正如我所说，我对SASS很新，所以任何帮助都会非常感激。
整个文件代码在这里：
// 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%
此致 迈克尔
答案 0 :(得分：0)
如果你改变了这个：
@mixin keep($max) { @include mq-max($max) &.keep { @content; } }
到此：
@mixin keep($max)
@include mq-max($max) &.keep
@content
它会毫无错误地运行，但我仍然不清楚为什么。我对SCSS比熟悉Sass语法要熟悉得多，所以也许其他人可以通过混合来清理所有大惊小怪。