解读Bootstrap v4 sass设计


Posted in Javascript onMay 29, 2016

首先关于bootstrap从v3的less转到v4的sass的十万个为什么,这里暂且不表(计划会另起一篇文章对比less,sass,postcss)。

一起走进bootstrap v4 sass

1、bootstrap的sass文件都放在scss目录,为什么名字是scss而不是sass呢?主要涉及到sass与scss两种语法的区别,scss语法更接近css,所以更受大家喜爱,使用更广泛。具体可参考 sass 语法

2、scss文件分为两种,一种是以下划线开头的如 _variables.scss ,一种是没有下划线的如 bootstrap.scss ,这两个的区别是前者表示被导入的文件,默认不会编译成对应的css文件,而后者会编译对应的css文件。所以如果有两个文件 _a.scss , b.scss 默认编译结果是只有 b.css 文件,如果b要使用 _a.scss 中的样式,那么可以使用导入功能 @import a (导入的文件是可以省略下划线及文件后缀名的)。具体也可参考 sass 语法

3、如果编译整个scss目录,我们可以得到四个css文件,分为是 bootstrap.css , bootstrap-flex.css , bootstrap-reboot.css , bootstrap-grid.css ,这四个css样式分别由下面的四个scss文件生成。

解读Bootstrap v4 sass设计

bootstrap-reboot为重置样式,bootstrap-grid为网格样式,这两个可以看作赠送的单独样式,如果某些场景你不想使用整个bootstrap样式,但是又想用它的重置或网格系统,那么可以直接使用这两个。

bootstrap和bootstrap-flex的区别是前者使用传统的布局方式,后者用的是的是flex方式,所以可以根据自己的实际情况选择使用。从上面图上可以看到 bootstrap-flex.scss 在导入 bootstrap.scss 之前,重置了 $enable-flex: true

4、打开 bootstrap.scss ,可以看到里面导入了各种文件,整体分为6大块,分别为:

variable & mixin:引入变量及mixin文件,其中 _mixin.scss 文件中导入了mixin目录中的所有文件
reset:引入normalize 及 print文件
core:引入基础样式文件,如grid,form,table,button等
component:引入组件文件,如nav,card,breadcrumb等
component js:引入需要js控制的组件文件,如modal,tooltips等
utility:引入一些全站的class文件,里面有些通用的class,如clearfix,center-block等

如何使用并修改bootstrap v4的样式

如果你对sass熟悉的话,可以直接使用其sass;当然如果你不熟悉sass的话,可以到目录dist/css中找到编译好的 bootstrap.css 。

下面我们先说下直接使用css的:

在html中引入 <link href="bootstrap.css" rel="stylesheet" />
如需修改bootstrap样式,可另建一个样式表如 style.css ,覆盖bootstrap样式。不建议直接修改打开 bootstrap.css 样式表修改既然是用sass写的,那当然我们可以选择更高逼格的sass了,同样sass也有两种修改办法,一种是非破坏性的,一种是破坏性的。

对于破坏性的,那就是哪里不合意就修改哪里了,没什么好招。这里说下对于非破坏性的使用修改,我们可以采用如下方法:

把bootstrap的所有scss文件放在bootstrap目录

scss
bootstrap 目录 (原先bootstrap中scss目录所有文件)
bootstrap.scss
...
mixin目录
...
_custom-variables.scss (自定义的变量,或覆盖bootstrap的变量)
_custom-mixin.scss(自定义的mixin)
style.scss

style.scss 代码如下:

@charset "UTF-8";
// 导入文件
@import "custom-variables";
@import "custom-mixin";
@import "bootstrap/bootstrap";

当然如果有代码洁癖的,那对于不用的样式总是想砍掉的,于是重新拿起 bootstrap.scss 审视,把那些不需要的样式,直接去掉import不就好了吗。如果考虑到以后升级什么的,那还是建立个新文件,想要什么就自己按照 bootstrap.scss 中的方法引入就可以了。对于组件样式,需要就引入,不需要就不引入,但是一定要注意core与utility的样式,因为说不定你的组件中就用了这些基础的样式

如何改进bootstrap v4的sass设计

从个人实战的经验角度出发,觉得bootstrap v4有如下几点缺陷:(仅为个人观点)

可以进一步进行目录规划,如把所有的组件文件都放在component目录,utility文件放在utility目录,那样看起来更有组织性,现在有点零散,看上去有点乱
没有 % 设计,个人觉得 % 的设计是一个进步,对于样式的组合申明非常有效,尤其是一些简短的兼容代码什么的。

可提供一个scss文件,整合了variables和mixin的功能,那样就可以方便新起样式文件,直接导入这个整合的文件,variables和mixin随便用组件的变量申明,可以放在各自的组件scss中,因为只有组件会用,而不是统一放在variables文件,这样显得variables文件比较臃肿mixin设计有点太多,连size都有一个mixin文件,感觉有点过。

Javascript 相关文章推荐
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
JavaScript定时器设置、使用与倒计时案例详解
Jul 08 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
js实现简单音乐播放器
Jun 30 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 #Javascript
深入理解js数组的sort排序
May 28 #Javascript
深入理解js函数的作用域与this指向
May 28 #Javascript
js和C# 时间日期格式转换的简单实例
May 28 #Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 #Javascript
深入理解JS函数的参数(arguments)的使用
May 28 #Javascript
深入理解js中this的用法
May 28 #Javascript
You might like
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
js的对象与函数详解
2019/01/21 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
Python连接phoenix的方法示例
2017/09/29 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
绿色环保标语
2014/06/12 职场文书
员工培训协议书
2014/09/15 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
学校远程教育工作总结
2015/08/11 职场文书
python基础之停用词过滤详解
2021/04/21 Python
为Java项目添加Redis缓存的方法
2021/05/18 Redis
MySQL笔记 —SQL运算符
2022/01/18 MySQL