SCSS 탐방기

/*주석*/
//주석

.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

/*선택자 중첩기능*/
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

/*중첩 안에서 &는 상위(부모)선택자 참조*/
.btn {/*부모선택자*/
  position: absolute;
  &.active {/*부모선택자인 .btn을 참조 치환*/
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

/*@at-root : 특정 변수 사용해야되는데 중첩 밖에 생성해야 할 때.*/
.list {
  $w: 100px;
  $h: 50px;
  li {
    width: $w;
    height: $h;
  }
  @at-root .box {
    width: $w;
    height: $h;
  }
}

/*중첩된 속성은 한꺼번에 처리할 수 있다.*/
.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

/*변수 앞에 $붙이기. 블록 밖에서 전역선언하면 마음대로 쓸 수 있음.
선언된 블록 안에서만 유효범위 가짐. 변수 재할당도 가능.*/
$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
    $color: #333333 !global; /*블록 안 변수도 global 선언하면 전역으로 설정.*/
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}
/*변수 선언한 box 밖에서 color 호출하면 에러*/
.box2 {
  background: $color;
}

/*!default 플래그를 쓰면 기존에 할당되어있던 값을 사용함.*/
$color-primary: red; /*먼저 선언되었기 때문에 선할당 된 것임.*/

.box {
  $color-primary: blue !default; /*기존값이 있으면 그걸 쓸게..*/
  background: $color-primary;
}

/* {}중괄호 블록+샵 이용하면 변수값 넣을 수 있음.*/
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

/*@import : 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합*/
@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

/*or 여러 파일 가져오기 : 파일명 사이에 세미콜론 붙이기*/

/*연산작업 가능*/

/* +: 더하기
 - : 빼기
 * : 곱하기 (하나 이상의 값이 반드시 숫자)
 / : 나누기 (오른쪽 값이 반드시 숫자)
 % : 나머지 연산자*/
 
 /* == : 동등
  != : 부등
   < : 대소 ~보다 작은
  > : 대소 ~보다 큰
   <= : 대소동등 ~보다 작거나 같은
    >= : 대소동등 ~보다 크거나 같은*/


/* 논리연산자 
    and:그리고 / or 또는 / not 부정 */
    
$width: 90px;
div {
  @if not ($width > 100px) {
    height: 300px;
  }
}

/* 숫자 : 상대적 단위 연산 */
/* width: 50% - 20px;  // 단위 모순 에러(Incompatible units error) */
/* width: calc(50% - 20px);  // 연산 가능 */

/*문자 연산
+로 문자연산 가능. 따옴표 같이 씀.
색상 연산 가능.*/
div::after {
  content: "Hello " + World;
  flex-flow: row + "-reverse" + " " + wrap
}

$color: rgba(10, 20, 30, .5);
div {
  color: opacify($color, .3);  // 30% 더 불투명하게 / 0.5 + 0.3
  background-color: transparentize($color, .2);  // 20% 더 투명하게 / 0.5 - 0.2
}

/*@Mixin 재활용+@include 포함*/
/* mixin 설정 */
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

@mixin large-text {
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}

/*include로 포함*/
h1 {
  @include large-text;
}
div {
  @include large-text;
}

/*인수
함수처럼 인수를 가질 수 있음.*/
@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

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

/*@include시 별도의 인수전달 안되면 기본값 사용.*/