다음으로 살펴볼 rule은 @extend이다. 이녀석은 sass가 주목받게 해준 강력한 rule이다. 그런데 개인적으로 상당히 까다로웠고 여기 저기서 사용을 지양해야한다는 글도 많다. 계륵(鷄肋) 같은 존재인가? 그래도 한번 정리해보자. @extend 용도 @extend는 어떤 클래스가 다른 클래스의 모든 스타일과 함께 고유한 스타일을 가져야 하는 경우에 사용된다. .error { border: 1px #f00; background-color: #fdd; &--serious { @extend .error; border-width: 3px; } } .error, .error--serious {​ border: 1px #f00;​ background-color: #fdd;​ }​ .error--serious..

Scss는 @media 등의 기존의 at-rule(@-rule) 외에 새로운 @-rule을 이용해서 기존의 CSS에 편의한 기능을 제공해준다. 이번 포스트에서는 새롭게 추가된 @-rule들에 대해 알아보자. 새롭게 추가된 @-rule들 다음은 SCSS에 새롭게 추가된 @-rule들이다. 작성된 스타일의 재사용 @mixin, @include, @content, @extend 다른 SCSS에서 선언된 mixin, function, variable 들을 로딩하고 여러 css들의 결합 @use, @forward, @import(deprecated) 컴파일 시 발생하는 오류, 경고, 디버그 메시지 활용 @error, @warn, @debug 제어문 @if, @each, @for, @while 기타 @functio..

이번 포스트에서는 jsp에서 el과 함께 js의 backtick 사용시 주의점에 대해서 살펴보자. ${}은 JSP의 el인가.. JS backtick의 변수인가? JSP에서의 el jsp에서는 el 표현식을 사용할 때 ${variable}을 사용한다. el은 html 영역 뿐 아니라 javascript영역에서도 사용할 수 있다. ${some } ecma 6에 추가된 ``은 내부에서 ${var}의 형태로 javascript의 변수를 사용할 수 있다. 그런데 여기서는 some이라는 변수를 선언한 적이 없다. 그럼 위 코드는 잘못된 것인가? 물론 아니다. 여기서는 JSP와 JS의 동작 순서에 대해서 생각할 필요가 있다. 먼저 서버에서 dynamic 하게 html이 생성되서 결과로 전달된 js가 브라우저에서 실..

SCSS를 정리하면서 CSS 코드를 보다보니 클래스 이름을 매우 번거롭게 _를 두개씩 써가면서 작성해놨길래 이상하다 싶어서 찾아봤는데 BEM이라는 방법론에 입각한 것이었다! 이번 포스트에서는 BEM 방법론에 대해서 살펴보자.  CSS에도 바람이 많이 분다~ CSS 개발을 위한 방법론몇년 전이지만 ITWORLD라는 곳에서 프로그래머가 가장 힘들어하는 일을 개발자 대상으로 조사한 적이 있다. 그 결과를 보면 실소를 금할 수 없지만 정말 공감이 간다. 무려 "이름짓기"다.CSS에서도 마찬가지이다. 요소들을 구분하기 위해 id와 class를 남발하다보면 어디에 무엇이 있었는지 알기 너무 힘들어진다. 다른 사람과의 작업 결과물을 합치다 보면 그냥 또다른 쓰레기를 새로 만드는게 훨씬 빠르겠다는 생각이 들고 어느..

이번 포스트에서는 보간법 즉 interpolation에 대해서 살펴보자. Interpolation #{ } Interpolation(보간법)은 문자열 중간에 특정 기호( #{변수} )로 표시해둔 부분을 문자열로 치환하는 기법을 말한다. 일반적으로는 값 보다는 속성을 동적으로 만들어야 할 때 사용된다. $name: my; $색: color; @warn "JS `과 비슷: #{$name}, #{$색}, #{2+4}"; @warn "JS `과 비슷: "+$name+", "+$색+", "+#{2+4}; #{$name}-div { border-#{$색}: blue; background-#{$색}: red; } my-div { border-color: blue; background-color: red; } @war..

재사용의 출발점은 아마도 변수의 활용일 것이다. CSS에서는 동일하게 사용되어야 하는 값이 있을 때 변수를 적용할 수가 없었다. 따라서 변경이 필요할 때 모든 값을 일일이 변경해줘야 하는 번거로움이 있었다. 이번 포스트에서는 SCSS에서의 변수 활용에 대해서 살펴보자. 변수의 사용 $를 이용한 변수의 선언 및 사용 SCSS에서 변수의 선언은 $ 기호를 사용한다. 변수를 선언할 때는 위치에 따라 stylesheet의 root에 선언하는 전역 변수와 style 블록 내부에서 사용되는 지역 변수로 나뉠 수 있다. // 전역 변수 $base-color: blue; .variable { // 지역 변수 $sub-color: rgba($base-color, 0.5); @warn $base-color $sub-col..

이번 포스트에서는 Scss에서 style을 작성하는 규칙인 Style Rule에 대해서 살펴보자. 기본 작성법 그냥 쓰려면 scss나 css나 동일 scss의 특별한 기능을 사용하지 않을꺼라면 scss나 css의 사용법은 동일하다. // scss .button { padding: 3px 10acpx; font-size: 12px; } // css .button { padding: 3px 10acpx; font-size: 12px; } 앞으로 코드를 비교할 때 왼쪽 블록은 scss, 오른쪽 블록은 css임을 밝혀둔다. 삶을 윤택하게 해주는 nesting scss의 진가는 선택자의 중첩 기능에서부터 발휘된다. 일반적인 css의 선택자는 재사용이나 계층적인 구조화가 어렵다. 예를 들어 nav ul, nav>l..

이번 시리즈 포스트에서는 SCSS에 대해서 살펴보자. 답답한 CSS에서 깜짝 놀랄만한 SASS로!! 그리고 Scss까지. 개인적으로 frontend에서 backend까지 풀스택으로 웹을 다루는 개발자의 입장에서 가장 좀 답답하다고 생각되는 분야가 있다면 바로 CSS이다. 물론 부족한 미적 감각으로 인해 아무리 만지작 거려도 예뻐지지 않는다는 점도 일부 작용하겠지만 CSS는 쉬운 듯하면서 어려운 것 중 하나이다. 아니 어렵다기보다는 답답하다. (어려운 측면은 종류가 많아서 원하는 걸 찾기가 어려운 면이 있다.) CSS에는 일반적으로 프로그래밍에서 사용하는 그 흔한 변수나 함수등이 없다. 외부 CSS를 링크거는 등 모듈화 하려는 노력이 있으나 전체적으로 재사용하기가 어려우며 규모가 커질수록 유지보수성 역시 ..