CODEWITHSUNDEEP
cssclasssassselector
Lukas
Lukas

Reputation: 7734

How to define css selector class prefix with SASS

Is there any posible to write this construction?

[class^="name"]{ 
   &[class*="-1"]{
       padding: 10px;
   }
}

To have this solution

.name-1

but only for this type of class prefix.

For example if i write:

<span class="name-1"></span>

this will be work, but when i write

<span class="othervalue-1"></span>

there will be nothing to show.

Upvotes: 5

Views: 13259

Answers (2)

Daniel Reina
Daniel Reina

Reputation: 6347

With Sass you can use variables and use them inside the selector. This way you can use your prefix as a variable and nest the suffixes you want to select.

Let's say your prefix is name, and the suffix you want to select is -1, but you don't want to select othername-1. You can do the following:

$prefix: name
.#{$prefix}
    &-1
        padding: 10px

    &-other_selected_suffix
        color: green

This code would select both name-1 and name-other_selected_suffix, but it will not select othername-1

Upvotes: 4

damian
damian

Reputation: 5444

You can use the following construct:

[class^="name"]{ 
   &[class$="-1"]{
       padding: 10px;
   }
}

For reference check out the W3C Selectors section.

EDIT

CSS Version on JSFiddle

As Beterraba mentioned this will also match .nameother-1. To avoid this use the following:

[class|="name"]{ 
   &[class$="-1"]{
       padding: 10px;
   }
}

If you e.g. want to match .name-1-2 you could do the following:

[class|="name"]{ 
   color: red;

   &[class*="-1"]{
       padding: 10px;
       color: green;

       &[class$="-2"]{
           padding: 30px;
           color: yellow;
       }  

   } 
}

But this would also match .name-15-2. To avoid that you need to make something like this:

[class|="name"]{ 
    color: red;

   &[class$="-1"]{
       padding: 10px;
       color: green;
   } 

   &[class$="-1-2"]{
       padding: 30px;
       color: yellow;
   }     
}

But this would also match name-5-1-2. And so on.. I think the list is endless. Anyway it's getting very unreadable. I don't recommend you to do so. Why not simply targeting these elements directly?

Upvotes: 7

Related Questions