When following Zen's sass/README.txt, after installing compass and Sass, I tried making a small change to one of the .scss files while running compass watch. The result was a page-full of errors:

directory css/layouts/
    error sass/nodes.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/nodes.css
    error sass/wireframes.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/wireframes.css
    error sass/navigation.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/navigation.css
    error sass/pages-rtl.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/pages-rtl.css
    error sass/normalize-rtl.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/normalize-rtl.css
    error sass/tabs.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/tabs.css
    error sass/tabs-rtl.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/tabs-rtl.css
   create css/style.css
    error sass/navigation-rtl.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/navigation-rtl.css
    error sass/views-styles.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/views-styles.css
    error sass/forms-rtl.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/forms-rtl.css
    error sass/pages.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/pages.css
    error sass/print.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/print.css
    error sass/forms.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/forms.css
    error sass/layouts/fixed-width-rtl.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/layouts/fixed-width-rtl.css
    error sass/layouts/fixed-width.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/layouts/fixed-width.css
    error sass/fields.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/fields.css
    error sass/comments.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/comments.css
    error sass/blocks.scss (Line 334: Invalid CSS after "...en-half-gutter(": expected ")", was "$gutter-width: ...")
   create css/blocks.css
    error sass/normalize.scss (Line 495: Invalid CSS after "...(top,    $width": expected ")", was ": 1px, $lines: ...")
   create css/normalize.css

Since this seems to be throwing up errors on a bunch of (un-modified) files from Zen, I thought it might be a bug. However, I'm pretty new to Sass and compass, so I'm totally fine with someone telling me I'm just doing it wrong somehow.

Comments

rootwork’s picture

rootwork
he/him
Primary language English
Location 🇺🇸 US-Pacific 🌎 Chinook (Multnomah, Clackamas) & Cowlitz lands 🌹 Portland, OR
CreditAttribution: rootwork commented

Based on the error, it appears it's either lines 152-155 of STARTERKIT/sass-extensions/zen/stylesheets/_grids.sccs:

padding: {
    left: zen-half-gutter($gutter-width, left, $dir);
    right: zen-half-gutter($gutter-width, right, $dir);
  }

or lines 302-319:

// Returns a half gutter width.
@function zen-half-gutter(
  $gutter-width: $zen-gutter-width,
  $gutter-side: $zen-float-direction,
  $flow-direction: $zen-float-direction
) {
  $half-gutter: $gutter-width / 2;
  // Special handling in case gutter has an odd number of pixels.
  @if unit($gutter-width) == "px" {
    @if $gutter-side == $flow-direction {
      @return floor($half-gutter);
    }
    @else {
      @return ceil($half-gutter);
    }
  }
  @return $half-gutter;
}
rootwork’s picture

rootwork
he/him
Primary language English
Location 🇺🇸 US-Pacific 🌎 Chinook (Multnomah, Clackamas) & Cowlitz lands 🌹 Portland, OR
CreditAttribution: rootwork commented

I found one other report of almost the identical problem, here:

https://drupal.org/node/1548946#comment-6468974

It sounds like there wasn't any solution except to use a different version of Ubuntu. I'm curious if anyone else has had this issue and has found a solution short of that.

One question: It seems like the _grids.scss mixin, which references zen-grids -- yet in the config.rb file, require 'zen-grids' is commented out. Is that as it should be?

echoz’s picture

echoz CreditAttribution: echoz commented
Category: bug » support
Status: Active » Fixed

Ah, you found it. Yes, to use zen-grids, you would uncomment that line in config.rb, require 'zen-grids'. This instruction is in the README.txt inside sass-extensions/zen-grids.

rootwork’s picture

rootwork
he/him
Primary language English
Location 🇺🇸 US-Pacific 🌎 Chinook (Multnomah, Clackamas) & Cowlitz lands 🌹 Portland, OR
CreditAttribution: rootwork commented
Component: CSS/SASS/HTML markup » Documentation
Category: support » feature
Status: Fixed » Active

At the moment, the Sass files won't compile unless zen-grids is uncommented on lines 28-29 of config.rb, or ninesixty or another layout system is installed and set up. This is what it says above those lines:

# Require any additional compass plugins installed on your system.

To me, that comment, and the fact that the plugins are commented out by default, implies that they are optional. But the zen-grids line must be uncommented (or another layout system set up) in order for the Sass to compile. It seems unreasonable to expect someone to go look in sass-extensions/zen-grids to find a README file in order to discover that it's required.

So I'm reopening this issue with a request for better documentation on line 27 of config.rb, or in the main README (where none of this is mentioned).

I can submit a patch for that comment if you want, but I imagine you might have some more specific thoughts about how this could be better documented there.

echoz’s picture

echoz CreditAttribution: echoz commented

@rootwork, a clarification on my comment.
"require 'zen-grids'" in config.rb is optional. If uncommented, it will use the instance of zen-grids we have installed locally. While commented out, the copy of zen-grids located in your theme in the sass-extensions directory is used. If you hadn't copied this directory from STARTERKIT to your subtheme, then you will get errors with "require 'zen-grids'" commented out in config.rb.

That being said, I do agree we need all the clear documentation we can write, as this is confusing. Leaving this open as that is formed. I hope my explanation cleared up why you were getting the errors.

rootwork’s picture

rootwork
he/him
Primary language English
Location 🇺🇸 US-Pacific 🌎 Chinook (Multnomah, Clackamas) & Cowlitz lands 🌹 Portland, OR
CreditAttribution: rootwork commented
Title: Page-full of Sass errors running compass watch in Zen » Clarify documentation in config.rb on Compass plugins/Sass extensions

OK -- thanks for your clarification. I do have sass-extensions in my subtheme and was still getting the errors -- but I can't rule out that that may have been a problem with my copy of Compass. Either way, I'm glad you agree better documentation will help :)

I'm updating the title of this issue to reflect the documentation request.

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Title: Clarify documentation in config.rb on Compass plugins/Sass extensions » Require Zen Grids to installed separately from Zen
Version: 7.x-5.1 » 7.x-6.x-dev
Component: Documentation » CSS/SASS/HTML markup

The 7.x-6.x branch wont' bundle Zen Grids anymore. I was trying to make it "easier" in 7.x-5.x, but if we make the installation of Zen Grids consistent with the installation of other Compass extensions, beginners will be better served.

I'll have to uncomment that line as you suggested and add docs on how to install Zen Grids.

JohnAlbin’s picture

JohnAlbin
he/they/他
Primary language English
Location Taipei, Taiwan
CreditAttribution: JohnAlbin commented
Status: Active » Fixed

This has been fixed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.