분류 전체보기 753

[SCSS] 가변 인수 / 입력할 인수가 불확실할때 사용 /...

때때로 입력할 인수의 개수가 불확실한 경우가 있다. 그럴 경우 매개변수 뒤에 ...을 붙인다. 순서대로 인수가 들어가는데 3개를 받겠다고 했는데 5개를 넣었다. 원래는 오류가 나는데 bg옆에 ...을 붙였으니 bg라는 변수가 그 다음 것들을 다 받는다. // 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음 @mixin bg($width, $height, $bg-values...) { width: $width; height: $height; background: $bg-values; } div { // 위의 Mixin(bg) 설정에 맞게 인수를 순서대로 전달하다가 3번째 이후부터는 개수에 상관없이 전달 @include bg( 100px, 200px,..

WEB/SASS,SCSS 2021.04.20

[SCSS] 재활용 Mixins / 같은 코드를 정의해서 include로 재사용한다

재활용이라는 것은 같은 코드를 a부분에서도 사용하고 b부분에서도 사용하고 c부분에서도 사용하는 것이다. 그 내용을 정의 하는 것이 @mixin이고 사용하는 것이 @include이다. @mixin으로 size라는 재활용 코드를 정의했다. 그리고 인수로 값을 넣으면 되는데 매번 같은 값을 가질라면 어떻게 해야하는가 기본값을 mixin에서 설정해주고 다음에 그 값을 쓸 때는 인수 없이 그냥 mixin명만 써주면 된다. 그리고 값을 변경하고 싶을때는 값을 적어주면 된다.

WEB/SASS,SCSS 2021.04.20

[SCSS] @import / 여러 파일 가져오기 / 파일 분할 / 하나의 css로 컴파일

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

WEB/SASS,SCSS 2021.04.19

[SCSS] 변수의 !default 초깃값 설정 / 변수 이름이 같을 때 초깃값을 사용하겠다.

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

WEB/SASS,SCSS 2021.04.19

[SCSS] 변수의 !global 전역설정

!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을 지정해주었기에 다른 곳에서도 쓸 수 있다. 기존에 선언된 값이 있고 또 같은 변수명으로 또 선언을 다른 값으로 해..

WEB/SASS,SCSS 2021.04.19

[SCSS] 변수 유효 범위 / 변수 재할당

변수의 유효범위 변수는 사용 가능한 유효범위가 있다. 선언된 블록({}) 내에서만 유효범위를 가진다. 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)에 대해서 이해하고..

WEB/SASS,SCSS 2021.04.19