Sass를 사용하여 JS/CSS 라이브러리에서 작업 중입니다. 내 Sass를 프로젝트에 직접 가져 와서 컴파일하는 옵션을 사용자에게 제공하고 포함 된 CSS 애니메이션의 동작을 변경하는 일부 변수를 수정하는 옵션을 제공합니다.사용자가 변수를 수정할 수있는 Sass 애니메이션 라이브러리를 설계하는 방법은 무엇입니까?
그러나 나는 Sass에 비교적 새로운 것이므로 어떻게해야하는지 잘 모르겠습니다. Sass 사용자는 일반적으로 Bootstrap이나 Bulma와 같은 Sass 변수를 어떻게 가져오고 수정할 것입니까? here에 사용 된 !default 키워드를 사용해야합니까?
스타일 프레임 워크가 부트 스트랩 또는 Foundation 작업과 같은 방식을 이해해야합니다. 예 : plunker
다음은 프로젝트의 기본 구조입니다.
animation.scss // Your library
variables.scss // User custom variables
main.scss // User main scss file
이 파일을 살펴 보겠습니다.
Animation.scss에는 필요한 모든 기본 변수와 모든 클래스가 있습니다. 이 클래스는 사용자가 별도로 가져올 수 있도록 믹스 인 (Mixins)으로 싸여 있습니다. 이 파일의 모든 변수에는 사용자가 변수를 무시할 수있는 플래그 !default이 있습니다. 요소에 color 속성을 추가하는 간단한 클래스 animation이 있습니다.
$color: green !default;
@mixin animation() {
.animation {
color: $color;
}
}
Variables.scss에는 사용자 정의 변수가 들어 있습니다. 그들은 어떤 깃발도 가지고 있지 않습니다.
$color: red; // Note, there is no !default flag
Main.scss은 모든 파일을 가져오고 일부 라이브러리 구성 요소를 포함합니다. 예를 들어 animation이라는 구성 요소를 가져옵니다. 기본적으로
// Import library
@import 'animation.scss';
// Override library variables
@import 'variables.scss';
// Import components
@include animation();
요약
이 라이브러리는 green의 값을 $color 변수가 있습니다. 사용자가 red에 우선하며 구성 요소 animation을 포함합니다. 따라서 animation 클래스의 모든 요소는 빨간색이어야합니다.