Variable 변수 사용하기 – scss 문법 3

css 에서 불편한 점 중 하나가 반복적인 값을 반복적으로 기입해야하는 것이다. 변수(Variable) 을 사용할 수 있으면 얼마나 좋을까? scss 는 이 부분을 쉽게 해준다. 변수명 앞에는 달러 표시($)를 붙여준다. //Variable $text-color:#333; $font-family: Hevlvetica, Arial, sans-serif; * { box-sizing: border-box; } body { margin:0; padding:0; /* font-family: $font-family; font-size: 1.125em; line-height: 1.5; font-weight: 400; */ font: 400 1.125/1.5 … Variable 변수 사용하기 – scss 문법 3 더보기

Nested Properties – scss 문법 2

아래 scss 파일을 살펴보자. 폰트 프라퍼티 (font-family,font-size,font-weight)를 보면 font 라는 단어가 반복된다. 이 부분을 좀 더 편하게 쓸 수는 없을까? scss 에서는 가능하다. * { box-sizing: border-box; } body { margin:0; padding:0; font-family: Hevlvetica, Arial, sans-serif; font-size: 1.125em; line-height: 1.5; font-weight: 400; -webkit-font-smoothing: antialiased; color: #333; &.boxed-layout { background-color: #F9F9F9; } } p { margin-bottom: … Nested Properties – scss 문법 2 더보기

Nesting – scss 문법 1

sass 와 scss 에서 가장 중요한 특징 중 하나가 네스팅(nesting)이다. 네스팅은 한국말로 ‘둥지를 틀다’라는 뜻이지만, Sass 에서는 하나의 정의 안에 또 다른 정의를 하는 것을 말한다. 언듯 이해하기가 힘들 수 있으니, 예를 들어보자. 아래처럼 css 를 쓰려면 하나의 { } 안에 하나의 요소만 정의할 수 있다. 하지만, scss 또는 sass 에서는 하나의 { } 안에 … Nesting – scss 문법 1 더보기

sass vs scss 문법 차이

sass 와 scss 는 SASS 의 두가지 형태이다. 각각 파일 확장자가 sass 나 scss 로 끝난다. sass 나 scss 나 모두 똑같이 css 파일로 컴파일되지만, 문법에 있어 약간의 차이가 있다. 각자 장단점이 있지만, scss가 최신 문법으로 css 에 보다 가깝고 최근에는 더 보편적으로 쓰인다. 매우 단순하게 차이점을 정리하면, sass 는 인텐트에 기반한 문법이고 scss 는 … sass vs scss 문법 차이 더보기

Sass 는 무엇이며 어떻게 설치하나요? – Sass 설치방법

SASS 는 무엇인가? Sass 는 preprocessor 이다. Preprocessor는 이미 존재하는 다른 랭귀지를 확장하여 그 작업을 더 간편하게 또는 빠르게 해주는 도구이다. Sass 는 css 작업을 위한 preprocessor인 셈이다. css 만 사용하던 사람들에게는 sass 라는 이름이 생소하다보니 어렵게 느껴질지도 모른다. 하지만, sass 작업은 css 작업의 확장일 뿐 그 이상도 그 이하도 아니다. 다시말해, sass는 css를 보다 … Sass 는 무엇이며 어떻게 설치하나요? – Sass 설치방법 더보기