您现在的位置是:首页 > Javascript
当前栏目
不使用构建工具,如何对css进行模块化?
2023-03-07 09:44:16 时间
构建工具
使用构建工具进行开发,最终通过构建工具打包编译出最终的前端代码是现在的大趋势,但是构建工具生产出来的大都是前后端分离的代码。如果对seo有要求,通过构建工具就不符合需求了(不考虑SSR,毕竟它局限于Node);
在PHP的世界里还是有很多不分离的场景的(例如wordpress)。
对于html可以通过PHP自身的特性去拆分,对于JS 已经有了很多成熟的模块化方案。
那么对于css呢?
CSS模块化
这里的模块化只考虑拆分,不考虑实现局部作用范围。
1. 传统写法
如果不模块化的话,我们往往是这么写:
....
css变量...;
pc端css...;
手机端css..;
....
从头到尾写完,最终网页上只需要引入一个文件;随之而来的问题就是:css越写越多,维护起来越来越麻烦,找个css都得找好一阵;
然后可能就考虑拆分成多个文件,分开引入(不考虑css自带的动态引入);最后发现维护确实简单了,但是引入文件数量多了,总会觉得不简洁。
那么有没有维护起来方便,最终只需要引入一个文件的方案呢?有!
2. scss预处理
scss的相关说明看这里:https://nicen.cn/1167.html
使用scss之后就变成了这样:
@import "assets/extra/normal.scss";
@import "assets/extra/w-1024-1580.scss";
@import "assets/extra/w-1024.scss";
@import "assets/extra/w-768-1024.scss";
@import "assets/extra/w-480-767.scss";
@import
类似PHP的include,导入一个外部文件
经过scss编译之后得到一个完整的css文件,而我们只需要维护多个拆分后的scss文件;同时还能使用scss的一些特性,让css写起来更加流程和方便;
相关文章
- jQuery添加dom节点的方法
- jQuery 替换元素中class的方法
- WordPress网站js脚本延迟和异步加载教程
- HTML 锚点三种实现方法
- 解决css引用字体跨域问题
- js去除字符串空格
- JS中的八大数据类型
- CSS属性继承有哪些?(回顾)
- js 继承的是什么?如何实现继承?
- js同步和异步的区别是什么?
- v-model 基本原理 ?(回顾)
- 2021年web前端面试集锦
- 前端JS、CSS版本控制
- JavaScript获取当前url路径
- js正则表达式语法
- vue路由守卫(回顾)
- vue中el是什么?
- vue模板语法{插值表达式}的用法
- vue指令和用法?
- vue中 v-on 和 v-bind 的区别 ?