一、 任务情况：

1. 任务效果

2. 任务架构

二、 具体情况（部分展示）：

1.  abstracts文件夹，提取文件夹，里面可以存放各个文件夹的变量、函数、占位符和混合宏，各个文件夹无需引用该文件夹，只需在宿主sass文件引用即可，所以其他文件夹可以直接调用使用，从而使其他文件的代码更加精炼；

①  感觉需要经常更改的宽高和边距值（但没有落实，还是习惯在组件样式上直接定义）、栅格系统的值等都可以放在变量，方便直接打开进行更改，也可以给函数计算来一次性赋予多个类不同的值；

②  占位符和混合宏都是样式块，占位符则是方便压缩css文件的大小（即可以把多个类的同样样式变为组合选择器的统一样式），混合宏则是方便查看css文件时可以更容易理解，感觉bootstrap的工具样式都可以以这两种声明，如flex布局、显隐、清楚浮动、溢出等多用样式；

混合宏：

占位符

2.   base文件夹，基本设置文件夹，里面可以存放清除默认样式文件、字体文件、颜色文件，甚至动画文件

①  reset，清除默认样式文件，通过全局定义来清除浏览器按钮、表单组件等默认样式，可以用normalize文件代替；

②  typography，字体文件，可以引用特殊字体，也可以定义各个元素的字体属性和样式（感觉我用错了，不应该用类来定义，反而使html元素多应用一种字体类），应该是声明常用字体的占位符或者定义标签元素的默认文字，占位符则给组件等文件夹来引用，即标题字体（h1~h6）、正文字体（分层级）、组件字体（分组件）等；

③ colors，颜色文件，原本不需要的，感觉如果需要增加黑夜模式，或者皮肤等自定义颜色功能，则可以方便一次性改变主要颜色、次要颜色、背景颜色等；

3. components，组件文件夹，可以放置任何可以互不影响、重复使用、只能完成一件事的独立模块，如bootstrap的组件类型；

①   buttons，放置需要交互（点击、悬浮、获取焦点等事件）的小组件，只定义宽高、外观、内容及位置、各种状态，无需定义其位置，由layout布局文件夹定义；

② carousel，轮播图组件，基本都是从bootstrap.css文件直接挪用bootstrap的carousel组件代码，并对相应部分的样式重新定义，如对carousel-caption即轮播图内容进行定义并添加文本子元素等内容，基本对类的名称没有改变，但无法脱离bootstrap的JS文件和Jquery文件的引用，还需添加data-属性来赋予动效；

③ list，列表组组件，基本都是参考bootstrap，对list-group及其子元素list-group-item的样式定义，也可以再增加子元素来增加内容，完成整个列表组的样式定义；

④ modal，模态框组件，也是参考bootstrap，对其的模态框代码直接挪用，再修改其中的内容样式，如背景板、模态框的外观、模态框内容的头部、主体、底部等，并一起都引用各种情况下的模态框外观变化的代码，还是不能脱离bootstrap的JS文件和Jquery文件的引用，还需添加data-属性来赋予弹出效果；

⑤ nav，导航栏组件，也是参考bootstrap，对其navbar-nav导航栏条和nav-item导航栏选项的样式重新定义，由于需要配合下拉菜单，但效果是ios原生选择器即滚筒选择器，所以还是引用iosselect的插件，放在vendors文件夹内；

5. layout，布局文件夹，里面放置页面中的区域布局，如标题栏、导航栏、标签栏、主体、侧边栏、表单等区域样式，还有栅格系统，设置其整体在页面的布局位置及外观，以及其子元素在该区域的布局位置；

 ① 标题栏、导航栏、标签栏（header、navigation、footer），设置整体宽高及背景色，以及浮动在顶部或底部、边距值等在页面的位置；

6. pages，页面特色文件夹，放置各个页面之间的差异和特色，由于首页多个切换页面动画，所以我放在这个文件夹的home文件内，具体如下——3D切换效果；

7. vendors，放置外部插件、框架和库，如果重写应该新建个第 8 个文件夹 vendors-extensions/ 来存放，并使用相同的名字命名，即以上的bootstrap插件的重写都可以放在新建的vendors-extensions/ 内；

① normalize，重置样式文件，里面有更加细分的组件来调整，同时不会全部清除浏览器的特色样式；

下载（https://www.jianshu.com/p/9d7ff89757fd）；

②  iosSelect，ios的原生选择器，类似滚筒选择器，由于只有css文件，所以直接在html文件引用使用

具体用法参考（https://www.cnblogs.com/libin-1/p/6254372.html）

三、 特殊效果

1.  3D切换动画效果，参考（http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502031323.html）

① 教程中是给子元素赋予背面隐藏（backface-visibility: hidden;），给父元素定义旋转动画（ transform: rotateY( 180deg )); , 但是没有实现如教程中的效果，即父元素旋转使子元素旋转来实现旋转切换显示，可能我没有做对布局定义，即position: absolute的原因吧

② 在html文件，把点击触发的checkbox按钮放在header标签的上面，即同级，再隐藏，从而点击label触发checkbox按钮为选中状态时，可以对下面的相应元素的属性变化，即实现动画效果；

四、 任务问题

1.  还是没有熟练地应用sass的语言特性进行压缩代码量（变量、函数、混合宏、占位符等），基本用在栅格系统上，还是需要bootstrap的参考，通过直接引用其css文件的代码来修改，完全重写框架还是太难了，其命名、布局、动画效果还是需要参考的了；

2.  有时候会导致VScode崩溃，幸亏会自动保存，还有由于文件太多需要来回切换查看，还是没有落实到管理清晰的效果；

3. 而且编写地不够简洁，没有足够清晰的注释以及变量声明，可维护性相对还是较低，还是需要整体了解页面样式构造后，把重复的、需要经常更新的数值提取出来，放在abstracts文件夹内来方便维护；