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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
jquery ajax分页插件的简单实现
Jan 27 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
May 16 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
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
Vue 让元素抖动/摆动起来的实现代码
2018/05/31 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
详解Python网络爬虫功能的基本写法
2016/01/28 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
求职简历中个人的自我评价
2013/12/25 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
服务员自我评价
2014/01/25 职场文书
大学课外活动总结
2014/07/09 职场文书
反腐倡廉观后感
2015/06/08 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python