SASS (지도)를 사용하여 테마 만들기

Question

SASS를 처음 접했고 사용자가 웹 사이트에 대해 다른 테마를 선택할 수있는 권한을 부여하려고합니다.

$theme-map: ( 
    main-theme: (
     primary: #007991, 
     secondary: #55D3AE, 
     tertiary: #D35555, 
     gradientFirstColour: #007991, 
     gradientSecondColour: #34EBE9 
), 
    test-theme: (
     primary: #1abc9c, 
     secondary: #e67e22, 
     tertiary: #c0392b, 
     gradientFirstColour: #2c3e50, 
     gradientSecondColour: #f1c40f 
    ) 
) 

이제는 이것을 반복하여 특정 요소에 적용하는 방법을 잘 모르겠습니다. 예 : 기본 테마를 선택한 다음 버튼 배경에 기본 색상, div 배경에 대한 보조 색상, 테스트 테마를 선택할 때 같은 것을 사용하고 싶습니다. 누군가 나를 도울 수 있습니까?

미리 감사드립니다.

Answer 1

나는 이것을 구현할 수있는 많은 방법이 있다고 믿는다. 과거에 비슷한 일을 해본 경험이있다. 그래서 여기에 내 구현이있다.

1 단계

귀하의 경우에는 main.css 및 test.css에, 당신이 가지고있는 다양한 주제에 대해 여러 CSS 출력 파일을 생성합니다. 예를 들어 theme-main.css 및 theme-test.css과 같이 더 쉽게 이해할 수 있도록 이름 앞에 접두사를 붙일 수도 있습니다.

재설정, 여백, 활판 인쇄와 같은 일반적인 스타일을 global.css과 같은 하나의 파일로 유지하고 테마를 개별 파일에 추가하는 것이 좋습니다. 이 CSS 파일을 HTML 위에 서로로드하십시오.

메인 테마 :

<link href="global.css" rel="stylesheet" type="text/css"> 
<link href="theme-main.css" rel="stylesheet" type="text/css"> 

그리고 테스트 테마 : 프로젝트의 말대꾸 폴더에서

<link href="global.css" rel="stylesheet" type="text/css"> 
<link href="theme-test.css" rel="stylesheet" type="text/css"> 

, global.scss 함께 theme-main.scss 및 theme-test.scss을 만들 수 있습니다.

2 단계

다른 부분 말대꾸 파일로 테마 색상을 이동하고 변수의 이름이 동일해야합니다

. 나는 개인적으로 내 CSS 출력 파일과 일치하는 이름을 가진 프로젝트의 Sass 폴더 내에 폴더를 만들고 거기에이 파일들을 넣을 것이다.

귀하의 경우 Sass 폴더 내에 _theme-main 및 _theme-test 폴더를 만드십시오.

_theme-main/_variables.scss에서 :

$colors: (
    primary: #007991, 
    secondary: #55D3AE, 
    tertiary: #D35555, 
    gradientFirstColour: #007991, 
    gradientSecondColour: #34EBE9 
); 

그리고 _theme-test/_variables.scss에서 :

$colors: (
    primary: #1abc9c, 
    secondary: #e67e22, 
    tertiary: #c0392b, 
    gradientFirstColour: #2c3e50, 
    gradientSecondColour: #f1c40f 
); 

3 단계

부하들에게 다음과 같은 내용으로 두 _variables.scss의 이름을 각 폴더에있는 파일을 만듭니다 필요로하는 파일의 필요한 변수.

@import '_theme-main/variables'; 

을 그리고 파일 theme-test.scss에 넣어 : 파일 theme-main.scss에서

넣어

@import '_theme-test/variables'; 

을 지금까지, 이것은 다른 테마 파일이 서로 다른 값으로 작업 할 수 있도록 보장 동일한 변수. 실제로 변수 $colors은이 두 테마 파일에서 동일하게 호출됩니다. 실제로는 동일하지 않습니다.

4 단계

부분 말대꾸하면에 테마를 적용 할 스타일로 파일을 만듭니다. 우리는 이미 _theme-main 폴더와 _theme-test 폴더에 theme-test.scss의 종속성에 theme-main.scss의 종속성을 넣어 때문에

, 나는 개인적으로이 패턴을 깨고 싶지 않을 것이다, 그래서 shared 폴더 또는 유사한 무언가를 창조하고 부분 말대꾸를 둘 것 거기에 여러 Sass 파일로 가져온 파일. 물론 이것을 건너 뛸 수는 있지만 프로젝트 유지 관리에 도움이된다고 생각합니다.

예제에서 머물고 있다면 _styles.scss이라는 부분적인 Sass 파일을 만들고 shared 폴더에 넣으십시오. 다음 코드를 입력하십시오 :

button { 
    background-color: map-get($colors, primary); 
} 

div { 
    background-color: map-get($colors, secondary); 
} 

이제이 부분 파일을 테마 파일에 들여 보내면됩니다.

@import '_theme-main/variables'; 
@import 'shared/styles'; 

을 그리고 파일 theme-test.scss에 넣어 : 파일 theme-main.scss에서

넣어

@import '_theme-test/variables'; 
@import 'shared/styles'; 

내가 어떤 실수를하지 않은 경우, 귀하의 출력 CSS 파일을 다음과 같이한다 :

theme-main.css :

theme-test.css:

button { 
    background-color: #1abc9c; 
} 

div { 
    background-color: #e67e22; 
} 

는이 유용하거나 추가 문의 사항이있는 경우 발견하면 알려주세요.