Less前端框架--编写模块化的样式文件

Paste_Image.png

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，混入，函数等特性，使CSS更易维护和扩展。

less使用考拉Koala软件来转换为css格式

Paste_Image.png

说明一下：

把装有less文件的less文件夹拖拽进Koala软件，然后按Comple转换，会出现success弹窗，证明转换成功
以下是相关less的知识点，还有其他关于less知识点我没有在这里列出来，也没有深入去学了，因为对于本人来说以下的知识点学完已经够本人使用来编写样式了，有兴趣深入学习less的你们，就需要你们自己去学了，希望以下知识点对你们有所帮忙：

注释（/**/ （可以选中多行注释）和//（一行行注释））

Paste_Image.png

变量（@开头）

Paste_Image.png

例子

Paste_Image.png

需要注意的地方

Paste_Image.png

混合（定义）

Paste_Image.png

例子

Paste_Image.png

注意：若你混合值那有参数，使用时需要带参数值；但如果混合值有参数而且赋予了值。使用时可以不带参数

Paste_Image.png

如何形成三角形?

Paste_Image.png

@_的表明是必须把其带上，不管执行哪个关于它的代码

Paste_Image.png

运算（加、减、乘）

Paste_Image.png

Paste_Image.png

Paste_Image.png

颜色也可以运算（用得比较少）

Paste_Image.png

函数运算
例子

Paste_Image.png

嵌套

Paste_Image.png

例子

Paste_Image.png

如：css中的表示

Paste_Image.png

在list里面嵌套（在less中的表示）

Paste_Image.png

在less中hover的写法

Paste_Image.png

Paste_Image.png

@arguments变量（用得不是很多）

Paste_Image.png

Paste_Image.png

@argunments代表所有的@w/@c/@xx

Paste_Image.png

注意：这个改变了@w的参数

避免编译

Paste_Image.png

Paste_Image.png

说明：这样就不会编译（比较好，可以用在路径等方面）

! important(优先级最高的)（一般不要用上）

Paste_Image.png

Paste_Image.png

补充：

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

Paste_Image.png

@import“less/z”是写好的库
@import”bl”是公用的变量

Paste_Image.png

本文作者lilyping
越努力，越幸运
原文链接：https://www.jianshu.com/u/3908e601f4ec
微信公众号：BestLilyPing
github:https://github.com/lilyping
Demos源码地址：https://github.com/lilyping