Hangun's World – Blog

SCSS 아이콘 스프라이트

작성자

Hangun’s World

카테고리:

아이콘 등을 이미지 스프라이트로 작업할 때 일일이 좌표를 지정하는 것이 불편하여 일괄로 CSS를 생성하는 코드 입니다.
아이콘의 클래스 명을 리스트로 등록하고 아이콘의 크기와 한 행에 들어가는 아이콘의 개수를 설정하면 됩니다.
나중에 아이콘이 추가 또는 삭제되어도 리스트에서 순서만 재조정하면 좌표를 일일이 다시 수정할 필요가 없습니다.

@use "sass:meta";
@use "sass:list";
@use "sass:math";

$icon-list:(
    'home',     'login', 'logout', 'profile', 'menu',
    'category', 'brand', 'search', 'more',    'empty',
    'left',     'right', 'up',     'down',    'cross',
    'prev',     'next',  'close'
);
$size: 25px;
$col: 5;

.my-icon{
    display: inline-block;
    width: $size;
    height: $size;
    background:url(my-icon.svg) no-repeat 0 0;
    background-size:$size * $col auto;
    @each $icon in $icon-list{
        $i: index($icon-list, $icon) -  1;
        $x: ($i % $col) * -$size;
        $y: math.floor($i / $col) * -$size;
        &.#{$icon}{background-position:#{$x $y};}
    }
}

.my-icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(my-icon.svg) no-repeat 0 0;
  background-size: 125px auto;
}
.my-icon.home {
  background-position: 0px 0px;
}
.my-icon.login {
  background-position: -25px 0px;
}
.my-icon.logout {
  background-position: -50px 0px;
}
.my-icon.profile {
  background-position: -75px 0px;
}
.my-icon.menu {
  background-position: -100px 0px;
}
.my-icon.category {
  background-position: 0px -25px;
}
.my-icon.brand {
  background-position: -25px -25px;
}
.my-icon.search {
  background-position: -50px -25px;
}
.my-icon.more {
  background-position: -75px -25px;
}
.my-icon.empty {
  background-position: -100px -25px;
}
.my-icon.left {
  background-position: 0px -50px;
}
.my-icon.right {
  background-position: -25px -50px;
}
.my-icon.up {
  background-position: -50px -50px;
}
.my-icon.down {
  background-position: -75px -50px;
}
.my-icon.cross {
  background-position: -100px -50px;
}
.my-icon.prev {
  background-position: 0px -75px;
}
.my-icon.next {
  background-position: -25px -75px;
}
.my-icon.close {
  background-position: -50px -75px;
}

더 많은 게시물