一、 任务情况：
1. 任务效果
2. 任务架构：
@charset "utf-8";
// 每个scss文件都要在首行加上，否则中文会编译出错
/*!
sass/
|
|– abstracts/
| |– _variables.scss # Sass Variables
| |– _mixins.scss # Sass Mixins
| |– _placeholder.scss # Sass Placeholder
|
|– base/
| |– _reset.scss # Reset
| |– _typography.scss # Typography rules
| |– _colors.scss # Colors' type
| |– _animation.scss # Animation
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _list.scss # List-group
| |– _dropdown.scss # Dropdown
| |– _popover.scss # Popover
| |– _forms.scss # Form & input
| |– _cards.scss # Cards
|
|– layout/
| |– _body.scss # Body
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _main.scss # Main
| |– _footer.scss # Footer
| |– _aside.scss # Aside
|
|– vendors/
| |– _normalize.scss # normalize
|
`– main.scss # Main Sass file
*/
二、 具体情况（部分展示）：
1. abstracts文件夹
① variables文件，变量文件，还是跟以前一样，存放栅格系统的变量，而至于边距值，宽高值，没有找到统一的规律，不好声明；
② mixins文件，混合宏文件，新增flex布局的其他布局方式，以及水平居中、垂直居中的代码块，按钮的悬浮状态之类的代码块，基本是可以重复使用的大段代码都可以为混合宏，但感觉还是能够传递参数的比较好用；
@mixin absolute-justify-center {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
@mixin inline-align-center($this-height) {
display: inline-block;
vertical-align: middle;
line-height: $this-height;
}
// 声明不定高行内元素的垂直居中
@mixin absolute-align-center {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
// 声明绝对定位的垂直居中
@mixin btn-hover($bg-color) {
&:hover {
background-color: lighten($bg-color, 20%);
}
}
// 声明按钮的悬浮状态的混合宏
③ placeholder文件，占位符文件，没有新增，感觉占位符适合给一个组件内部重复使用，如果给多个组件即多个文件引用，在css文件就会出现多个组件合并选择器，而不方便浏览，不过熟练后，不用查看css文件，直接查看sass文件和处理，输出css文件为压缩即mini格式，那就可以通过@extend指令来尽可能压缩css文件的大小
2. base文件夹
① reset文件，重置文件，也没有新增，一般需要对浏览器的默认样式，即html标签自带的默认样式需要修改时，才增加reset文件新的代码，不然基本normalize插件已经够用了
② typography文件，字体文件，更正了之前给每个组件都声明字体大小，现通过根据设计图给出的字体大小值，来得出规律，从而通过数列计算和@for函数来一次性声明，只有特殊的字体大小，需要另外声明，如按钮字体、字体图标等，而且感觉不应该用混合宏来声明字体大小，懒得写1~6才用的；
@for $h-numb from 1 to 6 {
h#{$h-numb} {
font-size: 1.9em - (0.2 * $h-numb);
font-weight: 500;
}
}
// 定义h1~h6的文字大小
@mixin fs-($f-numb) {
font-size: 1.9em - (0.2 * $f-numb);
}
// 定义font的1~6等级的文字大小
p {
font-size: 1.3em;
}
// 定义正文的文字大小
$font-info: 1.2em;
// 定义通知信息的文字大小
$font-sm-btn: 1.6em;
// 定义链接按钮的文字大小
$font-lg-btn: 2em;
// 定义底部按钮的文字大小
③ colors文件，颜色文件，也跟字体文件一样，通过根据设计图给出的颜色值，使用频率最高的为主要颜色，第二高为次要颜色，特殊含义的根据含义命名，特殊组件颜色也按组件分类，字体颜色也一样，而白色也声明为明亮颜色，方便如果有黑夜模式或其他皮肤等配色改版，来一次性修改；
// 以下为基本类型颜色
$color-bg: #F0F0F0;
// 背景颜色
$color-primary: #29BDE0;
// 主要颜色
$color-secondary: #FBB435;
// 次要颜色
$color-remove: #F66F6F;
// 取消颜色
$color-light: #FFF;
// 明亮颜色
// 以下为基本文字颜色
$color-title: #9A9A9A;
// 题目文字颜色
$color-text: #787878;
// 正文文字颜色
// 以下为字体图标颜色
$color-iconfont: #E7E7E7;
// 字体图标颜色
$color-btn-primary: #69D1E9;
// 主要按钮颜色
// 以下为弹出框组件颜色
$color-popover-bg: rgba(255, 255, 255, 0.67);
// 弹出框的弹出信息背景颜色
$color-popover-text: #464646;
// 弹出框的弹出信息文字颜色
// 以下为表单组件颜色
$color-label-bg: mix(#FBB435, #F5C97B, 0.5);
// 定义label的名字背景颜色
$color-label-name-text: #565656;
// 定义label的名字文字颜色
$color-label-numb-bg: rgba(26, 153, 183, 0.52);
// 定义label的编号背景颜色
// 以下为列表组件颜色
$color-list-border: rgba(83, 83, 83, 0.2);
// 列表边框颜色
$color-list-title-font: #515151;
// 列表标题文字颜色
$color-list-time-font: #C7C7C7;
// 列表时间文字颜色
$color-list-text-font: #A6A6A6;
// 列表正文文字颜色
// 以下是result页面的底部背景颜色
$color-result-footer-bg: rgba(41, 189, 224, 0.48);
④ animation，动画文件，放置过渡动效以及关键帧动画等，通过混合宏来调用
@mixin slide-align($Y-value) {
transform: translateY($Y-value);
transition: transform 0.2s ease;
}
// 定义垂直滑动的动画效果
@mixin slide-justify($X-value) {
transform: translateX($X-value);
transition: transform 1s ease;
}
// 定义水平滑动的动画效果
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@mixin rotate-360 {
animation: rotate 2s linear infinite;
}
// 定义无穷旋转的动画效果
3. components文件夹
① buttons文件，还是设置了定位和间距值，感觉在布局文件夹设置定位和间距值，再到按钮文件夹设置外观等样式，需要更换文件来查看和处理会有点麻烦，还是都放在组件文件夹里面，而布局文件夹还是定义整体的浮动情况、宽高、背景色等，而命名则是都放在一个区域模块内进行分类；
.nextgame {
margin-top: 1.6em;
&-btn {
@include flex-center;
width: 100%;
height: 6.7em;
background-color: $color-btn-primary;
@include btn-hover($color-btn-primary);
&-text {
font-size: $font-sm-btn;
color: $color-light;
}
}
&-info-text {
margin-bottom: 0;
color: $color-text;
text-align: center;
}
}
// 定义捉鬼游戏模块的入口按钮的样式
② cards文件，卡片组件文件，适合图文结合的文本组件，所以用在result页面的胜利文本展示区，基本根据上图下文的flex布局来定义，参考bootstrap的card组件代码；
③ carousel文件，轮播图或幻灯片组件，还是参考bootstrap组件的代码，修改轮播内容、指示器、控制器的样式即可，尤其轮播动效还是需要bootstrap的JS引用，还是没搞懂如何编写；
④ list文件，列表组件文件，放置重复排列同样样式的列表，还是参考bootstrap文件，修改list-group和list-group-item的样式即可；
⑤ dropdown文件，下拉菜单组件文件，还是参考bootstrap文件，修改dropdown-menu、dropdown-item的样式即可，需要bootstrap的JS引用才能触发，尤其是展开动效为3D旋转动效，且3D变换样式作为html文件的内联式，所以只能通过!important来修改；
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 3;
display: none;
float: left;
min-width: 5em;
padding: 0.5em 0;
margin: 0;
font-size: 1em;
text-align: center;
list-style: none;
background-color: $color-light;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15);
border-radius: 0.5em;
transform: translate3d(0, 4.4em, 0)!important;
}
// 定义下拉菜单的弹出面板的样式
.dropdown-item {
display: block;
width: 100%;
padding: 0.25rem 1.5rem;
clear: both;
@include fs-(2);
font-weight: 400;
color: $color-text;
white-space: nowrap;
}
// 定义下拉菜单的弹出面板的选项样式
⑥ popover，弹出框组件文件，同样参考bootstrap文件，需要bootstrap文件的JS引用才能触发，只是修改popover、popover .arrow、popover-header、popover-body来修改弹出的信息区域样式；
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1;
@include flex-align-center;
padding: 0 7.5%;
width: 100%;
height: 4em;
@extend .container;
background-color: $color-popover-bg;
transform: translate3d(0, 4.4em, 0) !important;
}
// 定义弹出框的弹出信息区域
.popover-body {
@include fs-(3);
color: $color-popover-text;
&::after {
position: absolute;
top: 0.5em;
left: auto;
right: 0.5em;
content: "";
display: inline-block;
width: 2em;
height: 2em;
background: url(../img/play@2x.png) no-repeat;
background-size: cover;
@include rotate-360;
}
}
// 定义弹出框的弹出信息区域的主体内容
⑦ forms文件，放置表单文件，应用于游戏中页面的九宫格区域，参考bootstrap文件的命名，基本表单内所有组件都可以放置在内，尤其是重复使用的symbol，从而定义出一个表单，不过我感觉我用的嵌套比较多，不好查看；
.form-group-ingame {
@include flex-column;
@include flex-align-center;
& .form-check-label {
position: relative;
@include flex-column;
margin-bottom: 3.6em;
width: 6.6em;
height: 6.6em;
background-color: $color-label-bg;
border: 0.3em solid $color-light;
cursor: pointer;
&-name {
@include flex-center;
width: 100%;
height: 3.2em;
@include fs-(2);
color: $color-label-name-text;
}
&-numb {
@include flex-center;
flex: 1;
width: 100%;
@include fs-(4);
color: $color-light;
background-color: $color-label-numb-bg;
}
&:hover {
border-color: $color-secondary;
& + .form-btn-group {
visibility: visible;
@include slide-align(1em);
}
}
} // 定义表单的展示文本及背景颜色
4. layout文件夹
① 主要难在栅格系统，基本参考bootstrap文件，修正了xs的分辨率范围，还是都是设置min-width值来比较好用，不好只设置max-width值；
② 而其他文件，如body、header、main、footer、aside等大区域模块，一般设置宽高、浮动情况、背景等即可，而我还定义了与之相关的外观样式，以及其不知道放在哪个文件的子元素的样式，如header的标题；
③ 而且这次增加页面的后缀来区分不同的样式，其实应该再新增pages文件夹里的各个页面文件，来增加在该页面才有的特殊的样式，主要还是没有找到规律，所以就合并放在一起了
.header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 2;
@include flex-center;
width: 100%;
height: 4.4em;
background-color: $color-primary;
box-shadow: 0 0 0.7em rgba(40, 88, 99, 0.14);
&-result {
@extend .header;
border-bottom: 0.1em solid $color-light;
}
}
// 定义标题栏的宽高和背景颜色
.header-title {
width: 100%;
color: $color-light;
text-align: center;
}
// 定义标题栏的标题宽度
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
&-ingame {
@extend .footer;
@include flex-justify-center;
width: 100%;
height: 9.5em;
background-color: $color-primary;
&-divider {
padding-top: 2.2em;
width: calc(70% + 2.2em);
height: 100%;
border-top: 0.1em solid $color-light;
}
} // 定义ingame页面的底部布局和基本样式
&-result {
@extend .footer;
@include flex-justify-between;
padding: 1em 1.2em;
width: 100%;
background-color: $color-result-footer-bg;
border-top: 0.1em solid $color-light;
} // 定义result页面的底部布局和基本样式
}
// 定义底部的宽和边距值，并固定在底部，并达到水平居中
5. vendors文件夹，放置外部插件
① 这次只是引用normalize插件，但其还是保留比较多的浏览器默认样式，如button的背景色、a的字体颜色等，还是需要reset文件来进一步清除；
② 而且基本上述的参考bootstrap文件的重写文件，都应该设置第 8 个文件夹 vendors-extensions/ 来存放，并使用相同的名字命名；
三、 任务问题
1. 这次游戏中页面的九宫格区域，弹出的按钮组，采用sprite雪碧图
① 而雪碧图就是把多个图标合并在一张图片上，每个小图片都是引用该张图片，但是很看整合在一起的图片的质量，且移动的位置要计算，如是要增删都很麻烦，只适合小图标组来应用，这样可以一起响应来同时显示，而不像头像、展示图等一个一个显示；
快速生成雪碧图（https://www.toptal.com/developers/css/sprite-generator）
② 然后通过设置background-size为cover来缩小到已设置好的按钮尺寸，最后通过设置background-position来把整张图片往左移动到对应的图标来显示
③ 即整张图标图片的轴中心点为左上角，按钮尺寸为剪切蒙版且不动，只是显示下方的图标图片的部分内容，只能往左或往上移动整张图片，把在右边或下边的图标给移动到合适位置来显示出来，即对应图标的左上角与按钮尺寸的左上角重合；
& .form-btn {
width: 1.5em;
height: 1.5em;
background-image: url(../img/btn-sprite@3x.png);
background-size: cover;
&:hover {
opacity: 0.5;
}
}
& .form-btn-1 {
@extend .form-btn;
background-position: 0 0;
}
& .form-btn-2 {
@extend .form-btn;
background-position: -1.7em 0;
}
& .form-btn-3 {
@extend .form-btn;
background-position: -3.15em 0;
}
& .form-btn-4 {
@extend .form-btn;
background-position: -4.85em 0;
} // 定义按钮组的雪碧图
2. 还是离不开bootstrap框架，重要的交互组件如轮播图（幻灯片）、提示框、模态框等，需要响应交互事件的，或者有交互动效的，都没有弄明白如何实现，只能继续需要bootstrap框架的JS引用；
3. 多个页面的规律不好找出，尤其字体、颜色的基本属性，组件中尤其作为symbol存在的按钮、卡片等通用元素，还是比较难提取出相同变量、混合宏，难以简洁代码量；
返回列表
评论