Conditional sass imports?

[firefusion]

I'm trying to do something like below but it seems imports don't work
inside conditionals.

Inside base.scss I have this...

$stylesheet: 'base';
@import '_setup';

and then inside _setup.scss I have this....

@import 'functions/_sizemath';
@import 'mixins/_common';
@import 'mixins/_css3';

@if $stylesheet == 'base' {
@import 'partials/_normalize';
@import 'partials/_typography';
@import 'partials/_forms';
}

@if $stylesheet == 'screen' {
@import 'partials/_screen';
}

@if $stylesheet == 'mobile' {
@import 'partials/_mobile';
}

@if $stylesheet == 'ie' {
@import 'partials/_normalize';
@import 'partials/_typography';
@import 'partials/_forms';
@import 'partials/_screen';
}

The idea is to import a different set of files depending on what
$stylesheet is set to.

Is there another way to achieve this?

[Chris Eppstein]

How about just a partial for each legal value of $stylesheet and @import them directly.

chris

--
You received this message because you are subscribed to the Google Groups "Sass" group.
To post to this group, send email to sass...@googlegroups.com.
To unsubscribe from this group, send email to sass-lang+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/sass-lang?hl=en.

[Ghodmode]

On Tue, Jan 24, 2012 at 4:12 PM, firefusion <robin...@gmail.com> wrote:
> I'm trying to do something like below but it seems imports don't work
> inside conditionals.

The conditionals only happen at compile time, when the scss is turned
into css. They can't carry over into the regular css because css
doesn't have that capability.

I'm not sure of exactly what you're trying to do, but here's my guess...

You have a main (or base?) page that you want to have one style and
other pages that you want to have different styles. The stylesheets
for each of the pages set a $stylesheet scss variable that the _setup
code is supposed to use to import the appropriate stylesheets.

Is that right?

That won't work because all of the conditions are handled at compile
time when the css files are generated. There's no way in CSS to
determine if the stylesheets are being imported from a "base"
stylesheet or some other stylesheet.

The way I do it is by setting a class on the body tag in each page
that represents the page I'm on. Then all of my styles are in one
stylesheet. Something like this for example:

body {
&.home {
background-color: #eef;
}

&.about {
background-color: #efe;
}

&.forums {
background-color: #fee;
}
}

--
Ghodmode
http://www.ghodmode.com

> Inside base.scss I have this...
>
> $stylesheet: 'base';
> @import '_setup';
>
> and then inside _setup.scss I have this....
>
> @import 'functions/_sizemath';
> @import 'mixins/_common';
> @import 'mixins/_css3';
>
> @if $stylesheet == 'base' {
>        @import  'partials/_normalize';
>        @import  'partials/_typography';
>        @import  'partials/_forms';
> }
>
> @if $stylesheet == 'screen' {
>        @import  'partials/_screen';
> }
>
> @if $stylesheet == 'mobile' {
>        @import  'partials/_mobile';
> }
>
> @if $stylesheet == 'ie' {
>        @import  'partials/_normalize';
>        @import  'partials/_typography';
>        @import  'partials/_forms';
>        @import  'partials/_screen';
> }
>
> The idea is to import a different set of files depending on what
> $stylesheet is set to.
>
> Is there another way to achieve this?
>