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';
Related
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.
We are using Rails+Sprockets+Compass. Compass defines a linear-gradient function, which conflicts with the css function of the same name.
After our scss file does an #import "compass", is there a way to remove Compass's linear-gradient function so that I can insert a raw linear-gradient into css?
I know I can redefine the function, but I still can't figure out how to redefine it so that I can insert a raw linear-gradient. I want to remove the function entirely.
The problem is that we're migrating to libsass, which means that Compass's Ruby-based functions no longer work. So this
#import "compass";
.tmp {
button-background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
which I would like to be output as-is, compiles to this:
.tmp {
button-background: _linear-gradient_legacy(compact(to bottom), #fdefd4, #fdc154...);
}
where _linear-gradient_legacy is a Ruby-based compass function that will no longer be expanded under libsass.
Compass expects you to use the provided background and background-image functions whenever you use either of the gradient functions (linear/radial). This is how you get your prefixes. The reason why the functions involved are written in Ruby is so that you can get an SVG gradient for browsers that don't support gradients.
If you want absolutely none of that, just redefine the function like so:
#function linear-gradient($options...) {
#return #{'linear-gradient(#{$options})'};
}
Before redeclaring the function:
#import "compass/css3";
.foo {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
.bar {
#include background(linear-gradient(to bottom, #fdefd4, #fdc154));
}
Output:
.foo {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
.bar {
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkZWZkNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZkYzE1NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fdefd4), color-stop(100%, #fdc154));
background: -moz-linear-gradient(top, #fdefd4, #fdc154);
background: -webkit-linear-gradient(top, #fdefd4, #fdc154);
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
After:
#import "compass/css3";
#function linear-gradient($options...) {
#return #{'linear-gradient(#{$options})'};
}
.foo {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
.bar {
#include background(linear-gradient(to bottom, #fdefd4, #fdc154));
}
Output:
.foo {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
.bar {
background: linear-gradient(to bottom, #fdefd4, #fdc154);
}
Otherwise, you'll have to implement your own versions of the Ruby functions in Sass.
I'm currently trying to create a mix-in that will let me build buttons with hover values using the darken and lighten color functions in sass. My code for some reason is spitting out white and black for the background color instead of the hex value of a returned color. Here it is on code pen: http://codepen.io/malikabee/pen/vEQZOv
$btn_color: #fff;
$btn_alpha: 1;
$btn_color_amount: 100%;
$color_funcs: (
'darken': darken($btn_color, $btn_color_amount),
'lighten': lighten($btn_color, $btn_color_amount),
'transparentize': transparentize($btn_color, $btn_alpha)
);
#mixin _btn_color($base_color, $amount, $hover){
background: $base_color;
a:hover,
a:focus{
#each $func_name, $color_func in $color_funcs{
#if($func_name == $hover){
$btn_color: $base_color;
$btn_color_amount: $amount;
background-color: $color_func;
}
}
}
}
.btn{
display: inline-block;
vertical-align: bottom;
text-align: center;
border-radius: 10px;
text-decoration: none;
}
.btn_blue{
#include _btn_color(#3c3c3c, 10%, 'darken');
}
Once you get past this block of code, the expressions don't exist anymore, only the value they evaluated to does:
$color_funcs: (
'darken': darken($btn_color, $btn_color_amount),
'lighten': lighten($btn_color, $btn_color_amount),
'transparentize': transparentize($btn_color, $btn_alpha)
);
Changing $btn_color after this point does nothing. Sass cannot to go back in time and re-run those expressions because they've already been evaluated using the original color (black).
What you can do instead is use the call function.
#mixin _btn_color($base_color, $amount, $func){
background: $base_color;
a:hover,
a:focus{
background-color: call($func, $base_color, $amount);
}
}
.btn_blue{
#include _btn_color(blue, 10%, 'darken');
color: white;
}