夏天到啦，一起吃西瓜吧🍉

我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

一斤西瓜 5.99，就目前这个价格，咱就是说，属实说，有那么一点点小小的贵啊。

那咱们就浅浅的画饼充饥一下吧。

HTML

<div class="wm">
  <div class="wmStone">
    <div class="wmStone__item"></div>
    <div class="wmStone__item"></div>
    <div class="wmStone__item"></div>
    <div class="wmStone__item"></div>
    <div class="wmStone__item"></div>
    <div class="wmStone__item"></div>
    <div class="wmStone__item"></div>
    <div class="wmStone__item"></div>
    <div class="wmStone__item"></div>
  </div>
</div>

Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

变量 $ (Variables: $)

变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$s : 45vh;

为我们的西瓜设置一个居中的样式。

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff5b56;
}

画一个瓜皮

.wm {
  width: $s;
  height: $s;
  border-radius: 50%;
  border: $s/50 solid transparent;
  border-right-color: #35ca2f;
  border-bottom-color: #35ca2f;
}

是不是有那种感觉了呀

@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译为

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码。@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译为

p {
  color: green;
}

画西瓜籽我们正好需要这种方式。

.wm {
  // ...

  &Stone {
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    right: 0;
    transform: rotate(-45deg);
    transform-origin: 50% 0%;
    z-index: -1;

    &__item {
      width: 3%;
      height: 10%;
      background: #121212;
      border-radius: 100%;
      position: absolute;
    }

    @for $i from 1 through 9 {
      &__item:nth-child(#{$i}) {
        @if($i % 2==0 and $i <=8) {
          top: random(5) + 1%;
          left: $i * 10%;
        }

        @else if($i < 7) {
          top: random(5) + 30%;
          left: $i * 10% + 20%;
        }

        @else {
          @if($i==7) {
            left: 60%;
          }

          @else {
            left: $i*4.5%;
          }

          top : 55%;
        }
      }
    }
  }
}

像吗？似乎像，又不像？

*,
*:after,
*:before {
  box-sizing: border-box;
}

.wm {
  &:after {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    border: $s/20 solid transparent;
    border-right-color: #fff;
    border-bottom-color: #fff;
  }
}

西瓜籽排列太整齐了。需要乱一点点

.wm {
  &Stone {
    @for $i from 1 through 9 {
      &__item:nth-child(#{$i}) {
        
        // ...
        transform: rotate(#{random(35)}deg);
      }
    }
  }
}

嘻嘻～

快来吃西瓜吧

享受美好的夏天

参考代码：codepen.io/Hastalavist…