使用less的三种方式详解
2019-08-02 11:28
134 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_36131502/article/details/98172476
less的语法 在服务端使用less
less使用的三种方法
在客户端使用less
less是预处理语言
less的下载与使用
在客户端使用,必须要使用服务器的模式启动
- 为什么要用服务器模式启动,因为要发送请求,编译后返回数据,如果是本地,会导2致跨域的问题
- 首先你要在客户端下载less{less下载官网}
- 下载完成后,先导入你的XXX.less文件,再导入下载里面的less.js文件
导入时需要添加tyep=‘text/less’属性,不然浏览器不解析
less的语法
在xxxless文件中写变量
@width:200px;
@height:200px
div{
width:@width;
height:@height;
background:red;}
在服务端使用less
less的安装
可以装在本地的依赖中,
cnpm i less --save
可以装在全局的依赖中,
cnpm i less -g
混合(函数)模式使用less
- 第一种用法
.one(){//这里加括号了就不输出了,不加括号会输出 width:200px; height:200PX } div{ .one() }
- 第二种用法
.one(@col){//这里加括号了就不输出了,不加括号会输出 width:200px; height:200PX; color:@col; } div{ .one(red) }
- 第三种用法
@代表变量 .one(@col=red){//这里加括号了就不输出了,不加括号会输出 width:200px; height:200PX; color:@col; } div{ .one()//不传就会有默认值red }
- 用嵌套的方式写less
ul{ background:red; li{ width:20px; height:60px; img{ margin:10px; &:hover{//&代表父节点 background:pink; } } } }
less导入(模块化思想)
1. 在这个文件中,想导入其他less文件中的方法
@import “index”//导入index.less文件,使用里面的属性
2. 在这个文件中,想导入其他的css文件中的方法
@inport “index.css” //导入index.css文件,使用里面的属性
less运算
@w:200px; @h:100px; .one{ width:@w; height:@h; } .two{ width:@w - 50; height:@h + 20px; }
less的编译
先写一个xxx.less文件,语法和客户端相同
@width:200px; @height:200px div{ width:@width; height:@height; background:red;}
编写完less之后,编译一下
lessc ./xxx.less ./XXX.css
这样就可以生成一个css文件,导入css即可使用
也可以使用自动编译程序 koala
koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,
下载kolal地址 kolal官网
- 里面可以设置为中文
- 将文件夹拖进kolal中,默认选择的就是自动编译,
- 现在你就可以随意改less文件,都会自动编译到css中
(推荐)VScode下载插件Easy LESS
使用起来很简便,只要安装Easy LESS
之后在less文件头部写上
// out: ../dist/app.css,
后面.css就是你要生成的css名字路径。
这样只要发生改变自动生成,很方便。
相关文章推荐
- 详解python使用递归、尾递归、循环三种方式实现斐波那契数列
- CodeIgniter中使用cookie的三种方式详解
- Slidemenu(侧滑)的使用(三种使用方式)及属性详解
- iconfont的三种使用方式详解
- create table ,create as 与create like三种建表方式的使用详解
- 详解angularJs中关于ng-class的三种使用方式说明
- CodeIgniter中使用cookie的三种方式详解
- 详解RestTemplate的三种使用方式
- 使用C#创建webservice及三种调用方式
- 总结J2EE中使用任务调度三种方式
- web server使用php生成web页面的三种方式
- [Android开发]Android之使用HTTP的get,post,HttpClient三种方式向服务器端提交文本数据
- 多表连接的三种方式详解 HASH JOIN MERGE JOIN NESTED LOOP
- 使用 Spring 更好地处理 Struts 动作三种整合 Struts 应用程序与 Spring 的方式[摘]
- ecliipse下安装插件的三种方法&使用links方式安装Eclipse插件
- 友元的三种最基本使用方式
- Android 使用三种方式获取网页(通过Post,Get进行表单的提交)
- iPhone开发之创建简单界面视图的三种方式之二 使用Xcode4完全手动构建界面
- 插入排序InsertSort的三种实现方式及循环不变式的使用