Mac系统使用VS Code编译Bootstrap 4
环境:
macOS 10.13.6
node.js 8.11.3
sass 1.10.3
bootstrap 4.1.3
vs code 1.25.1
Bootstrap3为我们提供了在线编译工具,可以方便的调整变量,然后在线编译得到我们想要的CSS文件。Bootstrap 4 不知出于什么考虑,官网一直没有提供类似的在线工具,完成自定义后必须自己解决编译问题。Bootstrap 3 使用LESS,Bootstrap 4已改为使用SASS,所以首先解决SASS编译问题。SASS编译与VS Code无关,需要在Mac系统中安装SASS编译环境。
1. 安装node.js
从node.js官网下载for macOS安装包,安装node.js会同时安装npm包管理工具。
安装完成后,可以使用终端命令:
node -v
查看node.js是否安装成功。
sudo npm install npm@latest -g
更新npm版本。
2. 安装SASS编译工具
微软官方文档使用node-sass,终端命令:
sudo npm install -g node-sass less
但我始终没有尝试成功,无论是切换至root帐号还是使用国内镜像安装,都失败了,搭梯子也没用。要么是permission denied,要么是缺少python2环境,总之问题一大堆。
能够编译SASS的工具很多,换一个试试:
sudo npm install -g sass
这次很顺利,一次搞定。下面测试一下SASS是否能够正确编译。
新建一个空文件夹同时创建一个style.scss文件,输入测试代码:
$padding: 6px;nav {ul {margin: 0;padding: $padding;list-style: none;}li { display: inline-block; }a {display: block;padding: $padding 12px;text-decoration: none;} }
使用终端命令编译测试文件:
sass source/stylesheets/style.scss build/stylesheets/style.css
编辑成功后会得到我们预期的CSS文件:
nav ul {margin: 0;padding: 6px;list-style: none; } nav li {display: inline-block; } nav a {display: block;padding: 6px 12px;text-decoration: none; }/*# sourceMappingURL=styles.css.map */
SASS同时还为我们生成了map文件:
SASS编译环境已安装完成,VS Code就可以调用系统命令对SASS进行编译了。
3. 使用VS Code 编译 Bootstrap 4
1) Bootstrap4源码结构
简单分析Bootstrap4源码,其中SCSS文件夹包含了所有样式文件源码,部件和工具都是单独的scss文件,很清晰。其中两个文件是需要留意。一个是bootstrap.scss,里面import了所有部件和工具,我们只需针对此文件编译即可得到完整的css文件;另一个是_variables.scss,里面定义了所有变量,如果要自定义样式,我们只需更改其中的变量即可。
2) 创建工作目录
Copy BS4源码其中的SCSS文件夹至工作目录,并新建一个custom.scss文件。目录结构:
bootstrap Custom|-- scss|-- custom.scss
scss文件夹存放BS4源码,为避免直接修改源码中的变量,我们将自定义变量放在custom.scss文件中。BS如果有升级,我们只需替换scss文件夹即可。
打开VS Code,打开工作文件夹,编辑custom.scss:
$theme-colors: ("gray": #6c7074 );@import "scss/bootstrap";
文件最后import了scss文件夹中的bootstrap.scss文件,它含了bootstrap所有部件。
也可以单独引用指定部件:
// 必须 @import "scss/functions"; @import "scss/variables"; @import "scss/mixins";$theme-colors: map-remove($theme-colors, "info", "light", "dark");// 可选 @import "scss/root"; @import "scss/reboot"; @import "scss/type"; ...
3) 创建VS Code任务
打开命令面板(⇧⌘B),选择“Tasks: Run Task” - 选择“配置任务...” - 选择“使用模版创建tasks.json文件” - 选择“Others”。上面步骤会创建tasks.json文件,我们可以对task进行配置:
label是任务名,command是sass编译命令,其与终端命令是一致的。
4) 完成编译
打开命令面板(⇧⌘B),运行我们的“Sass Compile”的任务。可以看到命令已成功运行,CSS及map文件已经生成。
4. 简单体验Bootstrap 4自定义
我的示例中为bootstrap添加了一个新的主题颜色:
$theme-colors: ("gray": #6c7074 );
编译后bootstrap会将新的主题颜色应用到相应的部件上,例如按钮:
// bootstrap.css .btn-gray {color: #fff;background-color: #6c7074;border-color: #6c7074; } .btn-gray:hover {color: #fff;background-color: #5a5d60;border-color: #53575a; } .btn-gray:focus, .btn-gray.focus {box-shadow: 0 0 0 0.2rem rgba(108, 112, 116, 0.5); } ...
btn-gray 就是根据我们自定义主题颜色而生成的新样式,同样background,text部件也会增加相应的gray样式。我们在编码的时候就能使用自定义样式了。
显示效果:
是不是很棒,一个变量搞定一切。
参考:
https://code.visualstudio.com/Docs/languages/CSS
http://sass-lang.com/install
转载于:https://www.cnblogs.com/lookerblue/p/9436207.html
Mac系统使用VS Code编译Bootstrap 4相关推荐
- mac系统更新后code .命令打不开vs code
mac系统更新后code .命令打不开vs code 前言:昨天mac系统更新后,出现了一些问题,首先,程序坞中找不到vs code这个软件,我还以为跟新后卸载了,有下了一个压缩包,就过在访达中的下载 ...
- android studio 设置自动编译_Appium Mac系统 自动测试环境搭建
一.python 环境准备 Mac 自带 Python 环境,一般为 2.7 版本. 1.查看当前系统默认的Python路径 which python ==> /usr/bin/python 2 ...
- mac 打开html c python,在Mac系统使用Visual Studio Code运行Python的方法
在Mac系统使用Visual Studio Code运行Python的方法 发布时间:2020-08-10 10:29:31 来源:亿速云 阅读:105 作者:小新 在Mac系统使用Visual St ...
- brew安装php-ffmpeg,mac 系统编译安装ffmpeg
发表于 2019-05-03 19:03:20 by 月小升 mac 系统编译安装macOS High Sierra Version 10.13.6(17G6030) git clone https: ...
- Q106:Mac系统下安装编译PBRT-V3
Mac和Linux比较类似,所以,"Mac系统下安装编译PBRT-V3"和"Linux系统下安装编译PBRT-V3"是非常相似的. 基于"Q106:L ...
- mac系统使用指南之色色篇
之前没怎么用过mac系统,公司给陪了一个air本,感觉性能蛮好的,所以就使用吧... 遇到一些问题 首先是 小乌龟哥哥找不到,反正这个在linux上也木有,我就忍了... 先把 vim 配置完了再说. ...
- Mac系统下连接阿里云并运行java程序
文章目录 Mac系统下连接阿里云并运行java程序 第一步:连接服务器并查看当前服务器中java的版本 第二步:自行安装jdk环境 第三步:安装上传的jdk,并配置环境变量 第四步:创建.java程序 ...
- [置顶] mac系统使用指南之色色篇
之前没怎么用过mac系统,公司给陪了一个air本,感觉性能蛮好的,所以就使用吧... 遇到一些问题 首先是 小乌龟哥哥找不到,反正这个在linux上也木有,我就忍了... 先把 vim 配置完了再说. ...
- Mac系统下降级安装stlink-1.4.0方法
STLINK版本:V2 Mac系统:10.14.6 芯片型号:STM32F205 备注:使用最新的stlink-1.5.0下载固件时异常,所以才想要退回到stlink-1.4.0,但是使用brew r ...
最新文章
- WPF 用户控件的使用
- Java中对象的深克隆和浅克隆
- 《那些年啊,那些事——一个程序员的奋斗史》——35
- Linux C编程一些优秀的博客链接
- vs2010 sp1 安装 Silverlight4_Tools 提示 错误 解决办法
- 利用scons构建project
- UVA - 753 A Plug for UNIX(网络流)
- linux wget 命令_我如何使用wget Linux命令恢复丢失的图像
- kotlin泛型_Kotlin泛型
- 购买成熟软件产品后的二次开发的问题
- dncnn图像去噪_基于强化学习的图像去噪方法与流程
- Tomcat session集群
- VNC 远程重装 Linux
- TRUNCATE TABLE command not allowed within multi-statement transaction
- UNDERSTANDING JINJA - 理解Jinja使用语法
- 实现动态基础架构 容易吗?
- 怎样快速将PDF文件旋转
- vue项目中 路径使用的@和~的区别
- 把下列c语言的语句改写成汇编语言的程序片段,其中变量都为整形变量,汇编程序设计读书笔记(4)...
- Kindle如何带封面传书