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.
Related
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 a CSS class inherit one or more other classes?
(29 answers)
Closed 7 years ago.
There is a way to do this in css ?
.main-div {
.input { ... }
.select { ... }
.a { ... }
.li { ... }
....
}
You would need a preprocessor language like Sass or LESS. Then you could do exactly that.
You could use a CSS-preprocessor like LESS or SASS. But there is currently no way to accomplish this in pure CSS.
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)
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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS selector by style attribute
html:
<div data-family='arial'></div>
in css i want to use this family value. Example:
div{font-family: attr(data-family)}
Family can be any string.
How make it work?
Try this code:
div[data-weight="bold"]{
font-weight: bold;
}
http://www.w3.org/TR/selectors/#attribute-selectors
JSFIDDLE
You can use the following:
div[data-weight="bold"] { font-weight: bold; }
But I don't believe there's any way to use an attribute as a property without some JavaScript
You cannot achieve what you ask about in pure CSS. Using jQuery it could be done this way:
$.each($('div'), function(i, div) {
$.each($(this).data(), function(key, val) {
var realKey = key.replace(/([A-Z]{1})/g, '-$1').toLowerCase();
$(div).css(realKey, val);
})
})
Check this DEMO.