input.scss

// sass input.scss output.css [input.scss 에서 output.css 로 변환]
// sass --watch input.scss output.css [--watch 를 넣어주면 실시간으로 바뀐다]
// input.scss 와 output.css 는 공백 또는 콜론으로 구분한다 / 가급적 명확하게 콜론이 좋다 :

// sass --style [expanded,compressed]
// expanded 는 기본값이며 예쁘게 나열되어있다
// compressed 는 한줄로 나열되어있다.

// --source-map 
// sourcemap을 사용하지않으면 요소검사툴에서 스타일의 위치를 추적하기가 좀 어렵다
// 배포할떄는 꼭 지워야된당.

// @import
// 파일명 _expresso.scss
// @import 'expresso';  //언더바(_)는 생략이 가능하고 언더바가 있으면 이 scss 파일은 import 전용으로 쓴다는 말이다.
// @import 'expresso.scss'; //확장자는 생략이 가능하다
// @import 'scss/expresso'; // 하위 폴더 지정
// @import 'expresso' , 'reset'; // 여러개 파일은 import
@import 'input2';
// input2.scss 를 불러온다.

// nesting 중첩
// 부모선택자를 반복해서 사용하지 않아도 되서 가독성이 더욱 뛰어나고 구조화된 느낌의 코드를 작성할수 있다
// 중첩이 너무 많아지면 가독성이 떨어질수도 있다.

// &  Referencing Parent Selectors ( this와 유사하다 )
// &를 쓰면 그곳에는 부모를 대입해서 해석하면 편할거같다.
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// scss
// a{
//     background-color: aqua;
//     &:hover{
//         background-color: black;
//     }
// }
// css파일
// a{
//     background-color: aqua;
// }
// a:hover{
//     background-color: black;
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// 접미사로 사용한 예시
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// .a{
//     .b & {
//         background-color: blue;
//     }
// }
// .b .a {background-color:blue;}
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

//변수 $VARIABLES 
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// $color-nomal: #666;
// $color-point: #f00;
// a{
//     color: $color-nomal;
//     &:hover{
//         color: $color-point;
//     }
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
//전역변수 / 지역변수
//최상위에 선언을 하면 어떠한 블럭에서도 그 변수를 참조할 수 있다 == 전역변수
//최상단이 아니라 블럭 안에 선언하게 되면 그 안에 있는 블럭에서만 사용이 가능하다 == 지역변수

//우선도 지역변수 > 전역변수

//!global ex) $size:12px !global;
//변수뒤에 붙이게 되면 블럭안에서도 전역변수로 선언할 수 있다 
//잘 사용하지 않는다

// interpolation #{}
// 문자열을 끼어넣을때 , 반복문 등등 주로 사용하게 된다
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// $name:hi;
// $b:border;
// div.#{$name}{
//     #{$b}-color:blue;
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

// 숫자 : 1,1.5,10px 
// 문자열 : "hi",'hi',hi
// 색상 : blue, #36afff, rgba(255,0,0,0.5)
// 불리언 : true, false
// 널 : null
// 리스트 1.5em 1em 0 2em,Arial,sans-serif
// 등

// @mixin 과 @include 
// 약간 mixin 은 선언? 같은걸로 보면되고 include 는 선언된것을 호출한다라는 식으로 생각하면된다
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// @mixin name {
//     background-color: aquamarine;
// }
// .text{
//     @include name;
//     color: white;
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// 룰셋을 포합하는것도 가능
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// @mixin name1 {
//     a{
//         color:white;
//     }
// }
// @include name1;
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// 다른 mixin 을 포함할 수도 있음
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// @mixin name {
//     @include hi;
//     @include hi2;
// }
// @mixin hi {
//     background-color: aqua;
// }
// @mixin hi2{
//     background-color: black;
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// @mixin border($color,$width :1px) {       //인자의 기본값(1px) include 시 생략이 가능하다
//     border: {
//         color: $color;
//         width: $width;
//         style:solid;
//     }    
// }
// p{@include border(blue,3px);}
// p{@include border($width:2px; $color:red); } // 인자값을 전달하는 순서를 키워드를 통해 순서를 바꿀수 있다.
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// 복수인자
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// @mixin margin($var...) {
//     margin: $var;
// }
// p{@include margin(3px)}
// p{@include margin(3px,3px)}
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
//@content
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// @mixin mq {
//     @media all and (max-width:600px) {
//         @content;
//     }
// }
// .mi{
//     background-color: white;
//     @include mq{
//         background-color: gray;
//     }
// }

// .mi{
//     background-color: white;
// }
// @media all and (max-width:600px){
//     .mi{
//         background-color: gray;
//     }
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// extend 사용법
// .a{
//     background-color: white;
// }
// .a_ice{
//     @extend .a;
//     color: white;
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// extend 한계점을 극복하기 위해
// %placeholder - extend only selector
// 가상으로 하나를 만들어준다음에 extend 한다
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// %a{
//     font-size: 30px;
// }
// .a{
//     @extend %a;
//     background-color: white;
// }
// .b{
//     @extend %a;
//     background-color: white;
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// media 쿼리 안에 @extend .a; 를 해줄떄는 media 쿼리 안에 .a가 있어야지 만약 밖에 있으면 안된다
// @function name($n)
// function 은 return 값이 꼭 있어야한다
// function 명은 -(하이픈), _(언더바)를 구분하지 않는다.
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// $g : 20px;
// @function name($n){
//     @return $n * $g ;
// }
// #side{
//     width: name(10);
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
//@at-root
//이전까지의 중첩된 부모 셀렉터를 무시하고 root에서부터 중첩이 계산된다
//@media css에서는 root에 선언되고 그 블록안에 룰셋을 작성하게 되어있찌만 sass 에서는 media를 스타일 블록 안쪽에 선언할 수 있도록 되어있다.
//셀렉터 안쪽에 media 쿼리를 사용하게 되면 어떤 케이스에 어떤 속성이 변경됐는지 알아보기 쉬운 장점이 있다.
//@debug 10em + 12em;
//계산식이나 제어문등의 결과를 중간중간 확인하고 싶을 경우가 생기는데 console.log()로 확인한것처럼 sass에서는 debug로 확인할 수 있다.
//@warn "하이" 조건문 사용시에 특정 문구를 출력해 줄 수 있는 기능이다. 경고 문구이기 때문에 컴파일을 중단시키지는 않고 그냥 메세지만 출력해준다
//@error warn와 비슷하지만 좀더 강력하게 에러를 출력한다 문구 출력 + 컴파일 중단

//조건문
//switch case를 지원하지 않는다
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// $type:hi;
// p{
//     @if $type == he {
//         color:blue;
//     }
//     @else if $type == hi{
//         color:white;
//     }
//     @else{
//         color:black;
//     }
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

//반복문

// from 1 to 3
// 1부터 3전까지 | 즉 1,2
// from 1 through 3
// 1부터 3까지 | 즉 1,2,3
// ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// @for $var from 1 through 3 {
//     .item-#{$var}{
//         width: 100px * $var;
//     }
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// @each
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
// @each $var in a,b {    //list가 a,b (2개)라서 두번 돌았다.
//     .#{$var}-icon{
//         background-image: url('./#{$var}.png');
//     }
// }
// .a-icon {
//     background-image: url("./a.png");
// }
  
//   .b-icon {
//     background-image: url("./b.png");
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
//@while
// scss
// $a : 3;
// @while $a > 0 {
//     .box-#{$a}{
//         width: 2px * $a;
//     }
//     $a: $a - 1;   
// }
// css
// .box-3 {
//    width: 6px;
// }
// .box-2 {
//   width: 4px;
// }
// .box-1 {
//   width: 2px;
// }
//ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
//폴더 및 파일의 구조화 부분은 공통적으로 사용되는 파일들과 서비스에서 사용되는 폴더로 구분한다
//common / main / sub
//공통으로 사용되는 파일들에는 css reset , 자주 사용하는 mixin 또는 placeholder 이런 파일들을 라이브러리화 하여서 담게 된다
//변수의 경우는 최종적으로 코드를 리팩토링 하는 과정에서 공통 폴더에 추가를 하는 형태면 좋다
//서비스에서 사용되는 폴더는 네이밍을 css파일과 동일하게 설정을 하고 scss에 import 되는 파일들을 묶어놓았다고 보면 좋다
//main.scss 가 있으면 main 파일에 layout.scss icon.scss 등이 묶여있다
//파일의 구조는 기본적으로 페이지단위 또는 모듈 단위로 구조화
//너무 많은 파일이있으면 복잡할 수도 있다.