CSS compiles the following mixin code:
#mixin message ($color, $background-color: lighten ($color, 20%) ) {
color: $color;
background-color: $background-color;
}
.message-danger { #include message(red); }
to this
.message-danger {
color: red;
background-color: lighten red, 20%;
}
Obviously you can see that CSS did not compile the lighten( ) function properly. I tried to change the color to a hex code color but that made no difference. I thought the problem was from my code editor, but when I tried the code on sassmeister it gave me the same result. Please help.
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>
read more
</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>
read more
</article>
Read All
</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
The issue had smth to do with Windows relative paths probably due to multiple compass/sass installations. Installing the software pieces needed as well as running the project on a clean Windows system showed that.
As to the Compass not handling arrays an update to the 1.0.3 (latest at the time of posting) solves the issue.
Also having two .scss watchers on the same project may cause a similar path issue.
Gulp watch yields errors related to code between /* and */ in my scss file, although I've read that this is a regular way of commenting in SASS. Any idea why I have this problem?
[EDIT]
Error:
Error: Undefined variable: "$sm-breakpoint".
on line 42 of assets/styles/core/_media-queries.scss
>> /*
^
[23:30:48] Finished 'styles' after 14 ms
Content of my scss file:
$screen: "only screen";
$landscape: "#{$screen} and (orientation: landscape)";
$portrait: "#{$screen} and (orientation: portrait)";
/* Breakpoints */
$mq_600: "#{$screen} and (max-width: 600px)";
$mq_768: "#{$screen} and (max-width: 768px)";
$mq_1000: "#{$screen} and (max-width: 1000px)";
$mq_1024: "#{$screen} and (max-width: 1023px)";
$mq_1200: "#{$screen} and (max-width: 1200px)";
$mq_1300: "#{$screen} and (max-width: 1300px)";
$mq_1400: "#{$screen} and (max-width: 1400px)";
$mq_1500: "#{$screen} and (max-width: 1500px)";
$mq_1460: "#{$screen} and (max-width: 1460px)";
#mixin mq_600 {
#media #{$mq_600} {#content}
}
#mixin mq_768 {
#media #{$mq_768} {#content}
}
#mixin mq_1000 {
#media #{$mq_1000} {#content}
}
#mixin mq_1024 {
#media #{$mq_1024} {#content}
}
#mixin mq_1200 {
#media #{$mq_1200} {#content}
}
#mixin mq_1300 {
#media #{$mq_1300} {#content}
}
#mixin mq_1400 {
#media #{$mq_1400} {#content}
}
#mixin mq_1500 {
#media #{$mq_1500} {#content}
}
/* Up - mobile fist approach */
/*
$sm-up: "#{$screen} and (min-width: #{$sm-breakpoint + 1})";
$md-up: "#{$screen} and (min-width: #{$md-breakpoint + 1})";
$lg-up: "#{$screen} and (min-width: #{$lg-breakpoint + 1})";
$xlg-up: "#{$screen} and (min-width: #{$xlg-breakpoint + 1})";
#mixin sm-up {
#media #{$sm-up} {#content}
}
#mixin md-up {
#media #{$md-up} {#content}
}
#mixin lg-up {
#media #{$lg-up} {#content}
}
#mixin xlg-up {
#media #{$xlg-up} {#content}
}
*/
SCSS has two kinds of comments:
[SCSS] supports standard multiline CSS comments with /* */, which are preserved where possible in the output. These comments can have whatever formatting you like; Sass will do its best to format them nicely.
SCSS also uses // for comments that are thrown away
Especially, SCSS interprets interpolated expressions (#{..}) within /* */. If you place the $sm-xx definitions into // style comments, the file will compile. (Note that you cannot nest comments. The // lines must be outside of the /* */ block.)
Explaination
Sass supports standard multiline CSS comments with /* */, as well as single-line comments with //. The multiline comments are preserved in the CSS output where possible, while the single-line comments are removed. For example:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
is compiled to:
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
color: black; }
a {
color: green; }
Another example
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
is compiled to:
/* This CSS is generated by My Snazzy Framework version 1.2.3. */
Source: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments
Answer
this is why its trying to resolve variables inside your /* */ and giving errors. to avoid this, use // instead.
This question already has answers here:
SASS variables not parsing correctly - Undefined variable: "$ct-white"
(2 answers)
Closed 7 years ago.
I'm using Koala to compile SASS and getting the following error:
C:.....\HTML\scss\style.scss
Error: Undefined variable: "$font-primary".
on line 2 of C:...../HTML/scss/_base.scss
from line 7 of C:.....\HTML\scss\style.scss
Use --trace for backtrace.
EDIT - For reference, here are the code snippets I'm currently using:
style.scss
// Vendor
#import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
#import 'vendor/foundation';
#import 'vendor/normalize';
// Base
#import 'base';
#import 'mixins';
#import 'variables';
// Layout
#import 'header';
#import 'footer';
_variables.scss
// Colours
$black: #2e2e2e;
$cream: #fcfbf5;
$green: #b2ca9d;
$green-dark: #4d6638;
$grey-light: #808080;
$grey: #4f4f4f;
$pink-light: #f8d8d8;
$pink: #f0acac;
$pink-dark: #835151;
$white: #ffffff;
// Fonts
$font-primary: 'Droid Serif', serif;
_base.scss
body {
font-family: $font-primary;
line-height: 1.5;
color: $black;
}
h1, h2, h3, h4, h5, h6 {
font-family: $font-primary;
text-transform: uppercase;
letter-spacing: 0.1rem;
}
h1, h2 {
font-size: 2.25rem;
}
.image-replace {
width: 100%;
height: 0;
display: inline-block;
font: 0/0 a;
text-shadow: none;
color: transparent;
border: 0;
background-color: transparent;
}
My issue is that the variable $font-primary most definitely is being defined in _variables.scss (which is also definitely being imported into my main style.scss) so I'm really confused about how/why the error is being generated.
I have checked the encoding of all my files and they are using UTF-8 without BOM, which was a suggested fix in other similar questions.
Incidentally, this is the first variable referenced in _base.scss. If I remove the reference, the error remains but moves on to the next variable reference in the file.
Thanks in advance!
I think you just only have to re-order the includes, calling the _variables.scss before you call _base.scss:
// Base
#import 'variables';
#import 'base';
#import 'mixins';
I am getting Mixin flexbox doesn't have an argument named $version in the following code. I have Compass 1.0.1 installed.
#import "compass/css3/flexbox";
#mixin all-spec-display-flex() {
#include flexbox((display: box, flex-direction: row), $version: 1);
#include flexbox((display: flexbox, flex-direction: row), $version: 2);
#include flexbox((display: box, flex-direction: row));
}
I opened the _flexbox.scss file in Compass and I do see the $version param there.