SASS(SCSS) Note
- Nest
- Development
- Category
- html/css
- Hit
- 757
- Star
- 0
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);
}