Sass로 제목 디자인의 @mixin을 만들자!

안녕하세요, @pompom0c0 입니다.
이 기사는 Enigmo Advent Calendar 2018의 18일째 기사입니다.
17일째 기사는 @natten 의 최초의 키보드 설계에 있어서의 안티패턴이었습니다.

오늘은 BUYMA내에서 사용하고 있는 표제 디자인 붙여 소개해 가고 싶습니다.

전치

이번에 이 기사를 쓰려고 생각한 경위

Sass의 @mixin를 실천에서 어떤 식으로 사용하고 있는지 알고 싶다!

사용하는 표제 디자인이 패턴화되어 있기 때문에, 디폴트라고 편리하다고 생각했기 때문에

가정 독자

LP를 구현하는 디자이너

@mixin 는 자신으로부터 쓴 적이 없는 사람.

이번에 다루지 않는 것

FLOCSS 설계 정보

@extend 또는 @content 에서 쓰는 법 소개

mixin의 복습

별로 정의한 스타일을 @include 그리고 아무것도 호출할 수가 있습니다.

인수를 지정하여 함수적인 사용법도 할 수 있습니다.

Sass 설명

@mixin hoge($color: #fff, $size: 1rem) {
  color: $color;
  font-size: $size;
}
.ttl__1 {
  @include hoge(#000, 2rem);
}
.ttl__2 {
  // 引数は初期値のを使用
  @include hoge();
}

CSS 출력 결과

.ttl__1 {
  color: #000;
  font-size: 2rem;
}
.ttl__2 {
  color: #fff;
  font-size: 1rem;
}

인수를 사용하면 초기 값으로 출력 할뿐만 아니라 "이번에는 조금 다른 분위기에서 보여주고 싶다 ..."라고 할 때 값을 바꾸면
기본적으로 CSS를 설정하더라도 출력 결과를 중복하지 않고 작성할 수 있습니다.

그리고는 자주 있는 표제 디자인을 Sass로 정리해 기술해 둡니다.

자주 사용하는 제목 디자인 Sass

수직선

수직선

@mixin line--ver($color: #000, $size: 30px) {
  &::after {
    content: '';
    width: 1px;
    margin-top: 1em;
    margin-bottom: .5em;
    display: inline-block;
    // 線の色と長さを引数にする
    height: $size;
    border-right: solid 1px $color;
  }
}

수평선

수평선

@mixin line--under($color: #000, $size: 1px) {
  position: relative;
  &::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    display: inline-block;
    width: 60px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    // 線の色と長さを引数にする
    height: $size;
    background-color: $color;
  }
}

문자 옆에 선

문자 옆에 선

@mixin line--side($color: #000, $size: 1px) {
  border-left: solid $size;
  border-right: solid $size;
  width: 45%;
  margin: 0 auto 1em;
  padding-bottom: 0;
  border-color: $color;
}

문자 아래에 형광펜으로 표시

문자 아래에 형광펜으로 표시

@mixin line--maker($color: #ffc63b, $size: .2rem) {
  background: linear-gradient(transparent 60%, $color 60%);
  padding: 0 $size;
}

컨텐츠의 폭의 분만큼 색이 붙어 버리므로, 마킹하고 싶은 개소에만 span 태그로 class 지정해 주세요.

<div class="framework__ttl">
  <h2><span class="ttl">タイトル</span></h2>
</div>

카기 괄호

열쇠 괄호

@mixin mark--quo($color: #000, $size: 1px) {
  position: relative;
  padding: 1rem;
  &::before, &::after {
      content:'';
      width: 20px;
      height: 30px;
      position: absolute;
      display: inline-block;
  }
  &::before {
      border-left: solid $size $color;
      border-top: solid $size $color;
      top: 0;
      left: 0;
  }
  &::after {
      border-right: solid $size $color;
      border-bottom: solid $size $color;
      bottom: 0;
      right: 0;
  }
}

요약

오랜만에 사용하는 제목 디자인을 구현하기 직전이 되어
「아, 이것 어떻게 쓰는 거야・・・」라고 구구하는 것은 생산적이지 않아~라고 생각해 정리해 보았습니다.@mixin 사용하고 있지만 인수까지는 사용하지 않는다! 잘 다루고 싶다! 라고 쪽에 참고가 된다고 생각합니다.

참고 사이트

Sass (SCSS)의 mixin, extend 등 정리
Sass로 @mixin을 만들 때 알아야 할 기본 지식
보다 신속하게 CSS 코딩을위한 Sass (SCSS) mixin 스 니펫 모음