Как определить префикс класса селектора CSS с помощью SASS

Question

Можно ли написать эту конструкцию?

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

Чтобы иметь это решение

.name-1 

, но только для этого типа префикса класса.

Например, если я пишу:

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

это будет работать, но когда я пишу

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

не будет ничего, чтобы показать.

Answer 1

Вы можете использовать следующую конструкцию:

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

Для справки ЗАКАНЧИВАТЬ W3C Selectors section.

EDIT

CSS Version on JSFiddle

Как уже упоминалось Beterraba это также будет соответствовать .nameother-1. Во избежание этого используйте следующее:

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

Если вы, например. хотите, чтобы соответствовать .name-1-2 вы можете сделать следующее:

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

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

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

    } 
} 

Но это будет также соответствовать .name-15-2. Чтобы избежать этого, вам нужно сделать что-то вроде этого:

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

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

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

Но это будет также соответствовать name-5-1-2. И так далее .. Я думаю, что список бесконечен. Так или иначе, он становится очень нечитаемым. Я не рекомендую вам это делать. Почему бы просто не нацеливать эти элементы напрямую?

Answer 2

С помощью Sass вы можете использовать переменные и использовать их в селекторе. Таким образом, вы можете использовать свой префикс в качестве переменной и вложить суффиксы, которые вы хотите выбрать.

Предположим, что ваш префикс name, а суффикс, который вы хотите выбрать, - -1, но вы не хотите выбирать othername-1. Вы можете сделать следующее:

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

    &-other_selected_suffix 
     color: green 

Этот код будет выбрать как name-1 и name-other_selected_suffix, но он не будет выбрать othername-1