CSS预处理器
1.css和js的区别
js是编程语言,它可以声明变量,编写逻辑.而css实际上只是个"表",表头是选择器,内容是里面的样式.它并不能写逻辑啥的.也就是说,对于css的样式,我们并不能引用、继承、判断等,复用性较低.比较冗余.
2.css预处理器是干嘛的
为css提供了与js类似的功能,比如我可以在css中声明变量,可以引用变量,可以有嵌套关系,可以使用函数等.
3.常见的预处理器有less、sass等
4.以less为例,使用预处理器之后写css的方式有了哪些变化
首先,预处理器需要单独安装,安装完之后再对应的文件中编写样式,比如".less"的文件里,我们可以使用less的语法
比如:变量
@mainColor :blue
.main{
background-color:@mainColor
}
比如:混合
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
相比于一板一眼的配表格,css的编写也更像是写逻辑代码了,灵活度更高了,复用性更强了.
具体可看less的官网:https://less.bootcss.com
总的而言,css预处理器出现的目的是方便开发者的,让开发者可以用编程的思维去开发css,之后,它负责将开发者写好的东西最终又翻译成css文件去交给浏览器.
css Modules
如果说css预处理器是为了将css变成编程语言去写,那css Modules的目的是css的模块化开发.
1.css Modules干啥了
css的外联的写法是写一个css文件,在里面写上元素的类名和样式,那么html里面的对应类名的元素就会有css文件里面的样式.在这个过程中,选择器和类名是直接对应的.
<div id='a' class='test'>你好</div>
.test{
color: red;
}
那么,这种写法有一些问题,即当页面足够复杂时,类名容易出现重复,特别是当组件式开发时,我容易忘记其他组件有哪些类名导致重复.是一个很小的问题,找到之后改个类名就行,但很麻烦.但是,假如,我能保证每个类名都是唯一的就不会出现这个问题.
所以css Modules的核心作用就是保证类名是唯一的.
2.css Modules如何保证类名唯一
先在一个.less文件里写上样式,通过css Modules的处理封装,导入该文件时会获得一个对象.
.test{
color: red;
}
然后再引入,可得到这个styles对象,然后将其test属性赋值给元素的class
import styles from './index.less';
<div className={styles.test}></div>
这么做的目的是什么呢?
我们先看看styles是什么,那我代码中的一个.less文件举例
我们发现styles包含的属性为.less文件里的所有类选择器名,其值为类名_哈希字符串.其中哈希字符串是唯一的.所以当其赋值给元素的class的时候,元素的类名也就是唯一的.
3.css Modules如何实现模块化
如何理解模块化,以百度词条为例
关键词是"划分"和"多种属性".以这个角度来看.假如单页面开发,即整个页面只有一个.less文件的时候.那么整个项目也就一个styles对象.虽然有多属性,但也没有实现"划分".
所以,css Modules的模块化实际上是脱胎并服务于组件化开发模式的.因为多个组件可以写多个.less文件,那么就可以得到多个styles对象.举个例子,一个页面分为"header、content、footer"三个部分,我们开发的时候就可以分成三个组件.
接下来有多种写样式的方案,
1.比如只写一个公共less文件,三个组件的样式都写在里面,那么就一个styles对象,包含所有样式,那么这种情况用不用css Modules没啥区别.不分模块和整个项目只有一个模块有啥区别?.
2.每个组件单独写一个less文件,三个组件就三个styles,每个组件对应一个模块的话,那么整个页面的样式也就被拆成了三个模块,如此一来,css的样式也就实现了模块化,我修改其中一个模块的样式并不会影响其他模块.
总结下来,css Modules提供了模块的功能,即将一个less文件封装成一个独立的模块,以确保其他less文件并不会跟该less文件出现同名类名.但是其大放异彩还是依赖于整个前端代码的模块化开发的风格.
4.css Modules的其他功能
全局作用域:
有时候css样式需要批量或者全局修改,而它也提供了这种功能.
:global{
.test{
color:red
}
}
//:global包裹的类名不会被翻译成hash值
比如外部引入的ui框架的样式修改就可以用这种方式进行.
其他比如继承输入等功能可以自行去搜索一下.
