변수의 유효범위 변수는 사용 가능한 유효범위가 있다. 선언된 블록({}) 내에서만 유효범위를 가진다. 2021.04.19 - [WEB/SASS,SCSS] - [SCSS] @at-root 중첩 벗어나기 [SCSS] @at-root 중첩 벗어나기 중첩을 사용하고 있다가 중첩을 벗어나고 싶을 때 @at-root 키워드를 사용한다. $w 와 $h는 변수인데 .box라는 것은 list의 밖에 있는데 그 변수를 쓰고 싶다. 그러면 @at-root를 사용한다. 밖에 쓰면 변 sso-feeling.tistory.com Sass(SCSS) 완전 정복! | HEROPY Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고..

반복적으로 사용되는 값을 변수로 지정할 수 있다. 항상 $를 붙인다. $가 붙은 것들은 변수들이다.

font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들은 중첩으로 사용할 수 있다.

중첩을 사용하고 있다가 중첩을 벗어나고 싶을 때 @at-root 키워드를 사용한다. $w 와 $h는 변수인데 .box라는 것은 list의 밖에 있는데 그 변수를 쓰고 싶다. 그러면 @at-root를 사용한다. 밖에 쓰면 변수를 사용할 수 없다.

CSS에서는 .btn클래스와 .active클래스를 같이 가지고 있는 것이 있다. SCSS에서는 &기호를 사용하여 표현한다. &가 상위 태그로 치환이 된다. 첫번째는 .btn으로 치환되고 두번쨰는 li로 치환이 되는 것이다. SassMeister | The Sass Playground! SassMeister | The Sass Playground! SassMeister: The sassiest way to play with Sass, Compass, & LibSass! Loading... www.sassmeister.com 여기에서 scss를 쓰고 css로 컴파일하는 것을 볼 수 있다.