This question already has answers here:
False positive "undefined variable" error when compiling SCSS
(4 answers)
Closed 7 years ago.
In my app.scss I import compass like this:
#import "compass/css3";
and I can use all the mixins in app.scss
But when I import a partial:
#import "structure";
and I want to use a mixins inside stucture.scss (e.g. #include border-radius(4px);)
I get the following error:
error structure.scss (Line 544: Undefined mixin 'border-radius'.)
EDIT:
app.scss contents:
#import "compass/css3";
#import "structure";
// other scss code
.promo-front img {
#include border-radius(4px);
}
structure.scss contents:
// other scss code
// this generates error structure.scss (Line 544: Undefined mixin 'border-radius'.)
.main-container {
#include border-radius(4px);
}
What do I do wrong?
thanks in adavance!
ok, I needed to rename structure.scss to _structure.scss to be properly recognized as a partial.
Related
I am using the Material Design Components for Web library. I have a tab component that I'd like to change the underline-color of.
The instructions say
To customize the tab indicator, use the following mixins.
Then it gives a table. For underline color, it says
underline-color($color) Customizes the color of the underline.
So, I try in my scss file, the following:
.mdc-tab-indicator {
underline-color(red);
}
I compile my sass (using dart-sass) and get the following error
Error: expected "{".
It says this is a "Sass Mixin." So, I look at the SASS documentation on mixins. I see nothing that follows the syntax mixin-name($variable). Everything in there looks like
#mixin reset-list {
margin: 0;
}
with curly braces, not parentheses. But, the error said it was expecting a curly brace, and also apparently the # symbol is required. So, I try:
.mdc-tab-indicator {
#underline-color(red);
}
This doesn't throw an error, but doesn't cause the underline color to change. I try to follow the syntax of the sass docs:
.mdc-tab-indicator {
#underline-color(red){};
}
No error, but no color change. I try to match the syntax better:
.mdc-tab-indicator {
#mixin underline-color(red){};
}
This throws
Error: expected ")".
I try
.mdc-tab-indicator {
#mixin underline-color(red);
}
Same error.
I don't understand what the material components documentation is instructing. What does it mean when it says "To customize the tab indicator, use the following mixins." ? How can I change the underline color of the Material Design Component tab indicator?
Mixins are defined using the #mixin at-rule, which is written #mixin { ... } or #mixin name() { ... }. A mixin’s name can be any Sass identifier, and it can contain any statement other than top-level statements. They can be used to encapsulate styles that can be dropped into a single style rule; they can contain style rules of their own that can be nested in other rules or included at the top level of the stylesheet; or they can just serve to modify variables.
Mixins are included into the current context using the #include at-rule, which is written #include or #include (), with the name of the mixin being included.
So, to include your specific mixin use:
.mdc-tab-indicator {
#include underline-color(red);
}
See more at https://sass-lang.com/documentation/at-rules/mixin
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Gulp-sass is crashing because of an error - because it was crashing at first I didn't even get an error, then I ran the sass through the ruby compiler instead I got the following.
error neat/grid/_media.scss (Line 34: Illegal nesting: Only properties maybe nested beneath properties)
I can't see anything wrong with _media.scss therefore I don't know what the error message is referring to.
I have seen answers on Stackoverflow for the meaning of this error message from Sass code but I cannot see how this message could apply to Scss code because indentation is not an issue in Scss.
Here's a link to the neat/grid/_media.scss which is mentioned in the error message.
https://github.com/thoughtbot/neat/blob/master/app/assets/stylesheets/grid/_media.scss
Heres the docs for the mixin.
http://thoughtbot.github.io/neat-docs/latest/#media
Heres the actual code in the file that is mentioned in the error message:
#mixin media($query: $feature $value $columns, $total-columns: $grid- columns) {
#if length($query) == 1 {
#media screen and ($default-feature: nth($query, 1)) {
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns !global;
#content;
$grid-columns: $default-grid-columns !global;
}
} #else {
$loop-to: length($query);
$media-query: "screen and ";
$default-grid-columns: $grid-columns;
$grid-columns: $total-columns !global;
#if is-not(is-even(length($query))) {
$grid-columns: nth($query, $loop-to) !global;
$loop-to: $loop-to - 1;
}
$i: 1;
#while $i <= $loop-to {
$media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";
#if ($i + 1) != $loop-to {
$media-query: $media-query + "and ";
}
$i: $i + 2;
}
#media #{$media-query} {
#content;
$grid-columns: $default-grid-columns !global;
}
}
}
Does anyone know what the error message means for SCSS (not Sass) ? It says there is an nesting (indentation) error in _media.scss but SCSS doesn't care about indentation!
The lessons I learned that I hope will save someone else a lot of time are:
When sass-gulp crashes it is more than likely a sass/scss error rather than a gulp error.I didn't know this because most syntax errors get piped to the console by error handling in the gulp file, however it turns out if your error is a little more serious it can still crash gulp.
When you get an error message from a scss or sass file the error might not actually be in that file. I ended up randomly disabling all files to eventually find the offending file because the error message gave the wrong file name.
I found this out after sass-gulp started working again when I commented out lines 10 and 37 in _media.scss which are the '#content ' directives even though there weren't actually any errors in these lines or even in the _media.scss file:
What is #content directive ?
These directives call my code from other sass files. It was my own files else where that were breaking the mixin and making gulp crash when they were called by #content
If you look in the .find-drawer class from the offending file you will see that all the media queries are nested inside the margin-bottom: -33px rule
.find-drawer
margin-bottom: -33px
#include media(max-width $tablet-size)
margin-bottom: 0
#include media(max-width $small-screen)
margin-bottom: 0
#include media(max-width $mobile-screen)
margin-bottom: 0
This must have generated a really crazy media queries because it was fed into a loop in _media.scss
I just shifted the media queries a couple of spaces to the left so that they are now nested inside .find-drawer class
.find-drawer
margin-bottom: -33px
#include media(max-width $tablet-size)
margin-bottom: 0
#include media(max-width $small-screen)
margin-bottom: 0
#include media(max-width $mobile-screen)
margin-bottom: 0
Phew! What a relief !
I'm using Bourbon and SASS-flavour Bootstrap. Here's my base SCSS file:
#import '../../bower_components/bourbon/dist/_bourbon.scss';
#import 'app/swatches.scss';
#import '../../bower_components/bootstrap-sass/lib/bootstrap.scss';
#import 'app/theme.scss';
The idea is that I pull in Bourbon first because I intend to use it all over the place, call in swatches.scss to set app-wide variables, call in Bootstrap (which uses some of the swatches), and then go about customising my application on top of Bootstrap. swatches.scss looks like this:
// The brand
$blue : #0078ae;
$grey-light : #58595b;
$grey-dark : #59595e;
$gradient-blue : linear-gradient( #0089ca, #006cb9 );
$gradient-grey : linear-gradient( #e1e2e2 0, #d8d9da 33%, #cecece 33.001%, #b8b8b8 100% );
// Set Bootstrap's variables (map back to our own vars if need be)
$brand-primary : $blue;
$btn-default-color : #fff;
$panel-primary-heading-bg : $gradient-blue;
$panel-default-heading-bg : $gradient-grey;
%gradient-blue {
#include background-image( $gradient-blue );
}
Somehow, Bootstrap doesn't receive the compiled output of $gradient-blue — it receives the uncompiled string linear-gradient( #0089ca, #006cb9 ). Code in theme.scss has no problem invoking $gradient-blue (or the extension %gradient-blue).
I would have expected $gradient-blue to compile once and be done. How is this not happening?
I think you should use linear-gradient in syntax:
$gradient-blue : #include linear-gradient( #0089ca, #006cb9 );
$gradient-grey : #include linear-gradient( #e1e2e2 0, #d8d9da 33%, #cecece 33.001%, #b8b8b8 100% );
because it's a mixin. Look at documentation: http://bourbon.io/docs/#linear-gradient
I've recently decided I want to have some default actions that run when my SASS is compiled and found this stack overflow question which helped me write a function to do it (Use variable defined in config.rb in scss files)
The colour value gets pulled through fine and is treated like a SASS color object (i.e. if I pass '#ff0000' into the function it comes out as 'red' which is fine) but it doesn't work in the tint() and shade() functions.
The error I get is
(Line 137: "#ff1122" is not a color for 'shade')
But if I comment out all of the instances of tint() and shade() then it works perfectly.
Here's all the code that's being used:
config.rb (taken from the stack overflow link up there mentioned before)
sass_options = {:custom => { :custom_colors => {"main" => "#ff1122"} } }
module Sass::Script::Functions
def custom_color(value)
rgb = options[:custom][:custom_colors][value.to_s].scan(/^#?(..?)(..?)(..?)$/).first.map {|a| a.ljust(2, a).to_i(16)}
Sass::Script::Color.new(rgb)
end
end
style.scss (line 5)
$col_primary : #{custom_color(main)};
style.scss (line 137 that was mentioned in the error)
#include background-with-css2-fallback(linear-gradient(-45deg, transparent 51%, shade($col_primary, 10) 50%, $col_primary 75%, $col_primary 0%));
I can't see a reason that this wouldn't work as it works as a colour elsewhere.
I can give more info if needed
My problem ended up being this
$col_primary : #{custom_color(main)};
Which I took from the example - I think SASS interprets that as a string and so it doesn't matter that the function is returning the correct type.
I have a SCSS project that builds on top of Foundation via Compass. It defines a set of sass variables, then defines a bunch of rules in terms of those variables: (my project has many more variable settings and import statements; this is simplified.)
vars.scss:
$foo = #fafafa
$bar = 14px;
// rules using $foo and $bar
#import '_rules';
I then use compass to compile vars.scss, and everything is great for that set of sass variables. However, I also want the ability to theme my app differently, and generate a different theme by defining a new set of variables which can override the original variables:
vars.scss:
$foo = #fafafa
$bar = 14px;
#import 'otherVars';
#import '_rules';
I can't edit the file manually when I have 70+ themes. (Having that many themes is necessary for the purposes of my app.) What I really want is to be able to do something like the following:
vars.scss:
$foo = #fafafa
$bar = 14px;
#import '{{otherVars}}';
#import '_rules';
And then I could call something like:
compass --otherVars themes/theme2
It would then be easy to whip out all the themes, because I could call compass once for each theme.
Does SCSS let you do this? I looked into it, and it doesn't look like it.
My current workaround is to split the original vars.scss into a prefix and suffix:
_app_prefix.scss:
$foo = #fafafa
$bar = 14px;
_app_suffix.scss:
#import '_rules';
app.scss:
#import '_app_prefix';
// no overrides by default
#import '_app_suffix';
And to override it for a specific theme, you'd make a file that looks like:
theme2.scss:
#import '_app_prefix';
// only override $foo - let the original value of $bar stand
$foo = #ebebeb;
#import '_app_suffix';
This works, but is sorta painful and introduces additional boilerplate.
My next problem is wanting to have additional #import 'rules_foo' statements, which also need to be constructed dynamically. So my overall fantasy would look like:
vars.scss:
$foo = #fafafa
$bar = 14px;
#import '{{otherVars}}';
#import '_rules';
{{ #import 'additional_rules' for additional_rules in rules }}
And I could call:
compass --otherVars themes/theme2 --rules "rules_1" "rules_2" "rules_3"
(Obviously this is somewhat handwavy but hopefully you get the idea.)
Is there a way to do this? Or am I going to have to resort to handlebars or some other templating language?
For people who are using Grunt to compile their SCSS/SASS files, the solution was to add an extra parameter loadPath to "sass" task configuration as follows:
sass: {
options: {
loadPath: ['../src/css/themes/myTheme/'],
style: 'nested',
precision: 2
},
And then in the /src/css/import.scss you can include those files from the theme as if they were in current directory:
#import "config";
The file was included from /src/css/themes/myTheme/config.scss.
NOTE: You can of course add a parameter to your Grunt task and have that theme name dynamic!
You could always generate a temporary file that you send to compass. With python code:
import sys
with open('tmp.scss', 'w') as out:
out.write(("""
$foo = #fafafa
$bar = 14px;
#import '%(pre-rules)s';
#import '_rules';
%(post-rules)s
""" % {'pre-rules': sys.argv[1], 'post-rules': '\n'.join(["#import '%s';" % x for x in sys.argv[2:]])}).strip())
You'd call it like:
python stackoverflow.py themes/theme2 rules_1 rules_2 rules_3
And it creates/overwrites tmp.scss with the output you want.