[책리뷰] CSS 수퍼파워 Sass로 디자인하라
2020-02-24
정보
- CSS 수퍼파워 Sass로 디자인하라 실전 예제로 배우는 Sass 웹 디자인의 기술
- 저자: 양용석
- 출판사: 로드북
- 발행일: 2016년 08월 25일
- 정가:
23,000원20,700원 - http://www.yes24.com/Product/Goods/30569338
감상
업무에서 sass(scss)를 사용하면서 sass 기능의 10%도 못 쓰고 있는 것 같아, 제대로 한번 익혀보고 싶어 읽게 된 책이다.
기존에는 변수, 중첩 정도만 사용했었는데, 그 외에 아주 많은 기능이 sass에 있다. mixin, extend, 연산 및 제어문 등등
이 책은 레퍼런스 설명뿐만 아니라, 실제 서비스에 처음부터 적용하는 과정을 코드와 함께 설명해주기 때문에, 실전에 활용하는 데 큰 도움이 될 수 있을 것 같다. 또한 많이 사용되고 있는 부트스트랩을 사용해서 개발을 진행한 것도 장점이라고 할 수 있다.
책을 읽으면서 내가 작업한 코드에서 리팩토링 할 수 있는 부분들이 많이 떠올랐다.
간단히 하나 예를 들면
.mb_8 {
margin-bottom: 8px !important;
}
.mb_16 {
margin-bottom: 16px !important;
}
.mb_24 {
margin-bottom: 24px !important;
}
.mb_32 {
margin-bottom: 32px !important;
}
.mb_40 {
margin-bottom: 40px !important;
}
.mb_48 {
margin-bottom: 48px !important;
}
.mb_56 {
margin-bottom: 56px !important;
}
이런 코드를 sass의 @each를 사용해서
@each $value in (8, 16, 24, 32, 40, 48, 56) {
.mb_#{$value} {
margin-bottom: #{$value}px !important;
}
}
아주 짧게 표현 할 수 있다. 다음에 margin-bottom 값이 추가되더라도, 숫자 하나만 추가해 주면 된다.
아래는 sass에 대해 검색하면서 찾은 완벽히 정리가 잘 된 사이트들인데, 아래 사이트를 한 번씩만 읽어봐도 실제 업무에 sass를 잘 활용 할 수 있을 것이다.
Comments