SASS(SCSS) Note

sass-lang.com

http://sass-lang.com/

Sass(CSS Preprocessor) 기초

http://wit.nts-corp.com/2015/01/09/2936

소숫점 처리함수

https://gist.github.com/terkel/4373420

focus mixin

키보드 탭키로 포커스를 표현하지만 마우스로는 표시 안되게 조정한다.

@mixin focus() {
  &:focus {
    @content;
    &:not(:focus-visible) {
      outline: none;
    }
  }
}

a {
  @include focus() {
    outline: 1px dashed lime;
    outline-offset: 4px;
  }
}

aspect-ratio mixin

속성이 상당히 최신 스펙이라서(작성할 당시에는..) 서포트 미디어쿼리를 넣어주는것이 좋겠다고 보여서 믹스인으로 만드는데 사용하기가 상당히 까다롭다.
/ 문자가 나누기로 표현되어서 쉽게 처리를 못하는 편이다.

// aspect ratio
@mixin ratio($w, $h)
{
  @supports (aspect-ratio: 1 / 1) {
    aspect-ratio: #{$w} / #{$h};
  }
}

img {
  width: 480px;
  @include ratio(16, 9);
}