经过LESS/Sass自定义Bootstrap的式样

时间 2019-11-07

标签经过 sass 自定义 bootstrap 式样栏目 Bootstarp 繁體版

原文原文链接

1、定制Bootstrap

在实际前端UI开发中，对Bootstrap的式样进行自定义是必要的。javascript

定制Boostrap的式样的方法一般有以下几种：css

覆盖原有的bootstrap式样
经过构建器，对bootstrap中的式样变量自定义。
经过bootstrap less深度定制式样。

下面咱们就来分析上面的三种方法各自的优缺点。html

方法1、覆盖原有的bootstrap式样

这里的“覆盖”是CSS层叠式样的覆盖的意思，具体方法是将咱们的my-custom.css文件引用放到bootstrap.css文件的后面，这样咱们定义的样式就会覆盖原有的样式。前端

优势：方便，不会变动原来的工做流程。java

缺点：很明显，会致使式样不一致和臃肿，以及下降了CSS式样的可维护性。node

很显然，这种方法的缺点很是明显，能够在非正式场合如测试环境中使用，可是在正式开发环境中是不该该使用。git

方法2、使用构建器自定义bootstrap的式样变量

使用官网的定制页面 http://v3.bootcss.com/customize/ 能够自定义bootstrap的式样。github

定制好你的变量后点击download按钮就会生成一套属于你的bootstrap框架了。bootstrap

这种方法：sass

优势：简便了你对总体网站式样的更改。

缺点：项目网站的式样一定是不断变动的，这意味着你须要不断的根据你的式样从新构建bootstrap框架，否则就会重走方法一的老路。

方法3、经过bootstrap less深度定制本身的式样

Bootstrap3.0的式样是经过LESS——CSS预处理语言来实现的，固然目前Bootstrap也有了 Bootstrap 从 Less 到 Sass 的源码移植项目而且Boostrap4.0开始官网已经从Less迁移到Sass了，所以仍是建议直接入手Sass。CSS预处理语言LESS/SCSS，写法相似CSS可是相比于CSS，提供了变量、函数、运算和选择器嵌套等语言特性。经过编译咱们的LESS/SCSS文件，就能够动态生成CSS式样。

优势：定制的变化与原有库代码很好的隔离，却又不失可维护性。而且经过Grunt等JavaScript构建工具还能够动态编译LESS/SCSS文件。

缺点：须要必定的学习成本。

2、Bootstrap Less

关于Booststrp less的介绍参考Bootstrap less官方中文文档。

2.1 bootstrap less 目录结构

在Bootstrap官网Github项目上，经过查看Less文件夹bootstrap/less 能够发现一系列的.less后缀结尾的文件。

首先，找到4个关键的文件，分别是：

其中，bootstrap.less是bootstrap的主文件，包括全部的.less组件式样，经过LESS编译该文件后，就生成咱们本身的bootstrap.css文件。

variable.less是变量定义文件，上述官网的定制页面 http://v3.bootcss.com/customize/中修改的其实就是这里定义的变量内容。

utilities.less是实用工具文件，包括通用的清除浮动.clearfix、左浮动和右浮动等式样。

最后，即是mixins 文件夹了，mixins文件中定义了各类组件的中式样的"基类"或者是通用的规则定义，bootstrap/less/mixins/labels.less 文件中定义的label-variant(@color)，就被上一级目录的同名文件中的bootstrap/less/labels.less所引用。

2.2 如何编译和使用

安装和使用LESS环境很简单，参考文档http://www.bootcss.com/p/lesscss/#guide 。

不过，在正式的开发环境中，一般的作法是结合Grunt工具进行自动构建。

http://www.w3cplus.com/preprocessor/nodejs-and-grunt-compile-sass-to-css.html

3、Bootstrap Sass

3.1 Bootstrap Sass

Bootstrap2和Bootstrap3都是用Less来编译的CSS，可是从Bootstrap4开始，官方也已经从Lass迁移到Sass了。Sass的出现要比LESS早，虽然LESS发展迅猛且上手迅速，可是Sass也在快速跟进，而且由于相比于LESS，Sass已是一个成熟的框架，提供了更多的功能以及更全面又规范的文档。所以，虽然Sass的学习曲线比LESS更陡一些，仍是建议使用Sass做为CSS的预编译语言。

关于Sass的介绍，参考Sass和Less-CSS预处理语言

3.2 Bootstrap 3 Sass目录结构

经过查看Github上的Bootstrap 从 Less 到 Sass 的源码移植项目的目录，Boostrap 3 Sass的相关式样文件放置在bootstrap-sass/assets/ 目录下：

assets
 ├fonts/bootstrap/              ==> glyphicons
 ├images/                       ==> image folder   
 ├javascripts/                  ==> Javascript folder
 └stylesheets/                  ==> .scss files folder

其中，关于bootstrap的式样文件.scss就存放在bootstrap-sass/assets/stylesheets/ 目录下。

接下来的结构就和Bootstrap Less一致了，4个关键的文件，分别是：

顾名思义，参考2.1，这里就不在冗述了。

3.3 如何编译和使用