CSS Preprocessor

CSS Sprites

CSS 전처리기

CSS 전처리기는 일반 프로그래밍 언어에서 볼 수 있는 것과 같은 다양한 논리적 구문을 추가하여 기본 CSS의 기능을 확장하는 도구입니다. 브라우저는 CSS만 이해할 수 있으며, 때로는 깨끗하고 재사용 가능한 규칙을 작성하기에 충분하지 않을 수 있습니다.

가장 인기 있는 몇 가지 CSS 전처리기:

사스

덜

스타일러스

PostCSS

.circle {
  border: 1px solid #ccc;
  border-radius: 50px;
  overflow: hidden;
}
.avatar {
  @extend .circle;
}

.circle {
  border: 1px solid #ccc;
  border-radius: 50px;
  overflow: hidden;
}

.avatar:extend(.circle) {}

CSS 스프라이트

CSS 스프라이트는 웹 사이트에서 사용하기 위해 여러 이미지를 단일 이미지 파일로 결합하는 수단입니다. 별도의 이미지 대신 이미지 스프라이트를 사용하면 브라우저가 서버에 보내는 HTTP 요청 수가 크게 줄어들어 웹 페이지 로딩 시간과 전체 사이트 성능을 개선하는 데 매우 효과적일 수 있습니다.

자원:. Svg sprit