Is it possible to use the value of a selector as a variable?
.warning {
color:Red;
border:1px solid #{.warning.color};
}
or
.total {
padding-top:#{.font-size};
color:Red;
}
No. SASS does not build the object model in mind when parsing the code.
You'll have to keep all the necessary stuff in variables.
Related
I am trying to achieve the following in scss:
&.-icon-default, &.-icon-darker, &.-icon-dark {...}
However, using selector-append like:
#{selector-append(".-icon", "-default, -darker, -dark")} {...}
helps me achieve the following:
.-icon-default, .-icon-darker, .-icon-dark {...}
So I want to use the parent selector along with selector-append. Passing it directly to the strings in argument of selector-append gives me an error. Is there a way to solve this using selector-append or will I have to hardcode all such instances without using the selector-append function?
Include the & in the first argument. This SCSS:
div {
#{selector-append("&.-icon", "-default, -darker, -dark")} {
font-size: 2rem;
}
}
... compiles to this CSS:
div.-icon-default, div.-icon-darker, div.-icon-dark {
font-size: 2rem;
}
Is that the result you want?
I am using next.js and having an issue with a scss file using "global".
Getting this error:
Syntax error: Selector ":global .Select-control" is not pure (pure selectors must contain at least one local class or id)
.dropdownColor {
:global {
.Select-button {
border-color: $red-hue-4;
}
}
}
and
:global {
.Select-control {
border-radius: 2px;
border-color: $navy;
}
.Select-clear, .Select-arrow {
display: none;
}
}
Do I have to put this in my global scss file? Does the format change?
If you are using css modules as it appears you are, this will work to change the border color of an element with a global class of .Select-button nested inside your dropdownColor module:
.dropdownColor {
:global(.Select-button) {
border-color: $red-hue-4;
}
}
As the error states, :global must be nested inside a local (module) class or id. So while the above works, your second example does not because you have :global as a top-level item. Either nest it inside a local id or class like I have done above, or extract it out to a global stylesheet.
In a programming language like javascript, even though I don't make any a "returned" result in the end, but it still returns a value, "undefined".
In case of Sass, I know that #mixin does not "return" anything like #function.
However, it "actually" returns nothing at all?
If it returns something actually (something like "undefined" or "void"), then what it returns?
I'm not sure I get the question but...
Mixins lets you create reusable CSS declarations (CSS content) 'called' using #include.
Unlike functions you can't assign mixins to variables as they do not produce a return value (throws an error).
#function fs($value){
#return $value;
}
#mixin fs($value){
font-size: $value;
...
}
.class { // returns value
font-size: fs(16px); // => 16px;
}
.class { // generates properties and values
#include fs(16px); // => font-size: 16px; ...
}
$var: fs(16px); // will work (function)
$var: #include fs(16px); // won't work (mixin)
Try to read this article and this one, you have some answer :
"They obtain full CSS rules where properties that are dynamic will be passed into arguments"
So when you #include a #mixin in your code, it will return CSS rules.
I couldn't find a solution for this problem: I need to set a margin in SASS with a max between 2 values, one is a calc() and the other is a regular px value. It would be something like this:
$calculation: calc(15vw + 10px);
.cssClass {
margin-right: max($calculation, 100px);
}
Any ideas on how to create a SCSS function or some way to make this work? Thank you in advance!
The Sass max() function doesn't work with values that have different units.
That said, you can use the CSS max() function by overriding the Sass version with your own:
// Override Sass function
#function max($numbers...) {
#return m#{a}x(#{$numbers});
}
$calculation: calc(15vw + 10px);
.cssClass {
margin-right: max($calculation, 100px);
}
...the SCSS above compiles to this CSS:
.cssClass {
margin-right: max(calc(15vw + 10px), 100px);
}
Credit to Jianqiu Xiao on GitHub for pointing out this solution. Having to create a custom function is an unfortunate Sass compiler quirk, though it has apparently been fixed in Dart Sass already.
I'm not sure the best way of phrasing this, but through examples.
My desired output is:
.parent-class2.parent .child {
color: red;
}
This is the sort of syntax that I'm using.
.parent {
.child {
.parent-class2.& {
color: red;
}
}
}
Your syntax is almost there. There are two things to take note of:
1) SASS doesn't like redundant periods . in selectors (malformed selectors):
With .parent-class2.& the period before .& is redundant since & = .parent .child
Notice that having the extra period before .& would incorrectly compile to
..parent .child
2) To use the ampersand in the middle of a selector without any spaces, you will have to wrap it with a string interpolation & → #{&} for SASS to evaluate it.
Here's the fixed version:
.parent {
.child {
.parent-class2#{&} {
color: red;
}
}
}
You can use the &#{&} selector ("&" is the parent, so we select "the parent of the parent").
As mentioned in https://css-tricks.com/the-sass-ampersand/#article-header-id-11
The interpolation brackets #{ } are needed as two touching ampersands are invalid Sass.
You can also take a look at #at-root selector which could be usefull in your case.