MINYA

Sass(SCSS) 문법 - 중첩 Sass는 중첩 기능을 사용할 수 있습니다. 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있습니다. SCSS: .section { width: 100%; .list { padding: 20px; li { float: left; } } } Compiled to: .section { width: 100%; } .section .list { padding: 20px; } .section .list li { float: left; } Ampersand (상위 선택자 참조) 중첩 안에서 ＆ 키워드는 상위(부모) 선택자를 참조하여 치환합니다. SCSS: .btn { position: absolute; ＆.active { color: red; } } .lis..

Sass(SCSS) 문법 - 주석 위의 ‘Sass와 SCSS의 차이점’에서 설명한대로 Sass와 SCSS의 기능은 동일하니, 편의를 위해 SCSS 문법으로 설명을 진행합니다. 단, Sass와 SCSS의 차이점이 있다면 나눠 설명합니다. 주석(Comment) CSS 주석은 /* ... */ 입니다. Sass(SCSS)는 JavaScript처럼 두 가지 스타일의 주석을 사용합니다. // 컴파일되지 않는 주석 /* 컴파일되는 주석 */ Sass: /* 컴파일되는 * 여러 줄 * 주석 */ // Error /* 컴파일되는 * 여러 줄 * 주석 */ Sass의 경우 컴파일되는 여러 줄 주석을 사용할 때 각 줄 앞에 * 을 붙여야 하고, 중요한 것은 * 의 라인을 맞춰줘야 합니다. SCSS: /* 컴파일되는 여러 ..

Sass(SCSS) 컴파일 방법 Sass(SCSS)는 웹에서 직접 동작할 수 없습니다. 어디까지나 최종에는 표준 CSS로 동작해야 하며, 우리는 전처리기로 작성 후 CSS로 컴파일해야 합니다. 다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발 환경(Node.js)에서 추천하는 몇가지 방법을 소개합니다. SassMeister https://www.sassmeister.com 간단한 Sass 코드는 컴파일러를 설치하는게 부담될 수 있습니다. 그럴 경우 SassMeister를 사용할 수 있습니다. 페이지 접속 후 바로 Sass나 SCSS 문법으로 코딩하면 CSS로 실시간 변환됩니다. HTML를 작성하여 적용된 결과를 보거나 Sass 버전 설정 등 여러 환경 설정들을 지원하니 학습에 도움이 될 것입니다. n..

Sass와 SCSS는 차이점 Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다. SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다 더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무 이다 Sass: Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분 .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px SCSS: SCSS는 {}로 범위를 구분 .list ..

CSS Preprocessor 란? Sass, Less 등이 있습니다. 이 친구들은 CSS 전(예비)처리기 입니다. 보통 CSS Preprocessor 라고 부릅니다. CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 CSS가 동작하지만 우리는 CSS의 불편함을 이런 확장 기능으로 상쇄할 수 있습니다. 사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다. 어떻게 사용할까? 위에서 언급한 것처럼 웹에서는 CSS만 동작합니다. Sass, Less, Stylus 같은 전처리기(이하 ‘전처리기’로 표기)는 직접 동작시킬 수 없습니다. 그렇다면 어떻게 사용할 수 있을까? CSS는 불편하니 일단 배제하고 우선 전처리기로 작성(코딩)합니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(N..