재단 아코디언 스타일을 재정의하는 방법은 무엇입니까?

Question

WordPress 테마에서 기초 사이트를 사용하고 있는데 아코디언 구성 요소의 스타일을 덮어 쓰려고합니다.

특히 모든 항목의 테두리 반경을 10px로 지정하고 싶습니다.

이

국경 반경을 변경하려면 목록의 첫 번째와 마지막 요소에만 적용이나 mixin 몇있는 것으로 보인다 :

/// Adds styles for the accordion item. Apply this to the list item within an accordion ul. 
@mixin accordion-item { 
    &:first-child > :first-child { 
    border-radius: $global-radius $global-radius 0 0; 
    } 

    &:last-child > :last-child { 
    border-radius: 0 0 $global-radius $global-radius; 
    } 
} 

문제 내가 무시할 수없는 생각이다있을 것 같다 이 mixin의 테두리, mixin을 다시 선언하고 0을 $ global-radius로 변경하려고했습니다. 나는 정의 10px 스타일에 글로벌 반경을 변경 한 :

.di-accordian-title { 
    background-color: $blue; 
    color: $white !important; 
    padding: 5px; 
    border-radius: 10px; 
    margin-top: 5px; 
    width: 100%; 
    clear: both; 
    float: left; 
    font-size: 14px; 
} 

.di-accordian-title:hover, .di-accordian-title:focus { 
    background-color: $light-blue; 
    color: $white !important; 
    padding: 5px; 
    border-radius: 10px; 
    margin-top: 5px; 
    width: 100%; 
    clear: both; 
    float: left; 
    font-size: 14px; 
} 

난 그냥 첫 번째와 마지막 항목 국경 반경을 무시할 수없는 것.

이것은 프로젝트에서 sass를 처음 사용하는 것으로, 처음에는 sass를 처음 사용했습니다.

아코디언 믹스 인에서 설정된 기본값을 무시하는 올바른 방법은 무엇입니까?

Answer 1

믹스를 재정의 할 필요는 없습니다. 자신의 스타일이나 설정의 특수성으로이 설정을 덮어 써야합니다.

이 일이 쉽게 가지 방법이 있습니다 : (app.scss에서 참조되어야한다) 당신의 _settings.scss 파일에서

통해 "설정"

기본적으로 설정되어 $global-radius에 대한 설정이가 0. 이 값을 10px 또는 0.6rem 또는 공상적인 것으로 설정하면 전역 반경이 해당 값으로 변경됩니다.

N.B. 이것은 아코디언이 아닌 모든 기초 요소의 반경입니다.

.my-accordion.accordion { 
    .accordion-item { 
     &:first-child > :first-child { 
      border-radius: 10px 10px 0 0; 
     } 

     &:last-child > :last-child { 
      border-radius: 0 0 10px 10px; 
     } 
    } 
} 

것은이에 갈 것 :

특이성 또는 당신이 0 (또는 무엇이든)의 글로벌 반경을 유지하려는 경우

통해 그냥 아코디언은 10px 반경을 갖고 싶어 프로젝트 중 하나 SCSS 이후에로드 된 @importapp.scss 파일

편집 : .my-accordion은 특정 아코디언에 대한 클래스입니다. 위의 scss의 일부분 인 .accordion-item 만 사용하면 모든 아코디언에서도 작동합니다.