从一个小项目快速入门Scss

TIps: 本文源码已托管至码云(Gitee) 链接戳这里

先祝各位国庆快乐鸭

很多人昨天都没找到我，其实我去......

面价格不贵，50一碗可以加个鸡蛋加根肠。加个微信就算了哈哈哈哈

向国庆期间还看掘金学习的同行们致敬

话不多说，我们来步入正题

今天我们来用一个veryveryvery simple的小项目来了解一下scss，这个非常火的技术

预览图是这样子的：

一大堆不同缎带和盒子颜色的礼物盒。然后用Scss 随机填充颜色和随机坐标

Scss的概念

首先，我们先了解下，Scss是什么东西

官方是这么解释的：

世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

（此处链接中文文档）

他有以下特点：

兼容CSS，特性丰富，成熟，行业认可，社区庞大，框架......

个人理解其实就是让css的编写也拥有计算能力和逻辑代码。方便更好地去管理css的代码和编辑

2. HTML代码

首先，我们先搭建一下html代码

<div class="present"> //外部盒子
  <div class="cap"></div> //盒子盖
  <div class="vribbon"></div> //纵向缎带
  <div class="hribbon"></div> //横向缎带
</div>复制代码

层级很简单

3. 搭建基础CSS框架

在这里，我们使用flex布局进行编写。因为稍后会有很多的盒子排列在同一行内。并且要保持换行

* {
  html, body {
    width: 100%;
    height: 100%;
    background-color: #222; //背景颜色设置为黑色
    margin: 0;
    display: flex; //flex布局
    flex-wrap: wrap; //让弹性盒元素在必要的时候换行
  }
}复制代码

然后我们设置外部盒子主体的css样式。这里我们选择抽出为一个方法。因为要形成不同颜色，不同变换的盒子。必须要动态参数

@mixin present($size:100px,$bodyColor: #ff5151,$ribbonColor: #fff,$rotateDeg: 0deg) {
  width: $size; //$代表声明变量 你可以声明局部变量也可声明全局变量
  height: $size;
  position: relative;
  background-color: $bodyColor;
  box-shadow: 0px 0px 20px rgba(black, 0.5);
  transform: rotate($rotateDeg);
  margin: 10px;
  .vribbon, .hribbon {
    background-color: $ribbonColor;
  }
  .cap {
    background-color: $bodyColor;
  }
}复制代码

@mixin代表声明一个方法。你可以在编写完@mixin方法后，在你想调用的元素css内调用它。他就会编译后插入到里面

也可以传入一个变量。然后可以对变量设置初始值。如

@mixin present($size:100px,$bodyColor: #ff5151,$ribbonColor: #fff,$rotateDeg: 0deg) {复制代码

并且Scss支持根据HTML层级进行层级嵌套。这样无论是写起来还是看起来条理更清楚

示例调用无参 @include代表使用一个方法：

.present {
  @include present()
}复制代码

示例调用有参：

.present2 {
  @include present(120px, #2853ff, #ffd428, 40deg)
}复制代码

无参编译后：

.present {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: #ff5151;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
  transform: rotate(0deg);
  margin: 10px
}

.present .hribbon, .present .vribbon {
  background-color: #fff
}

.present .cap {
  background-color: #ff5151
}复制代码

有参编译后：

.present2 {
  width: 120px;
  height: 120px;
  position: relative;
  background-color: #2853ff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
  transform: rotate(40deg);
  margin: 10px
}

.present2 .hribbon, .present2 .vribbon {
  background-color: #ffd428
}

.present2 .cap {
  background-color: #2853ff
}复制代码

显示效果：

一个红色的盒子框架

接下来我们编写横纵向的缎带。刚才只是给缎带设置了颜色

.vribbon { //纵向缎带
  width: 15%; 
  height: 100%;
  position: absolute;
  left: 50%; //绝对定位居左50%
  top: 0;
  transform: translateX(-50%);
}

.hribbon { //横向缎带
  width: 100%;
  height: 15%;
  position: absolute;
  left: 0;
  top: 50%; //绝对定位居顶部50%
  transform: translateY(-50%);
}复制代码

这里使用了一个小技巧。当你尝试使用定位进行元素居中时，可能会造成这种情况

这样是因为。我们使用top:50%后，元素的上边框会对齐父元素的横轴线。而不是元素的横轴线对齐父元素横轴线

这样我们可以使用 transform: translateY(-50%); 进行矫正。让元素上移自身高度的50%

left :50% 同理用translateX属性就行

我们给缎带加上阴影后，看一看效果

.vribbon, .hribbon {
  box-shadow: 0 0 20px rgba(black, 0.5)
}复制代码

提示：在sass/scss处理器中。颜色可以使用预定义的英文名(如black，white，green)。但是普通CSS处理器是不支持的。会报错

接下来绘制一下盒盖

.cap {
  height: 15%;
  width: calc(100% + 10px); //让盒盖的宽度 两边都比盒子宽5px
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-5px); //因为他会左轴对齐，所以我们左移5px
  box-shadow: 0 0 20px rgba(black, 0.5);
}复制代码

这样一个完整的盒子就绘制完毕了

4. 进行逻辑编写

首先，我们先定义一组颜色变量。在scss中，$代表声明变量。后面是他的值

$colorRed: #f24;
$colorWhite: #fff;
$colorBlue: #3364f7;
$colorYellow: #ffd221;
$colorPurple: #c747ff;
$colors: ($colorRed,$colorWhite,$colorBlue,$colorYellow,$colorPurple);复制代码

在这里面，$colors 中的（）代表是一个集合。里面是一个个的变量名。

接下来，我们使用循环进行随机指定盒子的大小，缎带颜色，盒子颜色

在scss中，循环可以使用@for 其语法使用是如下：

@for $i from 1 through 50 复制代码

其中 $i 代表是变量。其数值跟着每次循环+1 你可以在循环中使用这个变量。from 后面的数值是初始值。through后面的是最大值。@for 只允许使用整数定义初始值和最大值

我们在for循环的开头，指定一组初始化变量

$size: random(50)+50; //盒子大小
$rotateDeg: random(20)-10; //旋转角度
$bodyColor: nth($colors, random(5)); //盒子本体颜色
$ribbonColor: nth($colors, random(5)); //缎带颜色复制代码

其中，random代表生成随机数。参数是最大值。如果有参从0开始

nth代表选中一个集合内的指定元素，按照下标获取。所以我们用random随机生成0-5的坐标

接下来，我们调用样式：

.present#{$i} {
  @include present(#{$size}px, $bodyColor, $ribbonColor,#{$rotateDeg}deg)
}复制代码

#{}代表我可以在{}内拼接变量名。编译后会插入到里面

接着准备50个盒子代码，每个盒子的框架类名都要按照数字顺序排列。没有那么多准备几个都可以

<div class="present1">
  <div class="cap"></div>
  <div class="vribbon"></div>
  <div class="hribbon"></div>
</div>
<div class="present2">
  <div class="cap"></div>
  <div class="vribbon"></div>
  <div class="hribbon"></div>
</div>
......
<div class="present50">
  <div class="cap"></div>
  <div class="vribbon"></div>
  <div class="hribbon"></div
</div>复制代码

当然，我用的是Vue。可以进行v-for循环

<div :class="'present'+i" v-for="i in 50">
复制代码

这样我们看看效果：

emmm......感觉好丑啊。和我们的预想不大一样

其实我们可以看到有些盒子的颜色和缎带颜色重合了。导致看起来非常丑

我们可以在@for循环内加一个判断。如果生成的缎带颜色和盒子颜色一样，那我们就重新生成缎带颜色

@if ($ribbonColor==$bodyColor) {
  $ribbonColor: nth($colors, random(5));
}
.present#{$i} {
  @include present(#{$size}px, $bodyColor, $ribbonColor, #{$rotateDeg}deg)
}复制代码

@if代表 scss中的逻辑判断

这样我们再看看效果

这样我们的作品就完成了

欢迎各位小哥哥小姐姐收藏，关注，点赞哦。祝国庆愉快

Sass中文文档

Sass和Scss异同

建议Sass和Scss搭配学