::selection – 마우스 드래그로 블록 지정시 스타일 주기

간단하게 블록의 배경만 바꿔주는 코드다. mixin을 사용했다.

PC와 모바일에서 모두 작동해야 하므로 모바일을 위한 접두어(-webkit-, -moz-)를 붙여줘야 한다.

@mixin selection($background) {
	$prefixes: ("-webkit-","-moz-", "");
	@each $prefix in $prefixes {
		::#{$prefix}selection {
			background: $background;
		}
	}
}

사용할 때는 아래 코드를 사용한다.

@include selection(색상값);

직접 css로 입력하면 다음과 같다.

::-webkit-selection {
	background: 색상값;
}
::-moz-selection {
	background: 색상값;
}
::selection {
	background: 색상값;
}

직접 입력하는게 더 편해보이지만, 만약 배경만이 아니라 다른 요소가 더 들어가 있고, 수정해야 할 일이 생기면, 작업은 수정해야 할 요소 개수 * 3개  가 된다. mixin을 이용하면 처음엔 조금 복잡할 수는 있지만 수정에 용이하다는 장점이 있다.