[css]실제로 써봤던 scss ㄴㅊㄴㄴ

파일명에 _(언더바) 붙이기

- 각종 변수 저장에 활용

@import "_mixin";

 

색상 밝기 조절

- 퍼센트가 커질수록 흰색이 됨

- darken도 있음

- #123456 = hsl(210,65%, 20%) > lighten(#123456, 10) =  hsl(210,65%, 30%)

$main : #123456;
$main-lighten : lighten($main, 10%);
// lighten($main, 10); 과 동일
$main-saturate : saturate($main, 50%);

 

flex 변수 저장

- @include flex();

  @include flex(bet);

  @include flex(cen); 등으로 활용

@mixin flex($j:""){
  display: flex; align-items: center; 
  
  @if($j ==  "bet"){
    justify-content: space-between;
  } @else if($j == "cen"){
    justify-content: center;
  }
}

 

정사각형

- @include wid(30px); 

@mixin wid($w){
  width: $w; aspect-ratio: 1/1;
}