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
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 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*/
}
}
}
}
HTML:
<div class="nav">
<a class="nav__link">click here...</a>
</div>
Expected CSS Output:
a.nav__link {
text-decoration: none;
}
My Current SCSS:
.nav {
a&__link {
text-decoration: error;
}
}
ERROR:
Invalid CSS after "a": expected "{", was "&__link"
"&__link" may only be used at the beginning of a compound selector.
If I understand well, you want something like that:
.nav {
a#{&}__link {
text-decoration: error;
}
}
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?
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