SASS를 사용하여 화려한 배경을 만듭니다.
무지개의 7색이라면 이런 느낌이 듭니다.

줄무늬


국경

코드

줄무늬

stripe.sass

@function stripe($deg, $stripe-width)
  $stripe: ''
  @each $color in $colors
    $i: index($colors, $color)
    $stripe: $stripe + nth($colors, $i) + ' ' + (($i - 1) * $stripe-width) + 'px,'
    $stripe: $stripe + nth($colors, $i) + ' ' + (($i - 1) * $stripe-width + $stripe-width) + 'px'
    @if $i != length($colors)
      $stripe: $stripe + ','

  @return repeating-linear-gradient(unquote($deg + 'deg'), unquote($stripe))

@mixin stripe($deg, $width)
  background-image: stripe($deg, $width)

국경

border.sass

@function border($deg, $border-width, $base-color: transparent, $base-width: $border-width)
  $border: ''
  @each $color in $colors
    $i: index($colors, $color)
    $j: $i - 1
    $color-start: $j * $border-width + $j * $base-width
    $color-end: $color-start + $border-width
    $base-end: $color-end + $base-width
    $border: $border + nth($colors, $i) + ' ' + $color-start + 'px,'
    $border: $border + nth($colors, $i) + ' ' + $color-end + 'px,'
    $border: $border + $base-color + ' ' + $color-end + 'px,'
    $border: $border + $base-color + ' ' + $base-end + 'px'
    @if $i != (length($colors))
      $border: $border + ','

  @return repeating-linear-gradient(unquote($deg + 'deg'), unquote($border))

@mixin border($args...)
  background: border($args...)

사용법

1. 색 지정

사용할 색상을 목록 형식으로 지정합니다.

colors.sass

$colors: 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple'

2. 각도와 두께 지정

@include 에서 각도( deg )와 두께( px )를 지정합니다.
모두 단위 없이 입력합니다.

main.sass

.stripe
  @include stripe(90, 100)

.border
  @include border(90, 100)

border 에 대해서는, 여백 부분의 색과 폭을 지정할 수도 있습니다.
초기치는 색이 transparent , 폭은 색의 부분의 폭과 같습니다.

main.sass

.border
  @include border(90, 100, white, 50)

3. 요소에 클래스 부여

배경을 적용하려는 요소에 클래스를 적용합니다.

page1.html

<section class="stripe">
...
</section>

page2.html

<section class="border">
...
</section>

실용편

실제의 디자인으로 무지개의 7색을 사용하는 것은 그렇게 없다고 생각하므로, 몇개의 실용예를 만들어 보고 싶습니다.

$colors: #888, #999, #667766, #aaa, #99aa99

.stripe
  @include stripe(45, 20)

$colors: 'pink', 'lavenderblush' , 'ivory', mistyrose, 'whitesmoke'

.stripe
  @include stripe(100, 80)

$colors: 'orange', 'skyblue' , 'tomato', mistyrose
.border
  @include border(-40, 150, $base-width: 50)

$colors: darken(midnightblue, 7%), darken(midnightblue, 10%), darken(midnightblue, 12%)

.border
  @include border(90, 10, darken(midnightblue, 20%), 1)

오시마

여러분 꼭 사용해주세요! 보다는, Sass는 이런 일도 할 수 있어, 라고 하는 것을 꼭 알고 싶다고 생각합니다.@function , @each , @if , @mixin/@include , darken() , 배열과 nth() , index()
최근 사이트 제작은 여러 어른의 사정으로 시간을 들일 수 없게 되었습니다.
CSS의 프레임워크를 사용하거나, Wordpress의 테마를 조금 만지면서 끝이라는 것도 많을까 생각합니다.
이러한 도구는 매우 훌륭하기 때문에 점점 더 효율적으로 작업해야한다고 생각합니다.
그러나 모처럼 CSS로 여러가지 것을 표현할 수 있기 때문에, 좀더 여러가지 알고 스스로 여러가지 할 수 있으면 보다 즐거워지는 것이 아닐까 생각합니다.

CSS와 Sass를 더 즐기세요!

참고 사이트

Sass 공식
Unsplash 사진은 모두 이쪽의 것을 사용시키고 받고 있습니다.