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 ...
随机推荐
- .Net转Java.04.踩到switch的坑
今天线上有个NullPointerException 的异常,我翻了一下代码,抛异常的竟然是switch语句 我有种不祥的预感,本地做了实验 结果是 Java的switch如果传入null值,会抛出 ...
- jvm理论-class文件
当JVM运行Java程序的时候,它会加载对应的class文件,并提取class文件中的信息存放在JVM的方法区内存中. Class文件组成 1.Class文件是一组以8位字节为基础单位的二进制流,各个 ...
- shell编程学习笔记（十）：Shell中的for循环
shell编程中可以实现for循环遍历 先来写一个最简单的吧,循环输出从1到10,脚本内容为: #! /bin/sh for i in {1..10} do echo $i done 上面的代码从1到 ...
- ubuntu 16.04 源代码安装libusb
libusb是一个跨平台的usb通讯库:https://libusb.info/ 在ubuntu16上安装 1. 首先安装 libudev-dev sudo apt-get install libud ...
- IoC之AutoFac（一）——简单使用和组件注册
阅读目录 一.AutoFac简单使用 二.注册 2.1 注册方式 2.2 带参数注册 回到顶部 一.AutoFac简单使用 1 namespace AutofacDemo 2 { 3 class Pr ...
- win下查找端口占用进程并定位到具体程序
很多时候,我们会在服务器上运行多个java程序,但是在任务管理器里看到的都是一样的图标,想要找到我们想要的那个进程咋办呢? 列出所有端口进程 C:\Users\desp>netstat -ano ...
- nginx伪静态配置教程总结
在nginx中配置伪静态,也就是常说的url重写功能,只需在nginx.conf配置文件中写入重写规则即可. 当然,这个规则是需要熟悉正则表达式,只掌握nginx自身的正则匹配模式即可,对正则不了解的 ...
- nginx：not a directory
项目需要在nginx中提供一个配置文件返回接口的信息,于是就添加了location来实现,本以为很简单的操作,结果访问配置文件时一直返回404,nginx的error log中输出:not a dir ...
- golang字符串拼接
四种拼接方案: 1,直接用 += 操作符, 直接将多个字符串拼接. 最直观的方法, 不过当数据量非常大时用这种拼接访求是非常低效的. 2,直接用 + 操作符,这个和+=其实一个意思了. 3,用字符串切 ...
- QT信号/槽
在我的理解中,QT和Android都是类似的开发框架,都是由开发团队封装了各式各样的接口和数据结构.将一些问题的解决方法简单化比如QT中将线程封装为QThread,派生类通过重写run方法来将代码投入 ...