LHJ

I'm a FE developer.

1. sass basic - 총정리

03 Nov 2020 » sass

1. sass basic - 총정리

핵심내용

  1. _ 언더스코어로 시작하는 파일은 컴파일이 되지 않는다.
  2. media query는 항상 기본 정의 css 밑에 위치해야된다.
  3. mixin @content 기능 사용

scss

// _variables.scss
$color-white: #fff;
$color-black: #000;
$color-red: #f00;

$border-color: $color-red;

// _mixin.scss
@mixin width-height-padding($width, $height, $padding) {
  width: $width;
  height: $height;
  padding: $padding;
}
@mixin pos-abs-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@mixin pos-abs-center-horizontal() {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@mixin pos-abs-center-vertical() {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@mixin mq($screen-width) {
  @if ($screen-width == "phone") {
    @media screen and (min-width: 1201px) {
      @content;
    }
  }
  @else if ($screen-width == "tablet-land") {
    @media screen and (min-height: 601px) and (max-height: 899px) {
      @content;
    }
  }
  @else if ($screen-width == "desktop-big") {
    @media screen and (max-width:600px) {
      @content;
    }
  }
  @else {
  
  }
}

// _common.scss
body {
  margin: 0;
}

@import "variables";
@import "mixins";
@import "base";

.box {
  @include pos-abs-center();
  border: 6px solid $border-color;
  &, &-inner {
    border: 3px solid $color-black;
  }
  &-inner {
    @include pos-abs-center-horizontal();
    @include width-height-padding(initial, 400px, 20px);
    background-color: #ccc;
    border: 3px solid $border-color;
    &-title {
      font-size: 20px;
      color: $color-white;
      background-color: rgba($color-black, .5);
    }
  }
  &-example {
    @include pos-abs-center-vertical();
  }

  @include mq("phone") {
    border: none;
    &-inner {
      color: #000;
    }
  }
  @include mq("tablet-land") {
    border: 2px solid $border-color;
    &-inner {
      font-size: 14px;
      color: #000;
    }
  }
  @include mq("desktop-big") {
    border: 10px solid $border-color;
  }
}

css

body {
  margin: 0;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 6px solid #f00;
}
.box, .box-inner {
  border: 3px solid #000;
}
.box-inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: initial;
  height: 400px;
  padding: 20px;
  background-color: #ccc;
  border: 3px solid #f00;
}
.box-inner-title {
  font-size: 20px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}
.box-example {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (min-width: 1201px) {
  .box {
    border: none;
  }
  .box-inner {
    color: #000;
  }
}
@media screen and (min-height: 601px) and (max-height: 899px) {
  .box {
    border: 2px solid #f00;
  }
  .box-inner {
    font-size: 14px;
    color: #000;
  }
}
@media screen and (max-width: 600px) {
  .box {
    border: 10px solid #f00;
  }
}

Related Posts