I'm upgrading an old Rails application and I see this:
.fa-email:before { #extend .fa-envelope:before }
as far as I understand this is deprecated syntax https://sass-lang.com/documentation/breaking-changes/extend-compound
but I can't find the right form for this and I get errors when I try:
Error: Invalid CSS after "...-email, :before": expected 1 selector or at-rule, was "{ #extend .fa-envel"
>> #extend .fa-email, :before { #extend .fa-envelope, :before }
-------------------------------^
Related
Basic idea would be to define my media query in one place. My current attempt looks like so:
$mobile: "#media (max-width: 600px):not(#app.force-desktop)";
#{$mobile} {
...
}
However this results in the error: SassError: Invalid CSS after "#": expected selector, was "#media (max-width: " Setting $mobile to (for example) only :not(#app.force-desktop) seems to compile properly.
Maybe there is a different way how to solve this issue, which would be totally fine by me.
You can just remove the #media:
$mobile: '(max-width: 600px):not(#app.force-desktop)';
#media #{$mobile} {
body {
color: blue;
}
}
I have a problem that I cannot understand. When I'm trying to remove parent selector with #at-root rule nothing changes in sass selector output.
.contact {
// Define first.
$styles: one, two, three;
// Mixins.
#import 'styles/mixins';
// Import placeholders.
#import 'styles/style-one/base';
#import 'styles/style-two/base';
#import 'styles/style-three/base';
// Loop through each style.
#each $style in $styles {
#at-root .form-style-#{$style}#{&} {
#extend %style-#{$style};
}
}
}
I'm expecting output like this:
.form-style-three.contact .field { border-color:#2d2d37 }
but instead of code above, I'm getting selector like this:
.contact .form-style-three.contact .field { border-color:#2d2d37 }
Am I missing something here? Is it loop that is causing this issue?
node-sass 4.13.0 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]
Here is the answer: https://www.sassmeister.com/gist/b0083f2459cadbbd787331e8d8e63976
you have to add #at-root rule to imported placeholders, not to the rules in loop.
With the new module system in sass (with #use instead of #import) how can i define a class in one file and the use it in another file with #extend ?
File colors.scss
.element {
background-color: blue;
}
main file
#use "./colors.scss" as colors;
body {
#extend .element;
}
This gives the following error:
"body" failed to #extend ".element".
The selector ".element" was not found.
Use "#extend .element !optional" if the extend should be able to fail.
Example:
https://stackblitz.com/edit/angular-tufq7f?file=src%2Fstyles.scss
How can I tell sass to get it from colors.scss?
Turns out there are a few different problems here. The first is that the stacblitz example is using an old version of sass witch does not have module support. The other is that there is no way to specify from witch sass module to extend a css class from. The correct solution is what I wrote in the question:
#extend .element;
Does the following work?
#use "./colors.scss" as colors;
body {
#extend colors.element;
}
(Modules are imported as a namespace, so you have to 'use' the 'module' by it's name)
https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace
I don't know why but while compiling with grunt or anything there is an error called invalid property name
#flotTip {
border: none !important;
font-size: $font-size-small !important;
line-height: 1px !important;
#extend .tooltip-inner() !important;
}
in the above code in the line-height it produces an undefined property. My task was to convert all less files into sass files. Used many solutions to convert all of them to sass as far as I can find. But this one I can't find any solution. Can anyone answer what might be the problem?
Extend is only for extending simple selectors, like class, element, or id. You cannot use !important with #extend. This is the correct way to use extend:
.foo {
color: red;
}
#flotTip {
#extend .foo;
}
You may be confused confusing extends with mixins, which also cannot use !important. This is the correct way to use mixins:
#mixin foo() {
color: red;
}
#flotTip {
#include foo();
}
The line-height: 1px !important; line looks fine. The problem is with the following line. If you're trying to include a mixin, use #include and don't prefix the mixin's name with . (dot). Also, don't put !important after it.
I would guess that you are using #extend incorrectly. See the docs here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works
I just started with sass and installed prepros. I tried to compile an .scss file and got an error:
Syntax error: Invalid CSS after " color: ": expected expression (e.g. 1px, bold), was "#blue;"
The .scss code:
.footer {
clear: both;
background-color: #blue;
}
I installed Ruby, and prepros.
SCSS uses $ to denote variables so it should be background-color: $blue;
It looks like your syntax is wrong. In Sass, # is for things like imports, media directives, partials (includes) and extends.
If you want to define a specific value for blue, and then reuse it, then the syntax is something like this:
$blue: #3333FF;
a {
font-weight: bold;
color: $blue;
}