как в .sass задать Media queries?

511

24 ноября 2016, 10:07

Пишу @media screen and (max-wight: 320px).

gulp выдает ошибку, в чем проблема?

Без скобок тоже ошибка и со скобками ошибка.

Обновление

$blue: #279cc7 
$raleway: 'Raleway', sans-serif 
$border: 1px solid #dadada 
$small: 320px 
 
@mixin clearfix() 
	& 
	*zoom: 1 
	&:before, &:after  
	content: "" 
	display: table 
	&:after 
	clear: both 
* 
	box-sizing: border-box 
	margin: 0 
	padding: 0 
body  
	font: 100%/1.5em 'Raleway', Arial, Helvetica, sans-selif 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section  
	display:block 
img  
	max-width: 100%  
	height: auto 
 
.container 
	max-width: 1170px 
	margin: 0 auto 
	background: #666 
 
//COLS// 
.container .cols  
	float: left 
	margin: 0 0 1em  
	padding: 0 1em  
	text-align: center 
	background: #bbb 
.container .cols.col-1 
	width: 8.3333333332% 
.container .cols.col-2 
	width: 16.666666667% 
.container .cols.col-3 
	width: 25% 
.container .cols.col-4 
	width: 33.333333333% 
.container .cols.col-5 
	width: 41.666666667% 
.container .cols.col-6 
	width: 50% 
.container .cols.col-7 
	width: 58.333333333% 
.container .cols.col-8 
	width: 66.666666667% 
.container .cols.col-9 
	width: 75% 
.container .cols.col-10 
	width: 83.333333333% 
.container .cols.col-11 
	width: 91,666666667% 
.container .cols.col-12 
	width: 100% 
//END COLS 
 
.container:before, 
.container:after, 
.row:after, 
.row:before, 
.clear:before, 
.clear:after  
	content: " " 
	display: table 
 
.container:after, 
.row:after, 
.clear:after  
	clear: both 
//MAIN STYLE// 
 
//END MAIN STYLE// 
 
 
//MEDIA QUERIES// 
@media only screen and (max-width: 320px) 
//END MEDIA QUERIES//

Вот что имею, может проблема в gulp

Обновление 2

Со скобками и без скобок ошибка..

Answer 1

пишу @media screen and (max-wight: 320px)

Вот так и пиши, заодно исправив wight на width:

@media screen and (max-width: 320px)

На скриншоте явно не хватает скобок:

@media screen and max-wight: 320px

о чём компилятор и сообщает.

Answer 2

Первое что надо знать, если мы хотим писать max-width:768px, надо написать в sass $breakpoint-tablet:768px;

Подробнее:

/**************************/
$breakpoint-tablet: 768px;
@include breakpoint(453px $breakpoint-tablet) {
  body {
      background-color: red;
}
}
@include breakpoint($breakpoint-tablet 850px) {
}
/* Compiles to CSS: */
@media (min-width: 453px) and (max-width: 768px) {
      body {
          background-color: red;
}
}
@media (min-width: 768px) and (max-width: 850px) {
}

Если не очень понятно зайди тут ссылка.

Answer 3

Всё логично, у вас:

@media only screen and (max-width: 320px)

А надо:

@media only screen and (max-width: 320px) {
    ....
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Плавное переключение страниц и pjax

Использую переход по страницам без перезагрузки навигации сайта. Пример тут.

441

CSS

Стилизация input/textarea

Есть некий inputсо стилями border-image в виде подчеркивания. Как добавить новый input и продолжить вводить текст дальше как только закончится ширина...

753

CSS

как сдружить CSS или помогите новичку

Имеется сайт лендинг и для него нужно подключить определенную форму обратной свзяи которая имеет собственный стиль CSS. Хотелось бы и эту...

320

CSS

Как победить артефакты свойства filter: greyscale?

348