사용자 정의 테두리 용 SCSS mixin 작성

Question

사용자 정의 테두리에 mixin을 사용할 수 있는지 궁금합니다. 내 웹 사이트의 모든 경계선은 단색이므로 누출 될 수 있지만 다른 모든 값은 다를 수 있습니다. 즉, 왼쪽, 오른쪽, 위 또는 아래의 테두리와 픽셀의 크기 (픽셀)로 표시된 장소 (여기에서는 '방향'이라고하는 위조라고 함)를 의미합니다. 나는 다음을 시도했지만 Prepros는 오류 Invalid CSS after " border-": expected "{", was "$direction: $si..."을 던졌습니다.

@mixin border($direction,$size,$colour) { 
    border-$direction: $size solid $colour; 
} 

Answer 1

variable interpolation을 사용해야합니다. 예 : SassMeister에

@mixin border($direction,$size,$colour) { 
    border-#{$direction}: $size solid $colour; 
} 

예 : http://sassmeister.com/gist/b5119d77bae5582a0cc5

의 핵심은 확장 얻기 위해 국경 방향 주위 #{ 및 }을 추가하고있다.