Be able to place @imports within CSS 3 Media Queries

[adambom]

This currently returns an error at compile time when I try to include a partial partials/grid_overlay within a CSS 3 Media Query tag:

error src/screen.scss (Line 4: Invalid CSS after "...s/grid_overlay"": expected selector or at-rule, was "@import "partia...")

/// For Example ///

I want to generate the following CSS, which should display a different stylesheet for each of three screen resolutions (1024 and below, 1025-1599, and 1600+). I'm using the blueprint library in my project. Within a media query, I want to set the $blue-print-grid width to be one of three widths, depending on the screen resolution. I would then @include base and @include the blueprint/grid component, which calculates the width of all my design elements at compile time. This generates one CSS file with three media queries and styles embedded within, specific to the designated screen resolution. Like so:

/* screen.scss */
@media screen and (max-width: 1024px) {
   $blueprint-grid-width: 46;
   $blueprint-grid-columns: 10;
   $blueprint-grid-margin: 8px;
   @import "blueprint/grid";
   @import "partials/my_site_styles";
}
@media screen and (min-width:1025px) and (max-width: 1599px) {
  // Styles for screen resolutions between 1024 and 1600. Column width is 50 px.
  $blueprint-grid-width: 50;
   $blueprint-grid-columns: 10;
   $blueprint-grid-margin: 8px;
   @import "blueprint/grid";
   @import "partials/my_site_styles";
}
@media screen and (min-width: 1600px) {
  // Styles for resolutions 1600 and above. Column width 72px
  $blueprint-grid-width: 72;
   $blueprint-grid-columns: 10;
   $blueprint-grid-margin: 8px;
   @import "blueprint/grid";
   @import "partials/my_site_styles";
}

/* partials/my_site_styles.scss */
#wrapper {
    @include column(10); // Compiles to width:452px, 572px, or 792px, float: ....
}

/* screen.css (This is what I want to generate, but currently cannot)  */
@media screen and (max-width: 1024px) {
   // Styles for a 1024px column layout. Column width is 46px.
   #wrapper {
      width: 452px;
      margin-right: 8px;
      /*  ...  */
   }
}
@media screen and (min-width:1025px) and (max-width: 1599px) {
  // Styles for screen resolutions between 1024 and 1600. Column width is 50 px.
  #wrapper {
      width: 572px;
       /*  ...  */
   }
}
@media screen and (min-width: 1600px) {
  // Styles for resolutions 1600 and above. Column width 72px
  #wrapper {
      width: 792px;
       /*  ...  */
   }
}

/// Steps to reproduce: ///
Compile the project from above using the blueprint library

/// How to solve ///
I think this could be at the compiler level. I don't know Ruby well enough to fix this myself

/// Related stackoverflow issue ///
http://stackoverflow.com/questions/5305952/how-to-use-sass-logic-within-a-css-3-media-query
I opened this yesterday

[chriseppstein]

What version of sass are you using? I think this should work in the alphas.

Chris

Hunt & pecked on my iPhone... Sorry if it's brief!

On Mar 16, 2011, at 11:49 PM, adambomreply@reply.github.com wrote:

This currently returns an error at compile time when I try to include a partial partials/grid_overlay within a CSS 3 Media Query tag:

error src/screen.scss (Line 4: Invalid CSS after "...s/grid_overlay"": expected selector or at-rule, was "@import "partia...")

/// For Example ///

I want to generate the following CSS, which should display a different stylesheet for each of three screen resolutions (1024 and below, 1025-1599, and 1600+). I'm using the blueprint library in my project. Within a media query, I want to set the $blue-print-grid width to be one of three widths, depending on the screen resolution. I would then @include base and @include the blueprint/grid component, which calculates the width of all my design elements at compile time. This generates one CSS file with three media queries and styles embedded within, specific to the designated screen resolution. Like so:

/* screen.scss */
@media screen and (max-width: 1024px) {
$blueprint-grid-width: 46;
$blueprint-grid-columns: 10;
$blueprint-grid-margin: 8px;
@import "blueprint/grid";
@import "partials/my_site_styles";
}
@media screen and (min-width:1025px) and (max-width: 1599px) {
// Styles for screen resolutions between 1024 and 1600. Column width is 50 px.
$blueprint-grid-width: 50;
$blueprint-grid-columns: 10;
$blueprint-grid-margin: 8px;
@import "blueprint/grid";
@import "partials/my_site_styles";
}
@media screen and (min-width: 1600px) {
// Styles for resolutions 1600 and above. Column width 72px
$blueprint-grid-width: 72;
$blueprint-grid-columns: 10;
$blueprint-grid-margin: 8px;
@import "blueprint/grid";
@import "partials/my_site_styles";
}

/* partials/my_site_styles.scss */
#wrapper {
@include column(10); // Compiles to width:452px, 572px, or 792px, float: ....
}

/* screen.css (This is what I want to generate, but currently cannot) /
@media screen and (max-width: 1024px) {
// Styles for a 1024px column layout. Column width is 46px.
#wrapper {
width: 452px;
margin-right: 8px;
/ ... /
}
}
@media screen and (min-width:1025px) and (max-width: 1599px) {
// Styles for screen resolutions between 1024 and 1600. Column width is 50 px.
#wrapper {
width: 572px;
/ ... /
}
}
@media screen and (min-width: 1600px) {
// Styles for resolutions 1600 and above. Column width 72px
#wrapper {
width: 792px;
/ ... */
}
}

/// Steps to reproduce: ///
Compile the project from above using the blueprint library

/// How to solve ///
I think this could be at the compiler level. I don't know Ruby well enough to fix this myself

Reply to this email directly or view it on GitHub:
#302

[adambom]

Version 0.10.6

Is this that the alpha, or should I fetch from the source? There's nothing new from Gem.

Running osx 10.6.1

[chriseppstein]

This is implemented in Sass 3.1, you can upgrade to the latest alpha if you need this feature.

[adambom]

Thanks. I still get the same error, even with 3.1.0.alpha.249 (bleeding
edge). Syntax error: Import directives may only be used at the root of a
document. Anything else I can try? I just ran gem install sass --pre and
converted my scss to sass and compiled. Do I need to take any more steps?
Should I file a bug with sass?

Adam

On Thu, Mar 17, 2011 at 7:42 AM, chriseppstein <
reply@reply.github.com>wrote:

This is implemented in Sass 3.1, you can upgrade to the latest alpha if you
need this feature.

Reply to this email directly or view it on GitHub:
#302 (comment)