개발 일기

1 SASS(SCSS)란? CSS란? Cascading Style Sheets, 문서의 스타일을 구현하는 스타일 시트 언어 CSS Preprocessor Sass, Less 등이 css전처리기이다. css가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 css가 동작하지만 우리는 css의 불편함을 이런 확장 기능으로 상쇄할 수 있다. Sass Syntactically Awesome Stylesheets, 문법적으로 엄청난 스타일 시트 - CSS의 단점을 보정하기 위한 css의 확장으로 나온 스크립트 언어. 프로젝트가 점점 커지고, 스타일 시트도 덩달아 커지게 되면 유지보수가 힘들어진다. 그래서 이러한 단점들을 보완하기 위해 variable, nesting, mixin, inheritance 등의 개념이..

중첩 중첩은 CSS의 문법을 응용하여, 선택자나 속성의 관계를 중첩 형태로 풀어낸 문법. 규칙 중첩 부모 선택자를 반복하지 않고 중첩해서 사용할 수 있다. 속성 중첩 css 속성 중 네임스페이스로 묶인 속성이 있다. 예로 들면 font-, margin-... .box{ font:{ family:Gothic; size:30em; weight:bold; }; margin:{ top:50px; left:40px; }; padding:{ top:20px; right:20px; }; } 특수 선택자 Sass는 css 선택자의 모든 형태 외에 특수 선택자를 제공한다. 부모 참조 선택자 & & 키워드는 상위(부모) 선택자를 참조하여 치환한다. .btn{ position:absolute; &.active{ color:..

SASS는 변수를 사용할 수 있어서, 반복적으로 사용되는 코드를 변수에 저장하고 꺼내 쓸 수 있다. 수정할 때는 변수의 값만 변경하면 되므로 작업이 간단해진다. 변수 선언하기 $variable-name : variable-value; 예를 들어 $jb-color:red; jb-color라는 변수에 red라는 값을 저장한다. 변수 사용하기 .box{ background-color:$jb-color; } See the Pen by seyoungjoy (@seyoungjoy) on CodePen.