I have a class of .track with a bem class of &__waveform inside it should return .track__waveform, but the parent .track class can have an .active on it as well, how do I target &__waveform inside of the .active modifier?
.track {
&__waveform {
display: none;
}
&.active {
&__waveform {
display: block;
}
}
}
I need it to output
.track.active .track__waveform {
display:block;
}
I can do it just by putting the full .track__waveform class inside of the .active class, but I feel there should be a way to use a child combinator.
.track {
&.active &__waveform {
display: block;
}
}
.track {
&.active {
.track__waveform {
display: block;
}
}
}
that's all...
The .active class should be a modifier: .track--active
So the needed selector should be .track--active track__waveform.
One way to do it with sass nesting is:
.track {
$block: &;
&--active {
#{$block}__waveform {
display: block;
}
}
}
Related
How to better write this code with three translations? I want to use only one class with three translations instead of three class, my code:
.test > li.nav-item:lang(en):nth-child(1):after {
content: "BNM";
margin-left: 10px;
}
.test > li.nav-item:lang(fr):nth-child(1):after {
content: "XYZ";
margin-left: 10px;
}
.test > li.nav-item:lang(pl):nth-child(1):after {
content: "YUI";
margin-left: 10px;
}
i want something like this:
.test > li.nav-item:nth-child(1)
&:lang(en):after {}
&:lang(fr):after {}
&:lang(pl):after {}
or something like this
Without a preprocessor you can reduce the code using a CSS variable, e.g.
:lang(en) { --label: "BNM"; }
:lang(fr) { --label: "XYZ"; }
:lang(pl) { --label: "YUI"; }
li.nav-item:nth-child(1)::after {
margin-left: 10px;
content: var(--label);
}
<ul class="test" lang="pl">
<li class="nav-item">1</li>
<li class="nav-item">2</li>
<li class="nav-item">3</li>
</ul>
If no lang attribute is defined then the --label variable will be undefined and will not be written in the ::after pseudoelement.
I have 2 classes one is .bot class and 2nd is .tools class. On click of filter-button class I am trying to activate (display) tools class which has dropdown button. For some reason this is not working for me.
Here is my scss code
.bot {
&:active {
.tools {
display: block;
}
}
}
Here is my html code
<button class="bot" (click)="toggleFilters()">Filter <fa-icon [icon]="filter">
</fa-icon>
</button>
<div class="demos">
<div class="tools"
*ngIf="Data.length > 1">
</div>
Try using this instead
.filter-button {
&:active {
+ .demos {
.tools {
display: block;
}
}
}
}
note the + selector
I have a simple HTML and CSS with BEM. I want style for class .block__item-header-mark inside class .block__item-header--has-round.
I use CSS .block__item-header--has-round .block__item-header-mark { /styling here/ }. But I don't think this is good syntax.
My question is:
How to call .block__item-header-mark inside .block__item-header--has-round with better syntax in my SCSS code ?
My BEM syntax is good ?
Code
.block {
&__item {
&-header {
&--has-round {
/* How to call .block__item-header-mark with better syntax ??? */
.block__item-header-mark {
/*overide style*/
}
}
&-mark {
/*normal style*/
}
}
}
}
<div class="block">
<div class="block__item">
<div class="block__item-header block__item-header--has-round"><span class="block__item-header-mark"></span></div>
<div class="block__item-body"></div>
</div>
</div>
You can create a variable to refer to the scope you want
.block {
&__item {
&-header {
$header: &;
&--has-round {
#{ header }-mark {
/* override style */
}
}
&-mark {
/*normal style*/
}
}
}
}
<div class="data-row data-has-detail">
...
</div>
After expanding the div class becomes
<div class="data-row data-has-detail data-detail-shown">
...
</div>
I am trying to change the chevron on toggle with css but it doesn't work
<div class="btn-actions">
<span class="show-detail-new toggle-detail text-primary chk-move-down">
<span class="span-show-details"><i class="fa fa-2x fa-chevron-circle-down"></i></span>
<span class="span-hide-details"><i class="fa fa-2x fa-chevron-circle-up"></i></span>
</span>
</div>
less code
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
}
.data-has-detail .data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
Toggle with css not working
When an element has multiple classes, you select them like so:
.data-has-detail.data-detail-shown
(No space - the space tells it it's a child element, no space says "this element has both classes)
Update - with LESS
Since you are using LESS, then the primary issue is the one I mentioned about spaces between selectors. In LESS you solve that with the & symbol, like so:
.data-has-detail {
.show-detail-new {
span.span-show-details {
display: block;
}
span.span-hide-details {
display: none;
}
}
/** the & will cause it to be ".data-has-detail.data-detail-shown" **/
&.data-detail-shown {
.show-detail-new {
span.span-show-details {
display: none;
}
span.span-hide-details {
display: block;
}
}
}
}
As an observation under the heading of "maintainable code", and for performance, I'd suggest finding a way to simplify this. Something like this would be a bit less verbose, and should work:
.show-detail-new {
.span-show-details {
display: block;
}
}
.show-detail-new {
.span-hide-details {
display: none;
}
}
.data-detail-shown {
.span-show-details {
display: none;
}
}
.data-detail-shown .span-hide-details {
display: block;
}
(Currently, your selectors blow out into a huge selector when compiled by LESS, so your CSS stylesheet is probably larger than it needs to be:
.data-has-detail .data-detail-shown .show-detail-new span.span-show-details {
display: none;
}
.... etc for other rules ...
I have the following code to target buttons that are in a disable state:
.btn-default[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
Is it possible to use nested rules to target the disabled attribute? something similar to &:Hover
You can indeed, like this:
.btn-default {
&[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
}
http://jsbin.com/aKuLire/1/edit
You can even do further nesting:
input {
&[type="submit"] {
&[disabled] {
background: #blue;
}
}
}