뇌 채우기 공간

!global 플래그를 사용하여 변수의 유효범위를 전역으로 설정할 수 있다. 2021.04.19 - [WEB/SASS,SCSS] - [SCSS] 변수 유효 범위 / 변수 재할당 [SCSS] 변수 유효 범위 / 변수 재할당 변수의 유효범위 변수는 사용 가능한 유효범위가 있다. 선언된 블록({}) 내에서만 유효범위를 가진다. 2021.04.19 - [WEB/SASS,SCSS] - [SCSS] @at-root 중첩 벗어나기 [SCSS] @at-root 중첩 벗어나기 중첩을 사용.. sso-feeling.tistory.com 이전 글에서 보았듯이 변수는 {} 안에서만 유효하다 하지만 !global을 지정해주었기에 다른 곳에서도 쓸 수 있다. 기존에 선언된 값이 있고 또 같은 변수명으로 또 선언을 다른 값으로 해..

변수의 유효범위 변수는 사용 가능한 유효범위가 있다. 선언된 블록({}) 내에서만 유효범위를 가진다. 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로 컴파일하는 것을 볼 수 있다.

중첩 CSS에서는 이렇게 계속 상위 선택자를 적어주어야한다. SCSS에서는 이렇게 중첩이 가능하다 출처 Sass(SCSS) 완전 정복! | HEROPY Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다. heropy.blog

출처 Sass(SCSS) 완전 정복! | HEROPY Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다. heropy.blog

폴더에 이 파일들을 만든다. scss는 브라우저에서 바로 실행이 안된다. 그래서 parcel로 컴파일을 해주어야한다. .container{ $size: 100px; .item{ width: $size; height: $size; background: tomato; } } terminal에서 npm init -y라고 친다 이렇게 하면서 설치가 된다. npm install --save-dev parcel-bundler 그리고 이렇게 치면 parcel 이 설치가 된다. 그리고 npx parcel index.html을 입력하면 로컬호스트 주소가 나타난다. http://localhost:1234로 나타났다. 이렇게 설치가 된다. 여기로 접근하니 적용했던 scss가 나타났다.

2021.04.19 - [WEB/html,CSS] - [html][css] grid 에 대해서 / display /grid-template-rows/ grid-template-columns/grid-column/gird-template-areas/gap(grid-row-gap) [html][css] grid 에 대해서 / display /grid-template-rows/ grid-template-columns/grid-column/gird-template-areas/gap(grid-ro display grid container을 정의한다. 그리드를 사용하기 위해 필수적이다. 1 2 3 1 2 3 .container{ display: grid; width:300px; height:250px; border..