CODEWITHSUNDEEP
sassmixins
user3436334
user3436334

Reputation: 53

SASS Mixin not compiling with @include

I have only just started using SASS, so I am unsure whether I am getting the syntax correct, however I have been unable to find the answer to my problem anywhere.

I am creating my own grid framework that I will be using for client projects and I am trying to add define the class .keep that will stop that particular box/column from collapsing/changing widths when resized.

For example, the column class .box-half will collapse when the screen has the max width of 768px - this has been defined in the breakpoint. However, I want to add .keep which will stop this from happening. I am using inline media queries to keep all elements together and because the size of the framework.css will be negligable.

The code I have is this.

    //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; } }

When I try to complile it, the error I receive is this:

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

As I said, I am very new to SASS, so any help would be extremely appreciated.

Whole file code is here:

// 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%

Regards Michael

Upvotes: 0

Views: 1658

Answers (1)

jeremye
jeremye

Reputation: 1388

If you change this:

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

to this:

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

It will run without error, though I am still unclear why. I am far more familiar with SCSS than with Sass syntax, so perhaps somebody else can clear up what all the fuss was about with that mixin.

Upvotes: 1

Related Questions