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 相关文章推荐
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
详解javascript遍历方式
Nov 11 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
js生成随机数方法和实例
Jan 17 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
学习ExtJS border布局
2009/10/08 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
Javascript学习指南
2014/12/01 Javascript
javascript作用域问题实例分析
2015/07/13 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
nodejs 如何手动实现服务器
2018/08/20 NodeJs
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
利用python开发app实战的方法
2019/07/09 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
CSS3简单实现照片墙
2014/12/12 HTML / CSS
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
Ajax的优点和缺点
2014/11/21 面试题
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
博士学位自我鉴定范文
2013/12/26 职场文书
机动车交通事故协议书
2015/01/29 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL