less的安装与用法
1. node.js
node.js是一个前端的框架 自带一个包管理工具npm
- node.js 的安装
- 在命令行检验是否安装成功
- 打开cmd
- 切换到项目目录，初始化了一个package.json文件
- 安装与卸载jQuery包（例子）
- 安装
- 卸载
- 安装淘宝镜像
- 安装
2. 安装less
试一试：
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css"/>
</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);
} - 注释
//单行注释//
/*多行
注释*/ // @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的安装与用法的更多相关文章
- pycharm的安装及用法
俗话说的好:"工欲善其事,必先利其器",程序员写代码,肯定不能在编译器里面写,这有一个全宇宙最好的python编译器,叫做pycharm ,他的优点呢,大家可以看一下: 优点:1, ...
- HBuilder的安装及用法
一,简介HBuilder 1.1,什么是Hbuilder? HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.HBuilder的编写用到了Java.C.Web和Ru ...
- Git 安装及用法 github 代码发布 gitlab私有仓库的搭建
版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 这个版本控制软件,有 svn还有git,是一个工具. git是由linux的作者开发的 git是一个分布式版本控制系统 ...
- you-get 安装和用法
以windows为例 安装 从https://github.com/soimort/you-get/releases/latest下载*-full.7z,解压后在cmd中切换至目录下执行you-get ...
- youtube-dl 安装和用法
以windows为例 下载python2最新版本并安装,选择添加到PATH 下载ffmpeg最新版本并解压,在控制面板->高级系统设置->环境变量->PATH里添加解压之后的bin文 ...
- crontab安装和用法（定时任务）
crontab命令常见于Unix和Linux的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于"crontab"文件中,以供之后读取和执行.通常 ...
- Linux下redis的安装及用法
1.下载源代码包redis-2.8.21.tar.gz,并将其上传到指定文件夹/urs/src,然后对其进行解压: [root@Slave1pc src]# tar -xvf redis-2.8.21 ...
- cmake命令 安装、用法简介
前言 cmake是kitware公司以及一些开源开发者在开发几个工具套件(VTK)的过程中所产生的衍生品.后来经过发展,最终形成体系,在2001年成为一个独立的开放源代码项目.其官方网站是www.cm ...
- Chrome插件安装和用法
XPath Helper 下载插件,拖入chrome://extensions/ 使用方法:ctrl+shift+x呼出 JSONView的使用: 安装JSONView插件 下载插件,拖入chrome ...
随机推荐
- YUV420、YUV422、RGB24转换
//平面YUV422转平面RGB24static void YUV422p_to_RGB24(unsigned char *yuv422[3], unsigned char *rgb24, int ...
- TCP 粘包问题浅析及其解决方案
最近一直在做中间件相关的东西,所以接触到的各种协议比较多,总的来说有TCP,UDP,HTTP等各种网络传输协议,因此楼主想先从协议最基本的TCP粘包问题搞起,把计算机网络这部分基础夯实一下. TCP协 ...
- 关于cxf生成客户端代码中的JAXBElement<String>
1.使用自动生成的java文件中的 ObjectFactory构造入参 关于cxf生成客户端代码中的JAXBElement<String> 在使用cxf或者x-fire进行webse ...
- wordclock中文模式快一个小时怎么调整
wordclock屏幕保护,设置为中文模式,显示的时间比系统时间要快一个小时,其实软件自带的配置文件可以设置调整到正常时间…… 工具/原料 wordclock 方法/步骤 桌面上右键菜 ...
- Java+Selenium3框架设计篇5-如何实现邮件发送测试报告
https://blog.csdn.net/u011541946/article/details/77278837 本篇继续回答网友的问题,这个主题是如何通过邮件发送测试报告.通过邮件发送测试报告,这 ...
- Win10系统的SurfacePro4如何重装系统-2 重装WIN10系统
把SurfacePro充好电,然后关机,开机按住音量+,然后再按电源键,可以开机并进入BIOS(此前应确保优盘已经装了PE并插入Surface) 然后选择U盘启动为第一个(按住之后把他拖放到第一位 ...
- shell编程学习笔记（九）：Shell中的case条件判断
除了可以使用if条件判断,还可以使用case 以下蓝色字体部分为Linux命令,红色字体的内容为输出的内容: # cd /opt/scripts # vim script08.sh 开始编写scrip ...
- jquery动态添加元素无法触发绑定的事件的解决方案
方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...
- go微服务框架go-micro深度学习-目录
go微服务框架go-micro深度学习(一) 整体架构介绍 go微服务框架go-micro深度学习(二) 入门例子 go微服务框架go-micro深度学习(三) Registry服务的注册和发现 go ...
- Android RecyclerView的item大小保持四个半
现在有这么一个需求,实现下图的UI. 我想你应该能想到用RecyclerView实现, 当我唰唰唰几分钟做完之后,UI设计师跟我说,每个item,无论在什么手机上,都要显示四个半,具体看下图 ...