как скомпилировать SASS с несколькими точками привязки к CSS определенного размера экрана без медиа-запросов

Есть ли способ скомпилировать SCSS с медиа-запросами и несколькими точками останова в CSS без медиа-запросов, которые будут содержать стили только для определенного размера экрана, который я передаю компилятору SCSS?

пример файла SCSS:

body {background:red}

@medai query only screen and (max-width: 767px){        
    a {
        margin: 10px
    }       
}

@medai query only screen and (max-width: 1280px){       
    a {
        color: orange;
    }       
}   

Я хочу скомпилировать вышеуказанный SCSS с медиа-запросами и получить файл CSS БЕЗ медиа-запросов со всеми соответствующими стилями, которые браузер применил бы, если, скажем, ширина окна браузера была 1600 пикселей или 320 пикселей;

ожидаемый CSS для 1600 пикселей;

body {background:red}
a {margin: 10px}
a {color: orange;}

ожидаемый CSS для 320 пикселей;

body {background:red}
a {margin: 10px}

Он мне нужен для компиляции css для IE7, который не поддерживает медиа-запросы.


person maestr0    schedule 07.02.2014    source источник
comment
возможный дубликат Слияние медиа-запросов с использованием SASS и точки останова (Respond- Кому)   -  person cimmanon    schedule 07.02.2014


Ответы (1)


Я не думаю, что это возможно, но вы можете сделать следующее:

Создайте 3 файла scss: _global.scss, 1600px.scss, 320px.scss

(обратите внимание на "_" перед файлом _global.scss, это значит, что компилятор не компилирует его в файл css)

Затем внутри 1600px.scss и 320px.sccs вы можете сделать @import "global";

Затем внутри заголовка вашего html:

<link rel="stylesheet" media="(max-width: 767px)" href="320px.css" />
<link rel="stylesheet" media="(max-width: 1280px)" href="1600px.css" />

U can find more info about import at http://sass-lang.com/guide

person Think Graphical    schedule 07.02.2014
comment
Я знаю это, но это не то, что мне нужно. Мне нужно скомпилировать CSS для IE7, который не поддерживает медиа-запросы. - person maestr0; 07.02.2014
comment
Почему бы вам просто не заполнить поддержку медиа-запросов с помощью github.com/scottjehl/Respond? - person Think Graphical; 07.02.2014