Помощ при програмиране, отговори на въпроси / дръзки приказки / SASS Mixin не се компилира с @include - sass, миксини

SASS Mixin не се компилира с @include - sass, mixins

Току-що започнах да използвам SASS, така че не съм сигурен дали правим правилния синтаксис, но не можах да намеря отговора на моя проблем навсякъде.

Аз създавам моята собствена мрежа, която ще направяда се използва за клиентски проекти и се опитвам да добавите дефиниране на клас .keep, който ще спре тази конкретна кутия / колона от свиване / промяна на ширини при преоразмеряване.

Например, класовете на колоните.половината кутия ще се срути, когато екранът има максимална ширина 768px - това е определено в прекъсвача. Искам обаче да добавим .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 за отговор № 1

Ако промените това:

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

до това:

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

Той ще работи без грешка, въпреки че все още не съм сигурен защо. Аз съм много по-запознат с SCSS, отколкото със Sass синтаксиса, така че може би някой друг може да изясни какво е станало цялата бъркотия с този миксин.