뇌 채우기 공간

색상도 연산을 할 수 있다. rgba로 연산할 때는 알파 부분이 값이 동일해야한다 (0.5) 알파 부분에 연산을 하고 싶으면 opacify() -> 더 불투명하게 함수 transparentize() -> 더 투명하게 함수

문자 String 문자 연산에는 + 가 사용된다. 문자 연산의 결과는 첫 번 째 피연산자를 기준으로 한다. 첫번째 피연산자에 따옴표가 붙어있으면 연산 결과는 따옴표로 묶는다.

가져오기 import @import로 외부에서 가져온 sass파일은 모두 단일 css출력 파일로 병합된다 여러파일 가져오기 하나의 @import로 여러 파일을 가져올 수도 있다. @import "header", "footer"; header.scss / footer.scss파일을 가지고 와라 파일분할 프로젝트 규모가 커지면 파일들을 header나 side-menu같이 각 기능과 부분으로 나눠 유지보수가 쉽도록 관리하게 된다. 이 경우 파일이 점점 많아지는데, 모든 파일이 컴파일 시 각각의 css로 저장되면 관리나 성능차원이 문제가 있을 수 있다. 그래서 파일이름 앞에 _를 붙여 _header.scss로 @import로 가져오면 합쳐져서 나온다. Sass(SCSS) 완전 정복! | HEROPY Sass(S..

!default 플래그는 할당되지 않은 변수의 초깃값을 설정한다. 할당되어있는 변수가 있다면 변수가 기존 할당 값을 사용한다. $color-primary에 이미 다른 것이 존재한다면 기본 선언 값을 사용하겠다 라는 뜻이다. 유용하게 사용할 수 있는 것은 만약에 부트스트랩에서 외부 라이브러리를 연결했는데 변수 이름이 같아서 내가 작성한 코드의 변수들이 덮어쓰기 되어지면 안되기 때문에 그 때 사용한다.

!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로 컴파일하는 것을 볼 수 있다.