前端开发 sass搭建CSS架构

前端开发技术教材销量|html5前端开发薪资怎么样|微信小程序前端开发教程
这次公司项目移动端页面从0开始重构,从搭建css框架到页面的具体重构,利用sass极大地提高了工作效率,以及维护性,代码的规范性,在后续进行的统一全局维护也非常方便。
在设计稿还没输出之前,利用sass搭建了css架构,还根据交互稿以及项目的实际情况,订下了一些规范。
提前看交互稿,构建可复用模块;
提前沟通设计师,整理全局通用的颜色,模块,以及通过设计规范提前做好对复用的地方模块化。
——————— ####笔记
一 开发规范是参考Nec的,也综合了Bootstrap,Amaze UI的分模块思想。以下是这次项目的前期规范:
布局(grid)(.g-):将页面分割为几个大块,通常有头部、主体、主栏、侧栏、尾部等
模块(module)(.m-):一个语义化的可以 重复使用 的较大的 整体
元件(unit)(.u-):一个 不可再分 的较为小巧的个体,通常被重复用于各种模块中,比如按钮、输入框、图标等
功能(function)(.f-):功能样式,为方便一些常用样式的使用,通常这些选择器具有固定样式表现,比如浮动,清除浮动,断行等
扩展(extension)(.e-):在基类模块或者元件的基础上,扩展一些样式,例如边框,不同状态的样式
grid: g-
module: m-
component: u- (图标 u-icon- (用i标签);按钮 u-btn-)
function: f-
extension: e-
注意: 涉及到js的类用j-或者用id。
二 目录结构
搭建目录架构是个人认为烧脑的地方,在只有交互稿的情况下,搭起来也挺烧脑的。
目录架构涉及的模块分离与统一全局的思想,如果前期框架搭得不好,后期跟容易造成代码的冗余,难以维护和复用,要把几个人的代码看起来像一个人写的,规范和架构很重要。
以下我根据项目的前期情况搭建的目录架构,在开发的时候,页面h5开发进行的很顺利,规范也是边开发边沟通订制。
scss/
|
|– bases/
| |– _base.scss # Reset/normalize | |– _common.scss # 涵盖功能样式(f-)
| … # Other
|
|– components/ # units 一个不可再分的较为小巧的个体,通常被重复用于各种模块,按钮、输入框、loading、图标(u-)
| |– _buttons.scss # Buttons
| |– _inputs.scss # input
| … # Other
|
|
|– modules/ # 一个语义化的可以重复使用的较大的整体(m-)
| |– _card.scss # Card
| |– _catalog-list.scss # catalog-list
| … # Other
|
|
|– pages/ # 每个页面独自带有的样式
| |– index.scss # Index
| |– pruducts.scss # Pruduct list
| … # Other
|
|
|– utils/ # 包含了整个项目中使用到的Sass辅助工具(编译后这里不应该输出任何CSS,单纯的只是一些Sass辅助工具,除了一些特别的生成样式的辅助工具,例如生成雪碧图)
| |– _variables.scss # Sass Variables 存放全局变量
| |– _functions.scss # Sass Functions 函数
| |– _mixins.scss # Sass Mixins 混合宏
| |– _placeholders.scss # placeholders 占位符
| |– _sprites.scss # sprites 自动生成雪碧图的工具
| … # Other
|
|
|– common.scss # 每个页面都会引入的共用样式
所有的模块分离之后,最终会输出一个commons.css 以及 每个页面独有的样式,管理起来非常方便。
三 基本构建
1 css
· 每个页面会引进一个公用样式common.css
· 每个页面会独自引进一个属于自己页面的样式表,例如页面名字叫holiday-book.html,那引进的样式表为holiday-book.css,在pages目录里面。
· 所有的 .html文件 都放在 html文件夹 里;
· body基本结构
<body>
<div class=”g-wrapper”>
</div>
</body>
举个例子,根据上面的规范和模块分离,显然如果是要找可复用按钮,就去scss/_butttons.scss 下,引用或者增加全局通用按钮。
例如以上几种通用按钮,在_butttons.scss的代码为:
//默认背景白色,字体颜色为#585c64
.u-btn{
@include prefix(box-sizing, border-box);
@include prefix(border-radius, .04rem);
display: inline-block;
height: .88rem;
text-align: center;
font-size: .32rem;
line-height: .88rem;
color: #585c64;
background-color: #fff;
cursor: pointer;
border: 1px solid $g-bordercolor;
//唯品红
&.e-purple{
color: #fff;
border: none;
background-color: $g-btn-purple;
&:active{
background-color: $g-btn-purple-active;
}
}
//唯品红不可用状态
&.e-disabled {
color: #bfbfbf;
border: none;
background: #e0e0e1;
}
//白色渐变底灰色边红色字体
&.e-white {
color: #ec5042;
border: 1px solid rgba(220,220,220,0.5);
/* background-color: #fbfbfb; */
background: -webkit-linear-gradient(top,#fdfdfd,#f8f8f8);
}
//宽度100%
&.e-full{
width: 100%;
}
}
//对于有边框的,默认黑色边框
.u-btn-border{
@include prefix(box-sizing, border-box);
@include prefix(border-radius, .04rem);
display: inline-block;
padding: 0 .3rem;
height: .72rem;
font-size: .28rem;
text-align: center;
line-height: .72rem;
border: 1px solid #000;
&.e-purple{
border-color: $g-vipcolor;
color: $g-vipcolor;
&:active{
border-color: $g-btnborder-purle-active;
color: $g-btnborder-purle-active;
}
}
&.e-gray{
border-color: $g-btnborder-gray;
color: $g-btnborder-gray;
&:active{
border-color: $g-btnborder-gray-active;
color: $g-btnborder-gray-active;
}
}
&.e-lightgray{
border-color: $g-btnborder-lightgray;
color: $g-btnborder-lightgray;
&:active{
border-color: $g-btnborder-lightgray-active;
color: $g-btnborder-lightgray-active;
}
}
&.e-disabled{
border-color: $g-btnborder-disabled;
color: $g-btnborder-disabled;
}
}
在这里备注本要涉及的地方(因为本人不小心懒了一下~~~):
1 rem 单位的好处,这次全局的单位统一是rem,是为了动态适配各种屏幕;
2 自动生成雪碧图,并把生成的雪碧图代码的单位px自动转换为rem;
3 sass与compass环境的搭建;
4 gulp工具自动刷新浏览器。
5 设计师需要的1px细线以及带圆角的边框快捷技巧 。
web前端流行开发技术|前端开发技术方案模板|前端开发怎么用好现有代码
» 本文来自:前端开发者 » 《前端开发 sass搭建CSS架构》
» 本文链接地址:https://www.rokub.com/5246.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!