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.
Related
This question already has an answer here:
SCSS target class before :hover
(1 answer)
Closed 2 years ago.
.card {
&__header {}
&__title {}
&__content {}
&__hasFullImage {
&:hover {
&__header {}
//I want something like this
.card__header {}
//and not to type the parent class
}
}
}
So Im facing a situation where I'm using BEM with SASS, and for me the whole point of this is I can grab my SCSS file to other project change the name of the parent class to whatever I want and will work. But in this situation on Hover I can't reach the .card__header without using &__header, so If I change the parent class I will need to change the class on hover aswell.
Because the output will be .card__hasFullImage .card__hasFullImage__header and what I want is .card__hasFullImage .card__header.
Is there any way to do this without typing the parent class?
.card {
$this: &;
&__hasFullImage {
&:hover {
#{$this}__header {}
}
}
SCSS target class before :hover - I had same issue
This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
I know you can add a parent selector like this:
.main-selector {
.parent-selector & {
}
}
I'm trying to figure out if there is a way to go back to the .main-selector so I can add a hover state style to a child element. So, something like this:
.main-selector {
.child-selector {
*styles*
.main-selector:hover & {
*hover styles*
}
}
}
The correct syntax would be:
.main-selector {
.child-selector {
*styles*
}
&:hover {
*hover styles*
}
}
This will produce a hover for your main-selector. You could do it the other way arround, like so:
.main-selector {
&:hover {
*hover styles*
}
.child-selector {
*styles*
}
}
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.
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.