SASS (SCSS)
-
Sass 사용하기 - 변수, 색상 관련 함수SASS (SCSS) 2019. 6. 26. 13:21
1. 변수 : 스타일을 작성할 때 코드를 반복적으로 사용하는 경우가 있다. 예를 들어 대표적으로 컬러가 될 수 있겠다. 그 외에도 배경색, 너비, 폰트, 서체 등이 있을 수 있다. sass에서는 이러한 반복적인 코드를 변수에 담아 반복적인 코드를 쓰지않고 줄일 수 있도록 도와준다. 변수 설정을 하면 수정을 할 때도 간편할 것이다. 변수 하나만 바꾸면 되니까. 사실 css 에서도 컬러 변수를 사용 할 수 있다. :root { var-main-color: #333; //변수설정 } .main h3 { color: var(main-color); //원하는 변수 사용 } 학원에서 배웠을 때 이렇게 배웠기 때문에 당연히 실무에서도 쓸 수 있겠지 생각했으나, 이러한 css 변수 설정은 최신 버전의 웹킷에만 한정되기..
-
Sass 사용하기 - 출력스타일과 주석사용하기 / '&' 사용하여 상위 선택자 참조하기SASS (SCSS) 2019. 6. 26. 13:16
1. sass 출력 스타일 : sass는 4가지의 css 출력 스타일을 지원한다. 그 4가지는 1) 중첩(nested, 기본), 2) 확장(expanded), 3) 축약(compact), 4) 압축(compressed) 가 있다. 1) 중첩 (nested) : sass 출력스타일중 기본으로, 중첩된 형식이다. html 구조를 반영하기 위해 규칙마다 들여쓰는 스타일이다. 이런식으로 들여써지기 때문에 스타일 구조를 쉽게 알아 볼 수 있다. 2) 확장(expanded) : 직접 작성한 css 스타일과 유사하다. 기본 중첩 스타일 대신 확장 스타일을 사용하려면 sass 파일을 감시하라는 명령어에 플래그를 추가하면 된다. $ sass --watch --style expanded style.scss:style.cs..
-
Sass 사용하기 - 들어가기 전에SASS (SCSS) 2019. 6. 26. 13:02
한 번도 써본적 없는 사람은 있어도 한 번만 써본 사람은 없다는 SASS에 대해서 이제부터 공부하고자한다. 기존 CSS 라면 중복도 많이되고 수정하기도 어려운것을 SASS를 사용하면 짧은 코드로 편하게 쓸 수 있다고한다. 간단히 말해 SASS는 CSS3가 확장된 것이며, SCSS문법은 CSS3의 상위 집합이라고 할 수 있다. SASS 웹사이트에서는 SASS에 대해서 다음과 같이 서술하고있다. SASS는 CSS 상위에 있는 메타언어입니다. 단조로운 CSS에 강력한 힘을 주며, CSS 문서의 스타일을 깔금하고 구조적으로 묘사하는데 사용됩니다. SASS는 보다 간결하고 격식을 갖춘 CSS 문법을 제공하며, 스타일시트를 쉽게 관리할 수 있는 다양한 기능을 구현합니다. 사실 이렇게 봐도 처음볼때 나는 이게 뭔소리..