=rounded(!rad)
:-moz-border-radius = !rad
:-webkit-border-radius = !rad
:border-radius = !rad
I have this mixin defined in a .sass file. When I try to compile it with sass style.sass style2.css, I get this error:
Syntax error on line 2: Undefined constant: "!rad".
I've looked through the docs and can't find what I am doing wrong. If I reduce the sass file to just this section, the error still happens. I am not using it with Ruby/
That mixin looks absolutely correct to me. Is that in style.sass or style2.sass? I'm guessing you're defining it in one, and using it in the other.The first thing to check would be that when you're mixing it in, you're not forgetting to pass an argument. For instance:
.round_div
+round // will not work
Instead of
.round_div
+round(1em) // should work
If that's not the case, try updating Sass. The ability to pass arguments to mixins was added in 2.2.0.
I've got a gist a put up a few days ago for a slightly more complex version of the same mixin. It's working fine for me as long as I mix it in with an argument, and have a new enough version of Sass.
Related
I have a entry file:
#use '_mixins';
#use '_default';
Now when I use a mixin in default.scss it throws the error:
Dart Sass failed with this error: Error: Undefined mixin.
Since #use is encouraged I don't understand why this doesn't work. If I write #import like in the olden days it works well:
#import '_mixins';
#import '_default';
This way all is nice and dandy.
How do I have to use #use and still have everything available?
That may be because the use of the new rule #use has an high impact to the way you build your project structure. Using of #usechanges it dramatically:
With #import you add a file and the mixins/vars/modules are ready to use in every sass file you load later on.
With #use you have to load the special sass file you need (i.e. '_mixins') direct in the file where you want to use it direct ... not to the main file. (Yes: loading the mixins/functions/variables-files to EVERY single partial file where you want to use them is the NEW INTENDED way to write sass.
And one more point to your using of #use: If you load by #use 'mixins you have to call the mixin in your file in the separated namespace #include mixins.yourMixinYouCall. If you want to load the mixins without separated namespace you can do: #use 'mixins' as *.
This changing to seperate namespace has some advantages. But indeed that is a really big impact and a very hard discussed theme about the new way to build your sass files.
We had this this week and before posting that twice you may have a look to this posting:
The #use feature of Sass
I'm working with some SASS code, written for ruby-sass v3.2. In some of the stylesheets, property declarations are written like:
.something
:height 10em
:width 100%
:font-size 1.5em
This compiles and appears to be valid, but I can't find reference to it anywhere. Is this just a quirk of Ruby parsing them as symbols, or something in SASS I've never seen before?
I had to use Wayback Machine to find the "official" information, and it seems that it is just the old SASS way to write a declaration:
Property Syntax
The indented syntax supports two ways of declaring CSS
properties. The first is just like CSS, except without the semicolon.
The second, however, places the colon before the property name. For
example:
#main
:color blue
:font-size 0.3em
By default, both ways may be used. However, the :property_syntax option may be used to specify that
only one property syntax is allowed.
I also found some others mentions of this syntax here:
Using colon syntax and variables in Sass
Convert Sass stylesheets from the old colon syntax
Deprecate old-style property syntax
Edit : there is also an online reference about this here.
I am trying to implement an SCSS component into my AngularCLI project (from Codepen: https://codepen.io/lbebber/pen/LELBEo).
When I run the following SCSS transform, transform:translate3d(cos(0.1)*115px,sin(0.1)*115px,0);
I get the following build error:
Module build failed:
transform:translate3d(cos(0.1)*115px, sin(0.1)*115px, 0);
^
Undefined operation: "cos(0.1) times 115px".
I read up on SASS/SCSS numeric conversions, but found this is not the issue - as I tried replicating this in the Codepen, and his code is working just fine, no flawed conversion logic.
I can only suspect this is an issue with my AngularCLI configuration, something isn't registering correctly, and the cosine is being interpreted as a string instead of its numeric calculation. When hardcoding the numbers for cosine/sine, I get a valid build and see the UI functioning as expected.
Do I need to configure the AngularCLI project in a way that lets the SCSS process the numeric values for cosine/sine before stepping into the equation as a string? If so, how?
Much appreciation for anyone that has the Angular-fu to figure out how to get this to work.
As we have found out it’s because your CodePen example uses the Compass Math Helpers functions which you don’t have/use.
You could instead for example import mathsass. It should cover the same amout of functionality.
I'm currently on the 1.2.1 version of SGS and finding that the grid-toggle mixin is failing for me.
According to the current WIKI docs it states:
If you'd like to be able to toggle your grid on and off, the grid-toggle mixin can be used. The grid-toggle mixin should not be used from within a selector; it will write its own.
To me the most important part is the entire 2nd sentence which states…
The grid-toggle mixin SHOULD NOT be used from within a selector.
When I run compass:dist I get the following…
Undefined mixin 'grid-toggle'
Here's a codeshare of my current SGS Sass file http://codeshare.io/Ek0sH and here's another codeshare of my gems in use w/versions of each listed. http://codeshare.io/NEzzr
grid-toggle has been removed.
Sam 'Snugug' Richards, the maintainer of Singularity, claims that it never worked properly anyway.
The docs are to be updated.
See the corresponding discussion: https://github.com/Team-Sass/Singularity/issues/195
I'm trying to create a variable that will switch styles by changing it's value.
something like:
$style: 1;
$color1: #f60;
$color2: #096;
$color: $color#{style};
.a{
color: $color;
}
Unfortunately the result is: Undefined variable: "$color".
Could someone explain to me why this doesn't work?
Seems like this feature got added in SASS 3.3
When we released Sass 3.02, we added support for SCSS, which meant we had to actually parse all the selectors in the document. This meant that you couldn't just plop the parent selector, &, anywhere in a selector. Overall this was an improvement: it caught more errors and encouraged users to write more flexible mixins.
Unfortunately, it also made one important use-case harder. With the rise in popularity of BEM, OOCSS, and SMACSS, people became more and more interested in adding suffixes to classes. When using Sass, they wanted to write mixins to do this, and the restrictions on & made that very hard to do.
In Sass 3.3, we're loosening these restrictions. You can now write &-suffix (or &_suffix, or even &suffix if you really want) and Sass will make it work. If this fails to apply—for example, if & is * —Sass will print a helpful error message.
source