十分钟入门CSS预处理器——Less

2017-09-13 12:30:28来源:CSDN作者:xyphf人点击

分享

今天我们扯一扯CSS的预处理器——Less。

在此之前我们思考一下CSS和Javascript在语言特性上有什么区别呢?
其实它们之中最大的区别就是CSS是静态的,没有变量和函数这些概念

现在这个问题解决了,less就可以实现变量和函数的功能
通常less文件通过less工具编译成css文件。

什么叫less语言呢?首先编写.less的文件,然后我们再使用less工具,
其实就是一段脚本,让它生产CSS文件。

这个less工具最初是在浏览器上的一个JS脚本,是在浏览器端进行运行,直到后来有了node的出现,就有了node的插件,脱离浏览器,可以在服务端进行编译,把它编译成CSS文件。

那么我们为什么要使用less呢?
这是因为它可以给我们带来动态语言所具有的优势。
定义变量:如果我们有多个样式类,引用同一个变量的话,当这个变量修改时,这些样式类就
会发生修改。比如说像颜色等,我们要换皮肤的时候,只需要将这个颜色变量进行修改,整个界面的
主题颜色就发生了变化。
优化了后代选择器的写法:
支持文件引用
这就让less文件可以进行拆分编写:
增加了函数的功能:

这里我们介绍几个常用的语法:
【常用语法:定义变量、后代选择器、文件引用、函数】

下面我们具体的介绍一下
定义变量

//编译前的Less语言@bgColor:#000; //定义变量,背景颜色.frame{    background-color:@bgColor; //使用变量}//=================================//编译后的CSS语言.frame{    background-color:#000000;}

优化了后代选择器 也就是说可以嵌套,添加伪类用&符号

//编译前的Less语言.frame{background-color:@bgColor;    .select{ //添加嵌套        width:100px;    }    &:after{ //添加伪类        content:'';    }}//=================================//编译后的CSS文件.frame{    background-color:#000000;}.frame .select{    width:100px;}.frame:after{     content:'';}

函数功能
函数:函数本身是不编译的,没有引用函数本身的话,也是不编译的
也就是说它相当于一段通用代码

//编译前的Less语言.frame{    .fun(123px); //调用函数并传参    background-color:#000000;}.fun(@px){ //封装函数    height:@px;}//=================================//编译后的CSS文件.frame{    height:123px;    background-color:#000000;}

文件引用:

文件引用: @import '文件名',文件名可以是相对路径我在定义一些全局变量的时候,我们会定义在一个.less文件中然后我们引用这个全局变量文件,把这些变量添加到我们的样式类中。我们会写一个初始化的less文件,然后把要编译的所有less文件都引用进来,然后我们用工具进行编译的时候,只需要编译这个启动的less文件(初始化的less文件)它就会把其他的less文件自己加载进来,自动编译。@import 'sadsf.less'

通常我们会用一些项目构建工具将.less文件变编译成CSS文件,比如说下面我们介绍的Gulp工具

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台