user3436334 user3436334 - 5 months ago 20
Sass (Sass) Question

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

Answer Source

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.