0

I want to generate various css files such as:

  • global.css
  • mobile.css
  • tablet.css
  • desktop.css
  • mobile-forum.css
  • table-forum.css

and etc. I have such HTML code:

<link rel="stylesheet" media="all and (max-width: 450px)" href="assets/css/mobile.css">
<link rel="stylesheet" media="all and (min-width: 450px) and (max-width: 1024px)" href="assets/css/tablet.css">
<link rel="stylesheet" media="all and (min-width: 1024px) and (max-width: 1264px)" href="assets/css/desktop.css">
<link rel="stylesheet" media="all and (min-width: 1264px)" href="assets/css/widescreen.css">

So i created each *.scss with such content:

in desktop.scss

$mode: "desktop";
@import "main";

in _main.scss i created such variable:

$desktop: false;
@if $mode == 'desktop' {
$desktop: true;
}

So the problem is such. I whant to use _normilize.scss

@if $global {
    @import "parts/normalize";
}

But i have error here:

Syntax error: Import directives may not be used within control directives or mixins.
    on line 3 of /opt/code/host/resulinkpro/design/assets/sass/_main.scss

Compiling using compass watch

And my question are:

  1. Can i make that work (other version of SCSS or COMPASS)?
  2. If not can be any alternatives? The main idea contain logic in _main.scss and nested files, not in global.scss or mobile.scss (i just enable a mode there and nothing more)
  3. Or LESS will be better for such task?

My main idea is to avoid unwanted media-queries, in this making .css smaller and then using javascript replace mode (currently using media attribute in tag). Also use only necessary styles in browser.

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
Roman M. Koss
  • 970
  • 1
  • 15
  • 33
  • You're not saving anything by doing this because *all* browsers download *all* CSS files, even if the media query conditions aren't met. – cimmanon Nov 23 '13 at 23:23
  • @cimmanon Yes i know. Can you watch at this in other point, after doing this i can load only necessary styles using PHP on server side (according to device - mobile or not) or JS on client side(depending on width). Also have various styles rules for various pages. It`s just a simply question, the main thing i want to use @import using @if condition. – Roman M. Koss Nov 24 '13 at 02:06
  • 1
    Sass already told you the answer very clearly. Browser sniffing is awful and you should feel bad for trying to do it. – cimmanon Nov 24 '13 at 13:06

0 Answers0