뇌 채우기 공간

if(함수) 조건의 값 (true, false)에 따라 두 개의 표현식 중 하나만 반환한다. 조건부 삼항 연산자와 비슷하다. 조건? 맞으면 : 틀리면; ↑이게 삼항 연산자이다. if(조건, 표현식1, 표현식2) if에서 함수로 $width가 300px보다 크다면 , width: $width로 들어가고, 아니면 null로 넣겠다. null은 속성을 사용하지 않는다는 뜻이다. @if(지시어) 같이 사용할 수 있는 지시어는 @else , if가 있다. // @if @if (조건) { /* 조건이 참일 때 구문 */ } // @if @else @if (조건) { /* 조건이 참일 때 구문 */ } @else { /* 조건이 거짓일 때 구문 */ } // @if @else if @if (조건1) { /* 조건1이..

함수 자신의 함수를 정의하여 사용 할 수 있따. mixin과 약간 비슷하다 차이점은 mixin은 지정한 스타일을 반환하는 반면 함수는 연산된 특정 값 @return 지시어를 통해 반환한다. box1에서는 함수를 그대로 썻으므로 기본 값 정의 그대로 들어간다. box2와 3에서는 첫번째 인수를 정의해주었으므로 number가 각각 8과 3인 상태이다 함수는 내장함수가 있는데 내가 만든 함수랑 충돌할 수가 있다. 그래서 내가 만든 것은 별도의 접두어를 붙인다. my-custom-func-red() 이런식으로

@extend 특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우 사용한다. 하지만 원치않은 부작용이 초래할 수 있으므로 사용 권장하지 않는다. 엄청나게 확장됨

때때로 입력할 인수의 개수가 불확실한 경우가 있다. 그럴 경우 매개변수 뒤에 ...을 붙인다. 순서대로 인수가 들어가는데 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,..

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

and : 그리고 or: 또는 not: 부정(반대) 변수w가 50px보다 크고 150px보다 작으면 width를 400px로 적용하겠다. 참이므로 item의 width는 400px이다. 이 참인 조건 앞에 not을 붙이면 false가 된다. 그러면 item의 width는 400px이 아니다.

색상도 연산을 할 수 있다. 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에 이미 다른 것이 존재한다면 기본 선언 값을 사용하겠다 라는 뜻이다. 유용하게 사용할 수 있는 것은 만약에 부트스트랩에서 외부 라이브러리를 연결했는데 변수 이름이 같아서 내가 작성한 코드의 변수들이 덮어쓰기 되어지면 안되기 때문에 그 때 사용한다.