I write CSS in BEM style and have this code:
.nav {
&__list {
&__item {
}
}
&__link {
&--active {
}
}
}
How do I get .nav .nav__link--active and .nav__link.nav__link--active from code above? How can I enhance the specificity by this method?
There is no magic method for this. Store the desired selector as a variable and nest like normal.
.nav {
$sel: &;
&__list {
&__item {
color: red;
#{$sel} & {
border: 1px solid;
}
}
}
&__link {
&--active {
color: blue;
#{$sel} & {
border: 1px dashed;
}
}
}
}
Related
How to apply the same focus state to multiple different classes?
Problem:
.btn {
&.error {
border-color: red;
}
&.primary {
border-color: green;
}
&:focus {
border-color: blue;
// this is not applied but i don't want to
// declare the same style to both classes
}
}
I understand this would be one option, but it is also not the prettiest option as i need to list them separately here
.btn {
&.error {
border-color: red;
}
&.primary {
border-color: green;
}
&.primary:focus, &.error:focus {
border-color: blue;
}
}
Are there any better ways?
Using & again in the nested rule is a good way for your purpose.
.btn {
&.error {
border-color: red;
}
&.primary {
border-color: green;
}
&.primary, &.error {
&:focus{
border-color: blue;
}
}
}
& is parent's name so I tried
.assigItem{
&--linkedSelected {
background: red;
}
&--unAllocated {
background: blue;
}
&--linkedSelected&--unAllocated {
background: yellow;
}
}
but it is not work
I had to do this.
.assigItem{
&--linkedSelected {
background: red;
}
&--unAllocated {
background: blue;
}
&--linkedSelected.assigItem--unAllocated {
background: yellow;
}
}
Let me know if there's a better way
You should use scss interpolation.
.assigItem{
&--linkedSelected {
background: red;
}
&--unAllocated {
background: blue;
}
&--linkedSelected#{&}--unAllocated {
background: yellow;
}
}
Tested on sassmeister, libsass v3.5.4 — demo.
Is is possible in SaSS to only extend the css properties of a class, and avoid rendering a concatenated classname:
.class_A {
background-color: #f0f;
}
.class_B {
color:#555;
#extend class_A;
}
desired result:
.class_B {
color:#555;
background-color: #f0f;
}
If you still need .class_A then you can do this
%bg-color {
background-color: #f0f;
}
.class_A {
#extend %bg-color;
}
.class_B {
color:#555;
#extend %bg-color;
}
Output CSS:
.class_A, .class_B {
background-color: #f0f;
}
.class_B {
color: #555;
}
If you don't need .class_A just use a variable:
$bg-color: #f0f;
.class_B {
color:#555;
background-color: $bg-color;
}
I have the following sass:
.list {
&__button{
cursor:pointer;
display: block;
padding: 4px;
border:1px solid $color4;
outline: none;
&__square {
border: 1px solid $color1;
width:12px;
height:12px;
}
&__text {
padding-right: 5px;
color: red;
}
}
&__button[state-selected="true"] {
.list__button__text {
color : $color1;
}
}
}
I have to use the full name of the class to get this part to work:
&__button[state-selected="true"] {
.list__button__text {
color : $color1;
}
}
Is there any way to simplify this part? Something like:
&__button[state-selected="true"] {
&__text {
color : $color1;
}
}
But this gives an error: Invalid parent selector for "&__text": ".list__button[state-selected="true"]".
I'm working on an SCSS stylesheet, and I have a rule that looks something like this:
.footer-link-row {
color: red;
ul& {
padding: 0;
}
}
I want the ul& line compile to the selector ul.footer-link-row. However, this selector returns a compiler error, and using a &ul compiles to .footer-link-row ul. What's the correct way to select something like this?
--Added--
To clarify, the eventual CSS I want out of this is:
.footer-link-row {
color: red;
}
ul.footer-link-row {
padding: 0;
}
You want something like the following:
ul {
padding: 0;
.footer-link-row {
color: red;
}
}
The ampersand is used to require that both selectors match
a { text-decoration: none;
&:hover { border-width: 1px }
}
// compiles to
a {
text-decoration: none;
}
a:hover {
border-width: 1px;
}
If you want the ul.footer-link-row try
ul {
&.footer-link-row {
padding: 0;
}
.footer-link-row {
color: red;
}
}
Your clarification indicates that you need two scopes.
ul {
&.footer-link-row {
padding: 0;
}
}
.footer-link-row {
color: red;
}