[Front-end🦁] #19 Linux, SASS

.
├── README.md
├── a
│   ├── one.txt
│   └── two.txt
└── b
    ├── c
    │   └── four.txt
    └── three.txt

//SCSS
$font-stack: Helvetica, sans-serif;
$primary-color : #333;

body {
	font: 100% $font-stack;
	color: $primary-color;
}

// style.scss 
@import "variables";
@import "mixin";
@import "header";
@import "main";

// variables.scss
$white: #fff;
$dark-black: #1f1f1f;
$light-black: #313030;

// 부모 자식 관계 대로 중첩해서 사용하면 된다.
.info-list {
  div {
    display: flex;
    font-size: 14px;
    color: #4f4f4f;
    dt {
      font-weight: 700;
      margin-right: 7px;
    }
  }
}

.add-icon {
// 겹치는 속성명: 도 중첩해서 사용 가능.
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
    // @at-root 를 쓰면 중첩에서 빠져나갈 수 있다.
    @at-root i {
      opacity: 0.5
    }
  }
}

// &이 들어간 곳은 부모의 이름이 들어간다.
.box {
    &:focus{} // 가상선택자
    &:hover{}
    &:active{}
    &:first-child{} 
    &:nth-child(2){}
    &::after{} // 가상요소
    &::before{} 
}

// 겹치는 클래스명에 쓰게 응용 가능.
.box {
	// global 키워드로 전역 변수로 변경 가능.
	$line-normal: 1.34 !global;
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}

$변수이름: 값;
@debug 변수 //이런식으로 값 확인 가능.

🔢 number : 1, .82, 20px, 2em,, ...
🧵 string : "./images/a.png", bold, left, uppercase, ...
🎨 color : green, #FFF, rgba(255,0,0,.5) 등
👍 boolean : true, false
📭 null
📦 list : index 1부터 시작. -1 -2 -3 접근도 가능.
🗺 map

    // 공백 , 대신 /로 구분도 가능. 
    $font-size : 10px 12px 16px; //폰트사이즈 리스트
    $image-file : photo_01, photo_02, photo_03 //이미지 파일명 리스트
    //아래와 같은 형태로 사용(순회도 가능)
    list.nth(10px 12px 16px, 2); // 12px
    list.nth([line1, line2, line3], -1); // line3
    // 내장함수
    list.append(list,value,[separator])
    list.index(list,value)
    list.nth(list, n)

    $font-weights: ("regular": 400, "medium": 500, "bold": 700); //글자 굵기 리스트
    map-get($font-weights, "medium"); // 500
    map-get($font-weights, "extra-bold"); // null
    //내장함수
    map-get(map,key)
    map-keys(map)
    map-values(map)

@mixin center-xy{
	display: flex;
	justify-content : center;
	align-items : center;
}
.card{
	@include center-xy; // 정의한 center-xy mixin을 사용하여 코드 한줄이면 끝!
}
.aside{
	@include center-xy; 
}

// 진짜 함수처럼 인자를 이용할 수 있다.
@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
  background-image: url($ul);
  background-size: $size;
  background-repeat: $repeat;
  background-position: $positionX $positionY;
} 

// @content를 이용해서 스타일을 추가할 수도 있다.
@mixin my-font($x, $y) {
    font-size: $x * $y + px;
    @content
}
div {
    @include my-font(10, 10) {
        color: red;
    }
}

// 기본값을 줄 수 있다.
@mixin flex($horizontal: cetner, $vertical: center) {
    display: flex;
    justify-content: $horizontal;
    align-items: $vertical;
}
@include flex; //로 사용할 수 있다. 만약 하나만 바꾸고 싶으면 인자 하나만 적어주면 된다.

.profile-user {
  background-image: url("../assets/user.jpg");
  background-size: cover;
	background-position : 50% 50%;
  border-radius: 50%;
	width : 50px;
	height : 50px;
}
.comment-user {
  @extend .profile-user;
}

// 기본 스타일을 선택자로 만들어서 extend로 가져다 쓸 수 있다. modal, btn(기본) 등에 쓸 수 있다.
%modal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
}
.login-modal {
  @extend %modal;
  width: 272px;
  height: 405px;
  padding: 10px 20px;
}
.event-modal {
  @extend %modal;
  width: 340px;
  height: 160px;
  padding: 18px;
}

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}
.banner {
  @include theme-colors($light-theme: true);
  body.dark & { // 부모를 잡아서 처리.
    @include theme-colors($light-theme: false);
  }
}

for ($변수) from (시작) through(끝){
	// 반복할 내용
}

@for $i from 1 through 5 { // 5포함.
  // 해당 숫자를 넣고 싶은 곳에 #{$변수} 로 써야한다.
  // 숫자에 *10 하고 싶으면 {} 안쪽에 써야함.
  // #{$변수}의 결과는 문자열
  .photo-box:nth-child(#{$i}) { 
    background-image: url("../assets/phoster#{$i}.png");
  }
} 

@each ($변수) in (리스트나 맵){ 
	// 반복할 내용
}

$color-palette: #dad5d2 #3a3532 #375945 #5b8767 #a6c198 #dbdfc8;
@each $color in $color-palette {
  $i: index($color-palette, $color); //index는 list의 내장함수
  //index로 다시 가져올 수 있다.
  .color-circle:nth-child(#{$i}) {  //#{$i} 안감싸면 그냥 $i 문자열로 인식됨.
    background: $color;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
}

@while 조건 {
	// 반복할 내용
}

@function 함수이름($매개변수) {
	// 실행 코드
	@return 값
}

@function scale-below($value, $base, $ratio: 1.618) {
  @while $value > $base {
    $value: ($value/$ratio);
  }
  @return $value;
}
$normal-font-size: 16px;
.sup {
  // mixin과 다른 점 : @include 키워드 없이 사용.
  font-size: scale-below(20px, 16px); 
}

// 인자 : 함수, 간격 ms.
setInterval(sayHello, 5000); // interval : 일정 간격으로 일어나는.
setTimeout(sayHello, 5000);  // timeout : 딜레이를 줌. 

const date = new Date();
date.getFullYear(); date.getMonth(); date.getDay();
date.getHours(); date.getMinutes(); date.getSeconds();
date.getMilliseconds();

// 시계 만들기.
function getClock() {
    const date = new Date();
    // padStart(2, "0"); - 어떤 문자열의 길이가 2 이상이면 아무것도 하지 않고,
    // 2 미만일 때 길이가 2가 될 때까지 앞에 0을 붙임. padEnd도 있다.
    const hours = String(date.getHours()).padStart(2, "0");
    const minutes = String(date.getMinutes()).padStart(2, "0");
    const seconds = String(date.getSeconds()).padStart(2, "0");
    clock.innerText = `${hours}:${minutes}:${seconds}`;
}
// 처음 들어갔을때는 출력이 되지 않으므로 한번은 직접 출력해준다.
getClock()
setInterval(getClock, 1000);