Less基础
维护CSS的弊端CSS是一门非程序式语言,没有变量,函数,SCOPE(作用域)等概念.CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的.
不方便维护及扩展,不利于复用.
CSS没有很好的计算能力
非前端开发工程师来说,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目.
Less介绍
Less(LeanerStyleSheets)是一门CSS扩展语言,也称为CSS预处理器.作为CSS的一种形式的扩展,他并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性.它在CSS的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情.一句话:Less是一门CSS预处理语言,它扩展了CSS的动态特性.Less使用
我们要学习的:Less变量Less编译Less嵌套Less运算Less变量
变量是指没有固定的值,可以改变的.因为我们CSS中的一些颜色和数值等经常使用变量名:值变量命名规范必须有
为前缀不能包含特殊字符
不能以数字开头
大小写敏感
小例子:假如说,我们定义一个变量名为color,值为pink色,当我们再设置背景颜色的时候就不用写pink了,如果要修修改颜色,我们直接修改color的值即可.Less编译
本质上,Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成相对应的CSS文件.所以,我们需要把我们的Less文件,编译生成为CSS文件,这样我们的html页面才能使用.vscodeLess插件EasyLESS插件用来把less文件编译成CSS文件.安装完毕插件,重新加载vscode,只要保存一下less文件,会自动生成CSS文件.我们来看下它生成的CSS文件吧.变成了我们平常使用的样式,但是可以在less文件中修改,只要less文件一修改,CSS文件的内容也会跟着变.生成的CSS就可以直接引用了.Less嵌套
我们的结构里经常会有包含的关系,一个父盒子里面包含一个子盒子,给子盒子写样式的时候就会变得麻烦...但是less嵌套就解决了这个问题.我们有一个header,里面包含一个a标签.我们现在给header和a标签都修改样式,就可以将a的样式嵌套在header的样式里面,header{width:px;height:px;background-color:purple;a{background-color:royalblue;}编译成CSS文件后还是headera.如果遇见(交集
伪类
伪元素选择器)
内层选择器的前面没有符号,它会被解析为父选择器的后代(就是加一个空格).
如果有符号,它就会被解析为父元素自身或父元素的伪类.
我们想要给header里面的a设置伪元素hover的话,就要在前面加上一个符号.header{width:px;height:px;background-color:purple;a{color:royalblue;:hover{color:#fff;}}}看看CSS里面的样式,可以看到也是对的.结构伪类选择器也是一样的道理.
Less运算
注意:乘号(*)和除号(/).
运算符中间左右有个空格隔开1px+5.(现在不加也可以了!)
对于两个不同的单位的值之间的运算,运算结果的值取第一个单位的值.
如果两个值之间只有一个单位,则运算结果就取该单位.
小例子:(甚至连颜色值都能运算)现在的除法运算是要加上括号的!!!又要做案例啦,这次做的是苏宁的首页,放一些前期准备,我就直接粘贴图片了哈,节省时间.佳人们,已经快晕倒了现在的思路就是:先创建一个index.html文件→创建公共样式