qwef

@mixin left-top{ position: absolute; top: 0; left: 0; @content; } .container{ @include left-top; width: 300px; height: 300px; background-color: brown; .box{ width: 200px; height: 200px; background-color: yellow; @include left-top{ bottom: 0; right: 0; margin: auto; } } } 저렇게 @content 넣어두면 @include 할 때 변경이나 추가를 할 수 있다. 물론 left-top 자체가 바뀌는 건아님. 사실 .box{ width: 200px; height: 200px; background-colo..

$map : ( o : orange, r : red, b : blue ); .box:nth-of-type(1){ background-color: map-get($map, o); } .box:nth-of-type(2){ background-color: map-get($map, r); } .box:nth-of-type(3){ background-color: map-get($map, b); } map-get(오브젝트, 필드이름) 으로 값에 접근할 수 있다. 이거 말고도 많음. 맵 모든 값 return, 모든 key return, 해당 키가 있는지 true or false 등 https://homzzang.com/b/sass-13 홈짱닷컴 홈페이지 제작, 그누보드 강의, 웹코딩, HTML, CSS, JAVASC..

$list : orange, royalblue, burlywood; @for $i from 1 to 4{ .box:nth-of-type(#{$i}){ background-color: nth($list, $i); } } 이렇게 nth(리스트, 인덱스)로 접근할 수 있음.

$number : 1; $string : bold; $color : red; $boolean : true; $null : null; $list : orange, royalblue, burlywood; $map : ( o : orange, r : red, b : blue ); list는 배열, map은 객체 형태

@import './sub.scss'; 저기에 있는 것도 같이 적용 됨. @import url(./sub.scss); 이렇게 css에서 했던걸로 해도 가능 함.

&.built-in { @include center; background-color: mix($color, red); } &.built-in 은 자신에 built-in 클래스가 있는 경우 mix(색1, 색2) 값을 섞는 건데, 둘 값의 중간값 주는 듯 background-color: lighten($color, 30%); 밝게 background-color: darken($color, 30%); 어둡게 background-color: saturate($color, 40%); 채도 높여주기 40% 높여줌 background-color: desaturate($color, 40%); 채도 감소 background-color: grayscale($color); 색생에 따라 회색 정도가 다르기에 색상 줘야 함. ..

@function ratio($size, $ratio){ @return $size * $ratio; } 그냥 이렇게 함수 정의해서 쓰면 됨. scss는 기본적으로 뭔가 기능 사용할 때는 @기능명 아마 저런 계산같은 것이 @function으로 쓰고 여러가지 속성 한번에 변경하는 용도가 @mixin 함수의 본질에 충실함.

scss에서 반복문도 쓸 수 있음. .container{ @include box(800px, royalblue); @include center; @for $i from 1 to 5{ .item:nth-child(#{$i}){ @include center; @include box(100px * $i); } } } @for 인덱스이름 from 1부터 to n까지 참고로 .item:nth-child(#{$i}) 여기서 #{$i} 이거는 저렇게 뭔가 값을 계산용도가 아니라 인덱스 용도로 쓸 때는 #{변수명} 이렇게 접근 해야 함. 보간법이라고 함. background-image: url('https://picsum.photos/200/300?random=' + $i); 이런 식으로도 가능함.

@mixin center{ display: flex; justify-content: center; align-items: center; } @mixin box($size : 150px) { width:$size; height: $size; background-color: aqua; } .container{ width: 400px; height: 400px; background-color: orange; @include center; .item{ @include center; @include box(200px); background-color: royalblue; } } 미리 정의해 두는.. 마치 예전에 따로 중복되는 속성 재사용 하려고 클래스 만들어서 썼었던 것 처럼.. 근데 얘네는 인자도 넣을 수 있음..

div{ width: 20px + 20px; height: 40px - 20px; font-size: 30px * 2; margin: (20px / 2); padding: 30px % 7; } 연산자와 피연산자 끼리 붙여도 떨어뜨려도 상관없다. 인지해야 할 것이, / 나누기는 ()괄호로 묶어줘야 한다. 왜냐하면, 우리 css 쓸 때 생각해보면 background : url(~~~~) no-repeat center / cover 이런 식으로 '구분자'로 /를 쓴다. 그래서 나누기는 괄호로 묶어야 한다. 아니면 calc() 속성 그냥 쓰던지.. (단, calc() 사용할 때는 연산자와 피연산자 끼리 떨어뜨려 놔야 함.)