I've been following a tut on scss/Compass when stumbled on this one haven't resolved yet. Please assist.
$colours: (green: #468966, yellow: #fff0a5, orange: #ffb03b, red: #b64926);
The Compass compiler reports
error scss/style.scss (Line 5 of scss/_variables.scss: Invalid CSS after "$colours: (green": expected ")", was ": #468966, yell...")
Compass -v 0.12.7. Sass -v 3.3.13.
Below is the project code.
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
