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.
This is the error I get:
Properties are only allowed within rules, directives, mixin includes, or other properties.
It happens when I comment out #include label;
Can anyone assist?
Here's my code:
#charset "UTF-8";
#import 'settings/settings';
#import 'foundation';
#include foundation-button;
#include foundation-dropdown;
#include label;
body {
background-color: grey;
}
div {
margin-top: 10px;
}
$button-palette: map-remove($foundation-palette, (
primary,
secondary
)) !default;
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.
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';
Here's what I'm trying to do, I'd like to create a mixin that allows a variable number of properties, and also allows me to use single DRY vals for (in this example) a transition.
So I could say, "transition the box-shadow, border, and width # .2s with a ease-in."
Here's some pretty serious psuedo-code off the top of my head. The part I'm most unsure about is how to take the list so that it compiles in the proper way. I wasn't sure if append would be the right way, or if I needed to concatenate a string var, or what?
/* move object*/
.moveit{
#include grouped-trans((box-shadow, border, width), 0.2s, ease-in);
}
/* mixin */
#mixin grouped-trans($list, $time, $ease)
{
#each $prop in $list {
//transition: append($prop, $time, $ease);
// - or -
//$tmp_var + $list, $time, $ease;
}
I know there are ways to incorporate variable args using methods like string interpolation #{} and including '...' as a parameter. But I - ideally - would like to find a way to execute this in the way I described.
Here's how you build the mixin you're looking for. Note that this does require use of Compass, but it's silly to use Sass without using Compass.
#import "compass";
#mixin grouped-trans($list, $time, $ease) {
#include transition-property($list);
#include transition-duration($time);
#include transition-timing-function($ease);
}
.moveit {
#include grouped-trans((box-shadow, border, width), 0.2s, ease-in);
}
The above SCSS will compile to the following CSS:
.moveit {
-webkit-transition-property: box-shadow, border, width;
-moz-transition-property: box-shadow, border, width;
-o-transition-property: box-shadow, border, width;
transition-property: box-shadow, border, width;
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
}