Właśnie zacząłem używać SASS, więc nie jestem pewien, czy otrzymuję poprawną składnię, jednak nie byłem w stanie znaleźć odpowiedzi na mój problem w dowolnym miejscu.
Tworzę własne ramy gridowe, które będęużywać dla projektów klienta i próbuję dodać zdefiniować klasę .keep, która zatrzyma to konkretne pudełko / kolumnę od zwijania / zmieniania szerokości po zmianie rozmiaru.
Na przykład klasa kolumny.połowa pola zapadnie się, gdy ekran ma maksymalną szerokość 768 pikseli - zostało to zdefiniowane w punkcie przerwania. Jednak chcę dodać .keep, który to powstrzyma. Używam wbudowanych zapytań o media, aby zachować wszystkie elementy razem, a rozmiar pliku framework.css będzie pomijalny.
Kod jaki mam jest taki.
//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; } }
Kiedy próbuję to skompilować, pojawia się błąd:
Error: Invalid CSS after "...{ @content; } }": expected 1 selector or at-rule, was "{}"
Jak już powiedziałem, jestem bardzo nowy w SASS, więc wszelka pomoc byłaby niezwykle cenna.
Cały kod pliku jest tutaj:
// 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%
pozdrowienia Michael
Odpowiedzi:
0 dla odpowiedzi № 1Jeśli zmienisz to:
@mixin keep($max) { @include mq-max($max) &.keep { @content; } }
do tego:
@mixin keep($max)
@include mq-max($max) &.keep
@content
Będzie działał bezbłędnie, choć nadal nie jestem pewien dlaczego. Jestem znacznie bardziej zaznajomiony z SCSS niż ze składnią Sass, więc być może ktoś inny może wyjaśnić, o co całe zamieszanie chodziło z tym mixinem.