들어가며

SASS(Syntactically Awesome Style Sheets) 전처리기 환경에서 자주 쓰이는 기능 중 various, mixin을 이용해 코드를 모듈화하여 코드의 생산성, 재활용성을 높여 편리하게 사용할 수 있습니다.

프로젝트에 공통으로 자주 쓰이는 mixin을 정리해보았습니다.

아이콘 CSS로 그리기

프로젝트 디자인 파일에서 X, | , ▲, ⌃ 아이콘들의 집합체를 보신 적 있으신가요? 이런 아이콘을 볼 때 크기, 색상별로 구분하다가 눈으로 확연히 보이지도 않고, 중간에 생겨나는 애매한 크기들로 이름 규칙에 혼란이 생기기도 하고 이미지 리소스 관리나 사용적인 면도 어려움이 생깁니다. (분명히 없을 것 같지만, 1px ~ 2px씩 아이콘이 커진다든지 아이콘 컬러들이 전체적으로 톤업/톤다운이 된다든지 하는 경우가 더러 있습니다.)

• X 버튼

닫기, 삭제 의미로 많이 사용되는 X 버튼은 정사각형 대각선의 길이를 구하는 공식 (한 변의 길이 * √2)로 그릴 수 있습니다.

• 구분 선

이웃한 콘텐츠를 구별하여 정보의 인식을 높이기 위해 구분 선을 이용하는데, 문자열(|)을 사용하기도 하지만 폰트에 따라 디자인 요소가 가미되면 아이콘으로 정의합니다.

• 삼각형

아코디언 메뉴와 같이 활성/비활성 여부를 시각화하기 위해 삼각형이나 화살표 아이콘을 사용합니다. 정삼각형의 높이 구하는 공식(한 변의 길이 * √3 / 2)으로 그릴 수 있습니다.

• 화살표

텍스트 말 줄임표 처리하기

게시글 타이틀과 같이 레이아웃의 일관성을 맞추기 위하여 고정된 영역의 공간을 유지하여 적절한 텍스트 표현을 위하여 말 줄임표를 사용합니다. mixin을 통해 여러 줄의 말 줄임 코드를 확장하여 선언할 수 있습니다.

트랜지션 효과 통일하여 작성하기

transform, opacity, left 등 동적으로 속성값이 변경하여 트랜지션 효과를 주는 경우 브라우저에 앞으로 변화할 값을 미리 전달하여 렌더링을 부드럽게 해주는 will-change 속성을 넣어주는 게 좋습니다.

@mixin transitionDefault($properties...) {
  $transition: ();
  $willChange: ();
  @each $property in $properties {
    // @debug "property: #{type-of($property)}";
    $transition: append($transition, $property 0.2s ease-in-out, $separator: comma);
    $willChange: append($willChange, $property, $separator: comma);
  }
  transition: $transition;
  will-change: $willChange;
}

 마치며

프로젝트에 따라서 해당 코드들이 사용할 수는 없을 수도 있습니다.

아이콘은 선(line)을 기반으로 한 그려서 전체적인 그림자 효과는 넣지 못할 것이고 트랜지션도 각각 세세한 효과를 원할 수도 있으므로 환경에 따라 수정은 필요하니 적절하게 수정하여 사용해주세요.

혹시, 예시 중 SASS 문법이 이해가 가지 않는다면 SASS 맛보기 시리즈를 참고해주세요.

감사합니다.