sass 정리

@import "reset.scss";

$default_color: blue;
.test {
  color: $default_color;

  .gap {
    color: $default_color;
  }

  &red {
    color: red;
  }
}

%box {
  color: aqua;
  border: 1px solid #000;
}

.boxExp {
  @extend %box;
}


//동일한 네임스페이스 처리
.box {
  font: { 
    weight: bold;
    size: 10px;
    family: sans-serif;
}}


// @at-root
// 중첩 벗어나기
.list {
  $w: 100px;
  $h: 50px;
@at-root .boxList { 
  width: $w;
  height: $h;
}}


// !default
// 값이 이미 있다면 무시하고, 값이 없다면 작성한 값을 할당
$color: red;
.box {
  $color: blue !default; 
  background: $color;
}


// 연산
div {
  $x: 100px;
  width: $x / 2; // 변수에 저장된 값을 나누기
  height: (100px / 2); // 괄호로 묶어서 나누기
  font-size: 10px + 12px / 3; // 더하기 연산과 같이 사용
}

// string 연산 : 첫번째 피연산자를 기준으로 연산 결과 인식
div::after {
  content: 'Hello ' + World;
  flex-flow: row + '-reverse' + ' ' + wrap;
}



// @if @else if @else and or not
$width: 90px;
div {
  @if not($width >= 100px) {
    height: 300px;
  } @else if () {
    height: 600px;
}}


// @Mixin(선언하기), @include(사용하기), @content
@mixin large-text {
  font : {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  &::after {
    content: "!!"
  }
  span.icon {
    background: url("/images/icon.png");
  }
}

h1 {
  @include large-text;
}

// 함수 스타일로 사용하기
// @mixin 믹스인이름($매개변수) {
//   스타일;
// }
// @include 믹스인이름(인수);
@mixin dash-line($width, $color) {
  border: $width dashed $color;
} 

.box1 {
  @include dash-line(1px, red);
}
.box2 {
  @include dash-line(4px, blue);
}

// 믹스인 키워드 인수 : 인수 순서 상관없이 매개변수 연결 가능
@mixin postion($p: absolute, $t: null, $b: null, $l:null, $r: null) {
 position: $p;
 top: $t;
 bottom: $b;
 left: $l;
 right: $r;
}
.fixed {
  // 인수 순서 없이 매개변수 연결 가능
  @include postion(fixed, $t: 3px, $r: 5px);
}

// 가변인수
@mixin bg($width, $height, $bg-values...) {
  width: $width;
  height: $height;
  background: $bg-values;
}

div {
  @include bg(
    10px,
    20px,
    url('/images/a.png') no-repeat 10px 20px,
    url('/images/b.png') no-repeat,
    url('/images/c.png')
  );
}

@mixin font($style: normal, $weight: normal, $size: 16px, $family: sans-serif) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}
div {
  $font-values: italic, bold, 16px, sans-serif;
  @include font($font-values...);
}

span {
  // 필요한 값만 줄 때
  @include font((weight: 900, family: monospace)...);
}

// @content : mixin에 스타일 블록을 추가해서 사용 가능
@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}

.icon2 {
  @include icon('/images/icon.png') {
    position: absolute; // 스타일 추가해서 사용
  }
}




// @function
@function limitSize($size) {
  @if $size >= 0 and $size <= 200px {
    @return 200px;
  } @else {
    @return 800px;
  }
}

.tstee { // 호출
  width: limitSize(180px);
  height: limitSize(340px);
}


// if(조건, true, false)
$width: 555px;
.gjeid {
  width: if($width > 300px, $width, null)
}



// @for 반복문
// @for $변수 from 시작 through 종료 {반복내용} 종료 만큼 반복
// @for $변수 from 시작 to 종료 {반복내용}  종료 직전까지 반복
@for $i from 1 through 3 {  
  .through:nth-child(#{$i}) {
    width: 20px * $i;
  }
}




// @each $변수 in 데이터
$fruits: (apple, orange, banana, mango); // list 데이터

.fruits {
  @each $fruit in $fruits {
    li.#{fruit} {
      background: url('/images/#{$fruit}.png');
    }
  }
}





// Map 데이터 형식
// @each $key변수, $value변수 in 데이터{}
$fruit-data: (
  apple: korea,
  banana: china,
  orange: japan,
);
@each $fruit, $country in $fruit-data {
  .box-#{fruit} {
    background: url("/images/#{$country}.png")
  }
}