解读bootstrap v4 sass设计

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

其次本篇文章主要围绕下面几个目标展开:

  • 了解bootstrap 4整个sass的设计
  • 如何使用并修改bootstrap v4的样式
  • 如何改进bootstrap的sass设计

最后不深入具体代码的实现细节,只从整体架构上分析

一起走进bootstrap v4 sass

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

2、scss文件分为两种,一种是以下划线开头的如_variables.scss,一种是没有下划线的如bootstrap.scss,这两个的区别是前者表示被导入的文件,默认不会编译成对应的css文件,而后者会编译对应的css文件。所以如果有两个文件_a.scssb.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-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文件,感觉有点过

对于以上观点,在我个人的sass基础库sandal中都有体现,对于想看下具体如何使用sandal实战的同学,可以移步sheral,她是基于sandal的一个移动端的ui库,感兴趣的可以看看。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏为数不多的Android技巧

mac下自动切换输入法

长久以来,输入法一直是困扰mac用户的一个问题;不过随着国内厂商的跟进,这种状况得到了极大的改善。不用自己去折腾什么鼠须管了,狼厂和企鹅都做的不错。

1881
来自专栏Jerry的SAP技术分享

小技巧:如何突破某些网站只能登陆后才能进行文字拷贝的限制

我写公众号文章时,经常需要从一些网站的文章上查阅一些资料。比如我想把这个网页上的一个标题“SAP Fiori 2.0用户体验设计概念获红点大奖”进行拷贝。

1043
来自专栏数据魔术师

数据技术|爬虫一下,百度付费文档轻松得,不用花钱,不用花钱,不用花钱!!!

一.问题介绍 大家都应该有过从百度文库下载东西的经历,对于下载需要下载券的文章,我们可以办理文库VIP(土豪的选择): ? 有的人也会在某宝购买一定的下载券,然...

10.9K8
来自专栏君赏技术博客

团队自用的iOS CSV多语言工具今天终于发布1.0.0版本

image-20180727105818718 一般第一个为基础语言包不需要处理

1534
来自专栏PHP实战技术

ThinkPHP3.2.3集成微信分享JS-SDK实践

在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片

2828
来自专栏三流程序员的挣扎

Flutter 学习记1 - Mac 下的安装配置

网上搜到一篇文章安装cocoapods遇到error: RPC failed; curl 56 SSLRead() return error -36问题,不知道...

4603
来自专栏PHP在线

高并发系统中的常见问题

本文一共分析了三个案例,分别介绍并发系统中的共享资源并发访问、计算型密集型任务缓存访问 、单一热点资源峰值流量问题和解决方案。 Q1:订票系统,某车次只有一张火...

3259
来自专栏java一日一条

一个简单粗暴的前后端分离方案

刚刚参加完一个项目,背景:后端是用java,后端服务已经开发的差不多了,现在要通过web的方式对外提供服务,也就是B/S架构。后端专注做业务逻辑,不想...

1091
来自专栏james大数据架构

Eclipse快捷键大全

一、实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制)、CTRL+X(剪切)、CTRL+Z(撤销)、CTRL+F(查找)、CTRL+H(搜索文件或字符串)...

18210
来自专栏企鹅号快讯

雅虎前端优化的35条军规

问题:我怎么才能收到你们公众号平台的推送文章呢? 内容部分 1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各...

2985

扫码关注云+社区