SCSS Custom Variables Function & Loop

텍스트에 그림자 주는 CSS Property

span {

  text-shadow: 1px 1px 0px blue);

}

offset-x / offset-y / blur-radius / color

 

 

 

 

초기형

HTML

    <div class="test">

      <p>텍스트에 그림자를 주는 스타일 속성이 이번 실험 대상</p>

    </div>

 

SCSS(mixin.scss)

@mixin longShadow($color) {

  text-shadow: 1px 1px 0px $color, 2px 2px 0px $color, 3px 3px 0px $color,

    4px 4px 0px $color, 5px 5px 0px $color;

}

 

SCSS

@import "mixins";

.test {

  p {

    @include longShadow(blue);

  }

}

 

ON BROWSER

 

 

 

 

 

Loop 적용

SCSS(_mixin.scss)

@mixin longShadow($color) {

  $shadow: "";

  @for $i from 1 to 10 {

    $shadow: $shadow + $i + "px " + $i + "px 0px " + $color + ", ";

  }

  $shadow: $shadow + 10 + "px " + 10 + "px 0px " + $color;

  $shadow: unquote($shadow); // 따옴표 제거

  text-shadow: $shadow;

}

 

ON BROWSER

 

 

 

 

 

매개변수 추가

SCSS(_mixin.scss)

@mixin longShadow($color, $limit) {

  $shadow: "";

  @for $i from 1 to $limit {

    $shadow: $shadow + $i + "px " + $i + "px 0px " + $color + ", ";

  }

  $shadow: $shadow + $limit + "px " + $limit + "px 0px " + $color;

  $shadow: unquote($shadow);

  text-shadow: $shadow;

}

 

SCSS

@import "mixins";

.test {

  p {

    display: inline-block;

    @include longShadow(blue, 20);

  }

}

 

ON BROWSER