Решение SASS для разделения унаследованных стилей CSS - PullRequest
Новая
       15

Решение SASS для разделения унаследованных стилей CSS

0 голосов
/ 03 октября 2018

Я использую [Bulma] CSS-фреймворк 1 .Эта структура CSS предоставляет стили по умолчанию для вкладок и выпадающих меню.Для вкладок он имеет (также) следующий CSS 

.tabs.is-boxed a {
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

, в то время как для выпадающих списков он имеет 

a.dropdown-item {
  padding-right: 3rem;
  white-space: nowrap;
}

a.dropdown-item:hover {
  background-color: whitesmoke;
  color: #0a0a0a;
}

a.dropdown-item.is-active {
  background-color: #3273dc;
  color: #fff;
}

Это означает, что если у вас есть HTML, который более или менее похож напосле 

<div class="tabs">
 <ul>
   <li>

     <!-- DROPDOWN GOES HERE -->   
     <div class="dropdown is-active">
       <div class="dropdown-trigger">
         <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
           <span>Dropdown button</span>
           <span class="icon is-small">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
           </span>
         </button>
       </div>
       <div class="dropdown-menu" id="dropdown-menu" role="menu">
         <div class="dropdown-content">
           <a href="#" class="dropdown-item">
             Dropdown item
           </a>
         </div>
       </div>
     </div>
     <!-- DROPDOWN ENDS -->

   </li>
 </ul>
</div>

тогда стиль, применяемый ко всем якорям, включенным в класс tabs, также применяется к якорям в раскрывающемся списке.Это приведет к ужасной визуализации.

Конечно, я мог бы написать свой собственный CSS, но я думаю, что это было бы ужасным решением против здравого смысла и принципов дизайна.

Интересно, смогу ли я как-то исправить эту ситуацию, используя SASS или просто CSS, чтобы стили, применяемые к якорям, у которых .dropdown-item не пересекались с тем, который определен tabs.a.

1 Ответ

0 голосов
/ 03 октября 2018

Вы можете переписать оператор .tabs. 

.tabs.is-boxed a:not(.dropdown-item) {
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

Таким образом, он больше не повлияет на выпадающий якорь.

Редактировать, Другой способ: 

.tabs.is-boxed a.dropdown-item {
  border: none;
  border-radius: 0;
}
...