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*/
}
}
}
}
Related
What I want to do is like this
HTML
<div class="custom-color--ff0000">Red</div>
<div class="custom-color--00ff00">Green</div>
<div class="custom-color--0000ff">Blue</div>
CSS
.custom-color--(hex) {
color: '#' + (hex);
}
Is it possible to do this? Would I need Sass?
You can use a mixin to generate modifier classes in SASS:
#mixin add-color($argument) {
$string: unquote($argument);
&--#{$string} {
color: unquote('#' + $argument);
}
}
example:
.custom-color {
#include add-color(404145);
#include add-color(ff0000);
}
output in CSS:
.custom-color--404145 {
color: #404145;
}
.custom-color--ff0000 {
color: #ff0000;
}
Read more about it here:
Generate All Your Utility Classes with Sass Maps
Don't know why you want to do this but I think you can achieve similar by using CSS custom properties.
For example:
HTML
<div class="custom-color" style="--red: #ff0000">Red</div>
<div class="custom-color" style="--green: #00ff00">Green</div>
<div class="custom-color" style="--blue: #0000ff">Blue</div>
CSS
.custom-color {
color: var(--red); // or what color you want
}
I'm getting into SCSS trying to organise my css code and I came about this problem which peeked my interested as to why it's throwing a error?
here some example code:
<div class='bot'>
<div class='bot-active bot-awake'>
//...
</div>
</div>
And my SCSS looks like:
.bot {
&-active {....}
&-awake {....}
// this will not work.
&-active.&-awake {
...
}
}
You can use interpolation #{}
So
.bot {
&-active {....}
&-awake {....}
// this will work.
&-active#{&}-awake {
...
}
}
will result in
.bot-active {
...
}
.bot-awake {
...
}
.bot-active.bot-awake {
...
}
Demo at https://www.sassmeister.com/gist/4b8eb66140de9da983650b41a6df66ae
In Angular(2+), component's CSS are encapsulated by attribute selector.
e.g. When I wrote the following CSS,
.myClass { ... }
div { ... }
div.myClass { ... }
div .myClass { ... }
then Angular compiles as following
.myClass[_ngcontent-htp-42] { ... }
div[_ngcontent-htp-42] { ... }
div.myClass[_ngcontent-htp-42] { ... }
div[_ngcontent-htp-42] .myClass[_ngcontent-htp-42]{ ... }
Why?
I understand importance of encapsulation.
However, I think that it is also possible to use css-class. Like this
._ngcontent-htp-42 .myClass { ... }
._ngcontent-htp-42 div { ... }
._ngcontent-htp-42 div.myClass { ... }
._ngcontent-htp-42 div .myClass { ... }
What are the advantages of using attribute selector?
<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 ...
How to properly declare the sass statement to produce the output css in comment ?
.formModal{
.modal-body{
.inputTextWrap{
/*
.modal-body > .inputTextWrap:first-child {
background:violet;
}
*/
}
}
}
Try this:
.formModal{
.modal-body{
.inputTextWrap{
#at-root .modal-body > .inputTextWrap:first-child{
background: violet; //Remember you need a space after the:
};
}
}
}
You can check stuff like this on sassmeister