[Sass·SCSS]변수를 클래스 별로 적용하기

여러 사이트에 적용할 테마 디자인을 마크업 해야 하는데, 하단의 조건들이 붙어있다.

1. 디자인은 변동이 거의 없고 각 브랜드의 포인트컬러만 다르다
2. 테마디자인이 적용될 사이트가 몇 개가 될지 알 수 없다
3. css파일은 공통으로 쓸 예정이다
4. 브랜드의 포인트 컬러를 css로만 컨트롤 하고싶다

이런 상황에서 각 브랜드의 최상단에 브랜드 명칭을 class로 주고 컬러값을 변수로 바꾸는게 나중에 사이트가 추가되거나 유지보수가 필요할 때 가장 간편할거 같다는 결과가 나왔다.

개껌이네ㅋㅋ이렇게 짜면 되는거 아님?

.브랜드클래스명 {
	$point-color: #303030;
}

이렇게 써도 된다.
다만 scss에서 선언된 변수는 선언된 블록{}내에서만 유효범위를 가진다.
다시 말해, 저렇게 쓰고 싶으면 저 블록 내에 point-color 변수를 사용하는 모든 코드를 때려박는 짓을 사이트가 추가될때마다 해야 하며 나중에 디자인이라도 수정된다면 눈물이 앞을 가리게 될 뿐이다.

와! 그런 짓은 하고 싶지 않을뿐더러 분명 scss로만 클래스 별 변수를 바꿀 수 있을것 같다는 확신이 들었다.

아ㅋㅋ뭐가걱정이야 나한텐 구글이 있다

이왜없...?
정신이 혼미해지던 와중 드디어 갓택오버플로우에서 비슷한 해결법을 찾았다.
사랑해요 스택오버플로우😭

참조

https://stackoverflow.com/questions/49809524/change-variable-colors-if-else-in-scss

이 글을 참고해 내가 만든

✏️ class 별 다른 변수 적용시키기

//각 클래스 별 변수 지정
$point-color: (
	default: (
    	//포인트 컬러
		bg-color: #ff4986,
        //포인트 컬러 별 사용하는 텍스트 컬러
		txt-color: #303030,
	),
	class1: (
		bg-color: #303030,
		txt-color: #fff,
	)
);

@function point($key, $type:'default'){
	@each $name, $color in map-get($point-color, $type){
		@if($key == $name){
			@return $color
		}
	}
}
@mixin point($property, $color){
	#{$property}: point($color);
	//클래스 별 point color 지정
	@at-root .class1 & {
		#{$property}: point($color, class1);
	}
}

//point-color 사용 예시
.test{
	width: 100px;
	height: 100px;
	@include point(background-color,bg-color);
	@include point(color,txt-color);
}

와!됐다!!
이제 브랜드가 추가될 때 마다

$point-color: (
	default: (
		bg-color: #ff4986,
		txt-color: #303030,
	),
	class1: (
		bg-color: #303030,
		txt-color: #fff,
	),
    class2: (
    	bg-color: pink,
        txt-color: #fff
    )
);


@mixin point($property, $color){
	#{$property}: point($color);
	@at-root .class1 & {
		#{$property}: point($color, class1);
	}
	@at-root .class2 & {
		#{$property}: point($color, class2);
	}
}

이렇게 추가만 해 주면 된다.

icon도 브랜드마다 포인트 색이 다른데요?
....😂

여러 삽질 후 내가 만든

✏️ class 별 다른 변수 적용시키기 최종본(+svg)

//각 클래스 별 변수 지정
$point-color: (
	default: (
    	//포인트 컬러
		bg-color: #ff4986,
        //svg 컬러 변경
		icon-color: ff4986,
        //포인트 컬러 별 사용하는 텍스트 컬러
		txt-color: #303030,
	),
	class1: (
		bg-color: #303030,
		icon-color: 303030,
		txt-color: #fff,
	)
    class2: (
    	bg-color: pink,
        icon-color: pink,
        txt-color: #fff
    )
);

@function point($key, $type:'default'){
	@each $name, $color in map-get($point-color, $type){
		@if($key == $name){
			@return $color
		}
	}
}
@mixin point($property, $color){
	#{$property}: point($color);
	//클래스 별 point color 지정
	@at-root .class1 & {
		#{$property}: point($color, class1);
	}
	@at-root .class2 & {
		#{$property}: point($color, class2);
	}
}

// svg icon 클래스 별 point color
@mixin icon-point($name, $color) {
  background-image: icon($name, point($color), point($color));
  //클래스 별 point color 지정
  @at-root .class1 & {
    background-image: icon(
      $name,
      point($color, class1),
      point($color, class1)
    );
  }
  @at-root .class2 & {
    background-image: icon(
      $name,
      point($color, class2),
      point($color, class2)
    );
  }
}
// svg 아이콘의 색상 변경
@function check-set($name, $color1: "", $color2: "") {
  $iconList: (
    radio:
      "%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.5' stroke='%23#{$color1}'/%3E%3Ccircle cx='10' cy='10' r='6' fill='%23#{$color2}'/%3E%3C/svg%3E",
  );
  $icon: map.get($iconList, $name);
  @return url("data:image/svg+xml,#{$icon}");
}
@mixin icon-point($name, $color) {
  background-image: check-set($name, point($color), point($color));
  //클래스 별 point color 지정
  @at-root .class1 & {
    background-image: check-set(
      $name,
      point($color, class1),
      point($color, class1)
    );
  }
  @at-root .class2 & {
    background-image: check-set(
      $name,
      point($color, class2),
      point($color, class2)
    );
  }
}

//point-color 사용 예시
.test{
	width: 100px;
	height: 100px;
	@include point(background-color,bg-color);
	@include point(color,txt-color);
	@include radio {
	   @include icon-point(radio, icon-color);
	}
}

이 코드도 유지보수 하기 조금 불편한 코드긴 하지만, 현재 내 능력으로는 상단의 조건을 충족하면서 유지보수 할 때 그나마 가장 간편한 코드다..😂