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
Related
I have a main.scss file that I want to import colors into from a _colors file.
I have defined a body color in the color file, when I try to import it, I see no changes in the webpage. They are both in the same scss folder but neither #include or #import seem to make a difference. I have tried with and without the underscore in my import statement, both single and double quotes and both import and include keywords. Please tell me what stupid mistake I am making that will rectify this problem as I have researched the problem and think I have been able to copy the examples with no success.
_colors.scss
body {
$background-color: maroon;
}
main.scss
#include 'colors';
Partials are used with #use directive. Then,
_colours.scss
body{
background-color: maroon;
}
style.scss
#use "_colours";
The reuse of code is done through the #mixin directive.
_colours.scss
#mixin body--background{
background-color:maroon;
}
style.scss
#use "_colours.scss" as so;
body{
#include so.body--background;
}
But, if you want to just define just colours use variables instead. Example below,
_colours.scss
$maroon=maroon;
$lightblue=//et cetera.
style.scss
#use "_colours";
body{
background-color:$maroon;
}
If you have a main.scss file which will be the file that gets compiled, and you want to import variables, mixins etc from another partial file, such as _colors.scss. You could do so by loading the members from the partial _colors.scss into main.scss with a #use at-rule. This allows loaded members from the module to be referenced with dot-notation throughout your main.scss stylesheet.
Let's say your _colors.scss file looked like this:
$bodyColor: maroon;
$someOtherColor: #f06;
/* adding a mixin for demo */
#mixin highlight($c, $bg) {
color: $c;
background: $bg;
}
/* some extra styles pertaining to _color.scss */
.some-styles {
color: $someOtherColor;
}
Note: The syntax for #use is #use <url> as <namespace>;.
You could load the variables/mixins etc into main.scss with a #use rule and reference the namespace throughout your program:
#use "./colors" as c;
body {
background-color: c.$bodyColor;
}
.highlighted {
#include c.highlight(#fff, #f06);
}
or without defining a namespace like:
#use "./colors" as *;
body {
background-color: $bodyColor;
}
.highlighted {
#include highlight(#fff, #f06);
}
You certainly can include a body {} declaration inside _colors.scss and load it the same way as discussed above, but I think your wanting to place the body style block inside main.scss and simply reference loaded variables from _color.scss. If you have a directory of many partials and want to load them into main.scss without writing separate #use rules for each load, then introduce a index file with #forward rules to load an entiry directory of partials into main.scss using a single #use rule.
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.
I created a blank Ionic4 app and in the src/global.scss, I declare a variable $padding: 16px. I then tried to use the $padding in an element in home.page.scss as follows:
.highlight {
padding: $padding;
}
I expected it to output the following as it does in Ionic3:
.highlight {
padding: 16px;
}
Instead in Ionic4 I am getting an undefined variable on the $padding during the build process. Can we not use global SCSS variables within the page styles anymore or am I missing something obvious here?
You need to import the global.scss file in your page.scss file to get it work
#import '../../global.scss';
Since global.scss already include for the project. So the solution is that you make a new file common.scss and import it inside page.scss with
#import '../../common.scss';
And inside common.scss you can type
$padding: 16px
I know you can do an import inside a class like this:
.my-class
{
#import "another-file.scss";
}
Such that a class .foo in another-file.scss will compile to .my-class .foo in the output.
What I want to do is import a file such that all the rules in the file get a certain class added to them, like this:
.my-class
{
&#import "another-file.scss";
}
Such that .foo in another-file.scss will compile to .my-class.foo in the output.
I'm building a set of components that all share a class because they are all part of the same "kit", and I want them all to share a class that denotes them as such, but I don't want to have them all in the same file under one giant nest.
Is this possible?
Thanks!
To accomplish this, you just need to preface the selectors in the file you are importing with &.
For example, if you were to import the following file, it would create rules for .my-class.header, my-class.header.cool and my-class.footer:
&.header {
color: blue;
&.cool {
font-size: 20px;
}
}
&.footer {
color: blue;
}
I have style.scss that imports
_declarations.scss
_button.scss
in _declarations.scss, I have a placeholder declaration of
%blah{
colour: red;
width: 100%;
}
Inside style.scss, I can have a selector like this
.extend_it{
#extend %blah;
}
And the styles I'd expect are pulled into the .extend_it selector.
However if I try the same from within _button.scss I am unable to extend the %blah placeholder.
Is there a way around this?