How to define css selector class prefix with SASS

Question

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.

Answer 1

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?