不使用@include编译的SASS Mixin

Question

我只是刚刚开始使用SASS，所以我不确定我是否正确的语法，但我一直无法找到我的问题的答案在任何地方。

我正在创建我自己的网格框架，我将用于客户端项目，并试图添加定义类.keep，以阻止特定的框/列在调整大小时折叠/更改宽度。

例如，当屏幕的最大宽度为768 in时，列类..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%

问候迈克尔

Answer 1

如果您改变了这一点：

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

对此：

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

虽然我还不清楚原因，但它不会出错。与Sass语法相比，我更熟悉SCSS，所以也许其他人可以澄清混音带来的麻烦。