指南针无效 CSS 错误

Compass Invalid CSS Error

我一直在关注 scss/Compass 上的一篇文章,偶然发现这个问题还没有解决。请协助。

$colours: (green: #468966, yellow: #fff0a5, orange: #ffb03b, red: #b64926);

Compass 编译器报告

error scss/style.scss (Line 5 of scss/_variables.scss: Invalid CSS after "$colours: (green": expected ")", was ": #468966, yell...")

指南针-v 0.12.7。 Sass-v 3.3.13.

下面是项目代码

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <h1 class="icons-clock">Nesting</h1>
  <section>
    <article id="article-1">
      <h2 class="icons-clock"><span class="three"></span>Referencing within the area</h2>
      <p>San Gil is a town municipality in the Department of Santander in northeastern Colombia, located roughly 300 km (192 mi) from Bogota and 95 km from the department's capital, Bucaramanga. As of 2005, San Gil had a population of roughly 42,000[4] people within the total municipal area, making it the third largest urban area in the department, after Bucaramanga and Barrancabermeja. Founded in 1689, San Gil is over 300 years old. It was officially named the tourist capital of the region in 2004, thanks to its outdoor activity opportunities such as rafting, caving, kayaking and hiking.</p>
      <a href="/">read more</a>
    </article>
    <article id="article-2">
      <h2>Referencing parent</h2>
      <p>San Gil's history goes back to pre-Columbian times, when it was inhabited by native indigenous societies called the Guane Indians. Spanish conquest during the colonial period nearly eradicated the local tribes. The town was officially founded on March 17, 1689 by Don Gil Cabrera Davalos and Leonardo Correa de Betancourt. According to official sources, San Gil played an important role during the Colombian independence period. "Comuneros" rebels came from nearby regions, united, traveled to the capital, Bogota, and fought for the nation's independence, a process which occurred during the early 1820s</p>
      <a href="/">read more</a>
    </article>

    <a href="/" class="link">Read All</a>
  </section>

  <aside>
    <p>San Gil's population, as of 2005, was 42,000, (including the rural area). The majority (36,748) reside in the urban area. The population as of 2010 was estimated to be 44,561,[4] an increase of roughly 1,500 people, but showing a tendency to decrease in rural areas, decreasing from 6,240 to a projected 5,601. Ninety-eight percent of houses have access to electricity, 90.3% to running water, and 84.1% to a sewage system</p>
    <p>In 2004, San Gil was named the tourist capital of the region.[5][6] The area offers several outdoor activity opportunities, such as rafting (grade 1-5), kayaking, hiking, and caving.[7] Local companies offer rafting packages through various rivers depending on skill level. “Parque el Gallineral” is a popular destination with its characteristic moss-covered trees resembling beards. It has a small entrance fee. The park has a number of paths running through its 10-acre area and by the city’s main river, “Rio Fonce”.</p>
  </aside>
</body>
</html>

styles.scss

@import "compass";
@import "compass/layout";

@import "variables.scss";
@import "mixins.scss";

@import "icons/*.png";
// @include all-icons-sprites;

@function myFirstFunction($colour, $alpha) {
  @return hsla(hue($colour), 70, lightness($colour), $alpha);
}

h1 {
  &:after {
    content: $string2;
  }
  @include heading-font(2em);
  @include opacity(0.5);
  text-indent: 30px;
}
// section area - // style comments won't compile to output css
/* /* style comments will compile to output css */
section {
  // font-family: $font-one;
  .link {
    font-family: $font-one;
    // background: darken($yellow, 20%);
    // background: darken(nth($colours, 2), 20%);
    background: darken(map-get($colours, yellow), 20%);
    color: $red;
    // @include corners;
    // @extend %corners;
    @include border-corner-radius(top, left, 5px);    // compass function
    padding: 5px 10px;
    // margin-top: 10px;
  }

  article {
    // background: lighten($yellow, 10%);
    // background: lighten(nth($colours, 2), 10%);
    background: map-get(nth($colours, yellow), 10%);
    font-family: $font-two;
    padding: 5px 10px;
    margin: 10px 0;
    // @include corners;
    // @extend %corners;
    @include border-radius(50px);
    @include box-shadow(0 0 10px $green, inset 0 0 10px $green);

    h2 {
      // color: myFirstFunction($red, 0.5);
      // @include heading-font(1.6em);
      @include heading-font;
      @include icons-sprite(magnifier);
      text-indent: 30px;
    }

    p {
      color: $green;
      // @include contrasted(lighten($yellow, 10%));
      // @include contrasted(lighten(nth($colours, 2), 10%));
      @include contrasted(lighten(map-get($colours, yellow), 10%));
    }

    a {
      @extend .link;
      color: $green
    }

    &#article-1 {
      // background: myFirstFunction($yellow, 0.1);
      // background: lighten($yellow, 10%);
      background: $green;
      p, h2 {
        @include contrasted($green);
      }
    }

    &#article-2 {
      /* a {
        color: black;
        &:hover {
          color: $green
        }
      } */
    }

    body:hover &#article-2 {
      background: #a1b2c3;
    }
  }
}

aside p {
  font-family: $font-one;
  color: $grey;
}

_variables.scss

$font-one: helvetica;
$font-two: consolas;

// colours
$colours: (green: #468966, yellow: #fff0a5, orange: #ffb03b, red: #b64926);

$green: #468966;
$yellow: #fff0a5;
$red: #b64926;
// $contrasted-light-default: $yellow;
// $contrasted-light-default: nth($colours, 2);
$contrasted-light-default: map-get($colours, yellow);
$sat: 50;   // 50 %
$grey: hsla(200, $sat, 50, 0.5);    // h=[0; 360] degrees of a colour wheel
$orange: #ffb03b;
// string
$string: "helloworld";
$string2: percentage(5/3);
// number
$number: 2em;
// boolean
$bool: false;

_mixins.scss

@mixin heading-font($font-size:1.6em) {   // 1.6em for default value if none supplied
  // color: myFirstFunction($orange, 0.7);
  // color: darken($orange, 20%);
  // color: darken(nth($colours, 3), 20%);
  color: darken(map-get($colours, orange), 20%);
  font: {
    family: $font-one;
    // size: $number;
    size: $font-size;
    weight: 100;
  }
}

// @mixin corners {
%corners {
  border-radius: 5px;
}

config.rb

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

问题与 Windows 相对路径有关,可能是由于多个 compass/sass 安装。在干净的 Windows 系统上安装所需的软件以及 运行 项目表明了这一点。 至于 Compass 不处理数组,更新到 1.0.3(发布时最新)解决了这个问题。 在同一个项目上也有两个 .scss 观察者可能会导致类似的路径问题。