뇌 채우기 공간

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

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..

display grid container을 정의한다. 그리드를 사용하기 위해 필수적이다. 1 2 3 1 2 3 .container{ display: grid; width:300px; height:250px; border: 4px solid lightgray; } .item{ border: 2px dashed red; } display: grid;는 블럭요소같은 grid를 만드는 것이다. display: inline-grid; container의 css를 이렇게 바꾸면 inline요소 같은 grid가 만들어진다. grid-template-rows 행이 몇개인지 정의하는 것 grid-template-columns 열이 몇개인지 정의하는 것 1 2 3 .container{ display: grid; grid-..

order: flex item의 순서를 지정 flex: flew-grow, flex-shrink, flex-basis의 단축속성 flex-grow: flex item의 증가 너비 비율을 설정 flex-shrink: flex item의 감소 너비 비율을 설정 flex-basis: flex item의 (공간 배분 전) 기본 너비 설정 align-self: 교차 축에서 item의 정렬 방법을 설정 order item의 순서를 설정합니다. item에 숫자를 지정하고 숫자가 클수록 순서가 밀린다. 음수가 허용된다. html구조와 상관없이 순서를 변경할 수 있어서 유용하다. 기본값은 0 1 2 3 4 5 6 .container{ border: 4px solid; display: flex; } .container ...