内容简介:很多人昨天都没找到我,其实我去......
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搭配学
以上所述就是小编给大家介绍的《从一个小项目快速入门Scss》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 初学者入门 Golang 的学习型项目,go入门项目
- vue入门(一):项目搭建
- 【CuteJavaScript】Angular6入门项目(2.构建项目页面和组件)
- 【CuteJavaScript】Angular6入门项目(1.构建项目和创建路由)
- GraphQL搭配MongoDB入门项目实战
- Kubernetes 入门实践:部署运行 Go 项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。