SASS/SCSS 내장 함수 정리

지난 글에서  SCSS의 기본적인 문법과 확장, 믹스인, 함수를 작성하는 방법에 대해 정리해 보았다. 이번에는 SASS가 제공하는 기본 함수들을 정리했다. SASS의 기본 함수들은 크게 다음과 같이 나뉜다. 색상 관련 함수 : 색상 정보 RGB, HSL 값으로 생성하거나, 기존에 만들어져 있는 색상값을 변경할 수 있다. 특히 색상은 유지한채 밝기나 선명도를 변경하는 함수는 동일 색조 내에서 색을 변경하는데

SCSS/SASS 문법 정리

SCSS는 기존 CSS 문법에 SASS문법을 섞은 것이며, SASS 컴파일러로 그대로 컴파일 될 수 있다. 이 글에서는  SCSS 문법을 기준으로 SASS의 각 기능을 사용하는 방법에 대해 설명하도록 하겠다. 기본문법 – 셀렉터 지정 및 속성 작성 SCSS의 기본문법은 기본적으로 CSS 기본 문법을 그대로 적용하고, 여기에 SASS 식의 치환가능한 요소들을 추가할 수 있다. 기본룰은 다음과 같다. 기본틀은 CSS

SASS 간단정리

SASS 문법 모든 문법 작성은 SCSS 기준으로 작성한다. 규칙 네스팅 중괄호 속에 하위 요소에 대한 스타일을 지정하는 형태로 네스팅한다. #main p { color: #00ff00; width: 79%; .redbox { background-color: #ff0000; color: #000000; } } // complied: #main p { color: #00ff00; width: 79%; } #main p .redbox { background-color: #ff0000; color: #000000; } 상위요소 참조