Scss에서는 확장이라는 개념이있는 다른 프로그래밍 언어에서 사용되는 상속의 개념과 비슷하다. Scss 상단에서 특정한 클래스를 만들어두고 아래쪽에서 그대로 가져와서 사용이 가능하다. Scss는 많이 알면 알수록 확실히 편한부분이 눈에 띄는거 같다. 상속은 @extend selecter 방식으로 사용하면 된다. // scss file .sample { color: red; font-size: 3.5em; background: green; margin: auto; } .sample2 { color: blue; padding: 15px 0; margin: -15px 0; } .sample3 { @extend .sample; box-sizing: border-box; @extend .sample2; } 위의 ..
Scss를 사용하는 가장큰 이유중 2번째가 변수를 사용부분인거같다. 사실 css를 쓰다 보면 반복적으로 특정 색깔을 지정하게 되는데 이럴때 유용하게 사용이 가능할거같다. 특히 유지보수적인 측면에서 상당히 편해지는 부분이있다. 같은색깔들을 전부찾아 바꿀수 있지만. scss상단에 특정 색상들을 선언해두고 이후 유지보수시에는 변수에서만 변경해주면 되기때문이다. 이부분은 색상뿐만 아니라 폰트사이즈, 너비, 높이등에서도 사용가능하다. 아래는 scss변수 선언방법이다. // variable $white: #fff; // 하얀색 $black: #000; // 검정색 $gray: #ddd; // 회색 $red: red; // 빨간색 아래는 scss변수를 활용한 scss 파일이다. // scss file #sample ..