Less 安装及基本用法


Posted in Javascript onMay 05, 2018

node.js是一个前端的框架 自带一个包管理工具npm

node.js 的安装

官网:http://nodejs.cn/

Less 安装及基本用法

Less 安装及基本用法Less 安装及基本用法Less 安装及基本用法Less 安装及基本用法

Less 安装及基本用法

在命令行检验是否安装成功

Less 安装及基本用法

切换到项目目录,初始化了一个package.json文件

Less 安装及基本用法

安装与卸载jQuery包(例子)

安装

Less 安装及基本用法

卸载

Less 安装及基本用法

安装淘宝镜像

Less 安装及基本用法

2. 安装less

Less 安装及基本用法

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,

如下:

Less 安装及基本用法

用浏览器打开test.html 看一下效果吧3. less 的基本用法

https://less.bootcss.com/

变量

@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优先加载笔记代码
Sep 30 Javascript
XENON基于JSON变种
Jul 27 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
vue cli 全面解析
Feb 28 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
es6新特性之 class 基本用法解析
May 05 #Javascript
JS同步、异步、延迟加载的方法
May 05 #Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 05 #Javascript
JS文件中加载jquery.js的实例代码
May 05 #jQuery
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 #Javascript
js动态引入的四种方法
May 05 #Javascript
关于HTML5的data-*自定义属性的总结
May 05 #Javascript
You might like
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php计算一个文件大小的方法
2015/03/30 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
nodejs实现聊天机器人功能
2019/09/19 NodeJs
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python Matplotlib库入门指南
2015/05/18 Python
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2018/07/09 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
django数据库自动重连的方法实例
2019/07/21 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
Python Gitlab Api 使用方法
2019/08/28 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
详解Python 中的容器 collections
2020/08/17 Python
Canvas多边形绘制的实现方法
2019/08/05 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
植村秀加拿大官网:Shu Uemura加拿大
2019/09/03 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
中学生在校期间的自我评价分享
2013/11/13 职场文书
元旦晚会邀请函
2014/02/01 职场文书
报案材料怎么写
2015/05/25 职场文书
清明节主题班会
2015/08/14 职场文书
python自动化之如何利用allure生成测试报告
2021/05/02 Python
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫