Less 安装及基本用法
时间:2019-04-14
本文章向大家介绍Less 安装及基本用法,主要包括Less 安装及基本用法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
node.js是一个前端的框架 自带一个包管理工具npm
node.js 的安装
在命令行检验是否安装成功
切换到项目目录,初始化了一个package.json文件
安装与卸载jQuery包(例子) 安装
卸载
安装淘宝镜像
2. 安装less
试一试:
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css" rel="external nofollow" /> </head> <body> <div id="box"> <ul> <li>你好</li> <li>hello</li> </ul> </div> </body> </html>
style.less
#box{ width:200px; height:200px; background-color:blue; ul{ color:white; li{ line-height:50px; } } }
在命令行中输入lessc xxx.less xxx.css,
如下:
用浏览器打开test.html 看一下效果吧3. less 的基本用法
变量
@red:red; @w:200px; #big{ width:@w; height:@w; background-color:@red; #small{ width:@w; height:@w; background-color:@red; } } p{ color:@red; }
混合
.bt{ width:200px; height:200px; border-top:2px solid red; background-color:red; } #big{ .bt; #small{ .bt; } }
•嵌套
#box{ width:100%; height:60px; background-color:#ccc; h3{ width:100%; height:20px; background-color:yellow; } ul{ list-style:none; li{ height:40px; line-height:40px; float:left; padding:0 10px; } } }
•运算
@color:#333; #box{ width:100%; height:60px; background-color:@color+#111; } •calc() @var:50vh/2; #box{ width:calc(50% + (@var - 20px)); }
•固定函数
@base:#f04615; @width:0.5; #box{ width:percentage(@width); color:saturate(@base,5%); background-color:spin(lighten(@base,25%),8); }
•注释
//单行注释// /*多行 注释*/ •引入其他less文件 @import "other.less";
总结
以上所述是小编给大家介绍的Less安装及基本用法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- js键盘键值大全
- mysql用户创建+密码修改+删除用户+角色分配 的正确姿势 实践笔记
- Centos7 安装 Nginx 的正确姿势 并设置开机自启 实践笔记
- js函数大全(2)
- HTML之打开/另存为/打印/刷新/查看原文件等按钮的代码
- Centos7 安装 Keepalived+Nginx 双机热备HA 的正确姿势 并开机自启 实践笔记
- 从 findbugs-maven-plugin 到 spotbugs-maven-plugin 帮你找到代码中的bug
- nmap常用命令检查主机在线与在线主机端口开放情况
- 想做测试工程师的可以看看
- nginx 实现Web应用程序的负载均衡
- 线上遇到nginx Cors跨域请求OPTIONS方法405 Method Not Allowed问题
- 常见Linux命令的正确打开姿势 实践笔记 更新中
- 用gogs轻松搭建个人的git服务器
- Centos7 activemq启动失败 解决 的正确姿势 实践笔记
- 所谓并发编程,所谓有其三