从一个小项目快速入门Scss

栏目: CSS · 发布时间: 6年前

内容简介:很多人昨天都没找到我,其实我去......

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

先祝各位国庆快乐鸭

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

从一个小项目快速入门Scss

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

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

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

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

预览图是这样子的:

从一个小项目快速入门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
}复制代码

显示效果:

从一个小项目快速入门Scss

一个红色的盒子框架

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

.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%);
}复制代码

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

从一个小项目快速入门Scss

这样是因为。我们使用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处理器是不支持的。会报错

从一个小项目快速入门Scss

接下来绘制一下 盒盖

.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);
}复制代码

从一个小项目快速入门Scss

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

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">
复制代码

这样我们看看效果:

从一个小项目快速入门Scss

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

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

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

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

@if代表 scss中的逻辑判断

这样我们再看看效果

从一个小项目快速入门Scss

这样我们的作品就完成了

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

Sass中文文档

Sass和Scss异同

建议Sass和Scss搭配学


以上所述就是小编给大家介绍的《从一个小项目快速入门Scss》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

京东技术解密

京东技术解密

京东研发体系 / 电子工业出版社 / 2014-11-18 / 65

京东高速的增长、闪电响应的供应链、庞大的团队规模等背后内幕,对于业界一直像谜一样神秘。随着成为中国B2C领导厂商以及在纳斯达克上市,京东越来越需要开放自己,与业界形成更好的交流与融合。《京东技术解密》的面世,就是京东技术团队首次向业界集体亮相。本书用翔实的内容为读者逐一解答——如何用技术支撑网站的综合竞争实力,如何把握技术革新的时间点,如何应对各种棘手问题及压力,如何在网站高速运转的情况下进行系统......一起来看看 《京东技术解密》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具