Блог

Я пытался выяснить, как писать медиа-запросы в sass. Это мой код

 devices: ("sphone","phone","tablet")
$breakpoints: (	width2: ('sphone' : 320, 'phone' : 360, 'tablet' : 600), height2: ('sphone' : 509, 'phone' : 583, 'tablet' : 952))

=screen-width($device)
  @each $name in $devices
    @if $device != $name
      @error "No device of such name"
  $media: (max-width: map-get(map-get($breakpoints,"width2"),$device)   px )
  @media screen only and ($media)
    @content
		
		
.hello
  background: #333
  @include screen-width("mobile")
    background: #444
      

Я пытаюсь скомпилировать то же самое в sass, но он продолжает выдавать мне следующую ошибку. Я не знаю почему.

 Properties are only allowed within rules, directives, mixin includes, or other properties.
  

Есть идеи?

В вашем коде есть некоторые ошибки, отсутствует $ $devices переменная in . Вы пишете @include screen-width("mobile") , но mobile нет в списке устройств. В $media переменной max-width должна быть строка, а затем вы должны использовать интерполяцию для добавления в @media правило.

Сравнение в @each цикле неверно, но я пока не решаю эту проблему. Этот код работает:

 $devices: ("sphone","phone","tablet")
$breakpoints: ( width2: ('sphone' : 320, 'phone' : 360, 'tablet' : 600), height2: ('sphone' : 509, 'phone' : 583, 'tablet' : 952))

=screen-width($device)
  $media: "max-width:" map-get(map-get($breakpoints,"width2"),$device)   px
  @media screen only and (#{$media})
    @content

.hello
  background: #333
  @include screen-width("sphone")
    background: #444