This question already has an answer here:
Sass store selector in variable
(1 answer)
Closed 7 years ago.
I'm trying to use multiple class inside a variable using the Interpolation method.
This method work for me if I have one class and I use it like this:
$class: classname1;
.#{class} {
color: red;
}
But if I want to use more the one class I have a problem:
$class: classname1.classname2;
.#{class} {
color: red;
}
This snippet give me an error because of the dot inside the variable. I tried some other options but nothing worked.
Any idea how to solve this issue? Thanks!
Use a string as a variable
$class: ".classname1.classname2";
#{$class} {
color: red;
}
(tested on sassmeister)
Related
I have a long list of classes I wish to use in a couple of ways.
The list looks something like this (but much longer):
$my-components: '.some-component', '.some-other-component', '.another-component';
One of the ways I need to use this list of class names in SASS (scss), which I can't figure out, is to create a long chained selector of :not()s. The final rendered output should look like this:
.parent {
> * {
&:last-of-type:not(.some-component):not(.some-other-component):not(.another-component):not(etc) {
// style rules
}
}
}
(The goal being to select the last child element of .parent that doesn't have one of the classes in the list).
Question: How can I make the above code DRY by using the $my-components variable?
Note 1: The loop's output needs to be able to be appended to that &:last-of-type, as in above example.
Note 2: I'm using the $my-components variable already in a different function, so I'd like to keep it in the same format if possible.
Note 3: I know this seems hacky and stupid, and that I should just give all of those elements a common shared class instead. But unfortunately I can not currently modify that part of the DOM.
Use a #each loop
scss:
$my-components: '.some-component', '.some-other-component', '.another-component';
.parent {
> * {
$selector: '';
#each $component in $my-components {
$selector: $selector + ":not(#{$component})"
}
&:last-of-type#{$selector} {
color: blue;
}
}
}
css:
.parent > *:last-of-type:not(.some-component):not(.some-other-component):not(.another-component) {
color: blue;
}
What's happening ?
I define a new string variable $selector.
During the #each loop, I'm concatening the string with :not(#{$component}) to add your new selector.
This question already has answers here:
CSS Selector that applies to elements with two classes
(2 answers)
Closed 7 years ago.
I have a <div> in my application. It is set to have a class of "enumPanel" and dynamically I add the class "current".
How can I wire this up in less so that my properties will come into effect only when both classes are present on the div ?
.enumPanel .current {
// this does not seem to work
}
CSS
.enumPanel.current {}
LESS
.enumPanel {
&.current {
}
}
.enumPanel.current {
// this will work
}
This question already has answers here:
Can I use variables for selectors?
(4 answers)
Closed 7 years ago.
I would like to know how I can pass a pseudo selector as variable in SASS. I have the following mixin
#mixin pseudoawesome($fa-symbol, $pseudo) {
&$pseudo { // <-- here is the error
content: $fa-symbol;
font-family: FontAwesome;
}
}
and I want to use it like:
#include pseudoawesome(' \f105', ':after');
but I cannot pass :after as argument for $pseudo. Is this somehow possible, or doesn't allow SASS using variables as selector at all?
Thanks
Yes, you can. You must write the name of variable inside the braces:
#{$yourVariable}
#mixin pseudoawesome($fa-symbol, $pseudo) {
&#{$pseudo} {
content: $fa-symbol;
font-family: FontAwesome;
}
}
EDIT: you can find this information here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_
Just search with chrome: "If you want to use"
The section didn't have the anchor tags.
I have been trying this for a while, looking at other answers, but to no avail. Hopefully someone can help me.
I am trying to generate some dynamic variable names within a mixin.
The variables are already defined:
#horizontal-default-color: #fff;
#horizontal-inverse-color: #000;
etc..
The mixin I want would be something like this:
.horizontal-variant(#variant) {
color: #{horizontal-#{#variant}-color}
}
And the result I am expecting, when called:
.horizontal-default{
.horizontal-variant(~"default");
}
.horizontal-inverse{
.horizontal-variant(~"inverse");
}
is
.horizontal-default {color: #fff}
.horizontal-inverse {color: #000}
Unfortunately I run into errors every time.
I know this can be done, I have seen it being used in Font Awesome LESS where #{fa-css-prefix} is defined in variables. I am just having trouble transporting the same solution in my project.
You can try testing the code at http://lesstester.com/
You can use Variable Names. And I've tested the code at http://lesstester.com/, it works.
#horizontal-default-color: #fff;
#horizontal-inverse-color: #000;
.horizontal-variant(#variant) {
#color: "horizontal-#{variant}-color";
color: ##color;
}
.horizontal-default{
.horizontal-variant(default);
}
.horizontal-inverse{
.horizontal-variant(inverse);
}
This question already has answers here:
Can I use variables for selectors?
(4 answers)
Closed 7 years ago.
Hi all I'm new to SASS (late I know) and playing around with mixins.
Basically is there a way to link a variable to a string here is what I'm trying to do but it throws errors.
(This is a condensed version)
#mixin post-link ($class, $color, $hover) {
a.$class:link {
color: $color;
}
a.$class:hover {
color: $hover;
}
}
Link I say this is a little simpler than what I am trying to do in the mixin (more variables in full one).
EDIT: should add i'm using Compass.
Thanks
Yes, you just have to use variable interpolation. Example:
#mixin post-link ($class, $color, $hover) {
a.#{$class}:link {
color: $color;
}
a.#{$class}:hover {
color: $hover;
}
}
Example on SassMeister: http://sassmeister.com/gist/9533103
The key is adding #{ and } around your variable names to get them expanded.