《HTML5+CSS3 Web开发案例教程》课件-第16章 前端CSS的工程化

HTML5+CSS3

2021.6HTML5andCSS3第16章

前端CSS的工程化CSS的不足CSS的预处理器SassDEMO使用webpack构建系统DEMO（计算器）第16章

前端CSS的工程化CSS的不足而随着项目规模和页面复杂度的增加，就会发现CSS存在一定的不足缺少模块系统。模块系统是软件工程化的基石，而在CSS中没有模块和封装机制，所有的CSS规则都平铺在一个空间里，这给前端项目的工程化管理增加了很大的复杂度，导致开发大型应用时编码和维护都很困难。缺少变量机制。这对控制一些需要在多个地方引用的属性值很不方便。比如一个颜色值，页面好多地方用到，如果后期需要在整个项目范围内修改这个颜色，就只能整个项目中用文本的全局查找和替换，但是这样很不安全，而且一旦改错了也会很难发现。HTML结构是嵌套的层次结构，而CSS的语法却不支持嵌套的层级写法，二者不能匹配。这一点是开发人员在写CSS代码时的最大困难，要多写很多冗余的选择器，而且也给阅读理解代码带来不便。复用困难。复用是软件工程的核心思想，即抽象和封装。CSS缺少了很多其他语言里常用的复用的手段。第16章

前端CSS的工程化CSS的预处理器Sass嵌套写法定义变量模块系统混入（Mixin）继承第16章

前端CSS的工程化嵌套写法第16章

前端CSS的工程化定义变量整个项目中把所有可能变化的统一属性值都定义为变量，放在一起，统一管理。这样可以极大地提高效率，增强代码的可维护性，便于局部和全局的样式风格统一控制。第16章

前端CSS的工程化模块系统模块化是软件工程的基础，各种语言都有各自的模块化方式。CSS虽然有@import机制，它是在一个CSS文件中插入另一个文件，但浏览器只有到执行的时候才会下载导入的文件，导致速度很慢，性能很差，所以在实际中极少应用。而Sass对CSS的@import进行了拓展，实现了真正的模块系统。第16章

前端CSS的工程化混入（Mixin）在使用CSS设定样式的时候，经常会遇到多个元素的样式中既有共同的一些规则，又有各自不同的一些规则，我们通常就会把共同的部分写在一起，以减少重复代码。第16章

前端CSS的工程化继承Sass除了提供Mixin机制，还提供了继承机制，用法有些类似。第16章

前端CSS的工程化使用webpack构建系统现在一般把项目区分为“开发”和“运维”两个阶段，前者对应于“开发环境”，后者对应于“生产环境”。开发环境中，一般面对的都是便于调试的源代码，而在生产环境中，一般会对代码进行必要的处理，例如去除空格等等，减小体积以提高性能等等。通常至少有下面两个不可缺少的步骤。合并：在一个实际项目中，前端开发主要涉及的是3种代码文件：HTML、CSS和JavaScript。一个项目中，通常会编写出多个CSS和JavaScript文件，最终要发布到生产环境时，一般会通过“合并”操作，减少文件个数，提高浏览器下载的性能。压缩：经过打包操作的文件代码仍然是开发人员手工编写的代码，实际上里面还有很多空格、注释等字符，实际上对于真正的运行环境比如生产服务器来说，这些字符都是多余的，例如注释、空格等等，因此我们会希望把这些冗余的字符都去掉，减小文件的体积，这个过程称为“压缩”。第16章

前端CSS的工程化使用webpack构建系统安装node.js环境准备项目文件安装webpack及相关组件package.jsonwebpack.config.js入口文件安装依赖包预览和调试打包第16章

前端CSS的工程化DEMO第16章

前端