Less 的用法
1. node.js
node.js是一个前端的框架 自带一个包管理工具npm
- node.js 的安装
- 在命令行检验是否安装成功
- 切换到项目目录，初始化了一个package.json文件
- 安装与卸载jQuery包（例子）
- 安装
- 卸载
- 安装淘宝镜像
2. 安装less
试一试：
test.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);
}
- 注释
//单行注释//
/*多行
注释*/
- 引入其他less文件
@import "other.less";
Less 的用法的更多相关文章
- EditText 基本用法
title: EditText 基本用法 tags: EditText,编辑框,输入框 --- EditText介绍: EditText 在开发中也是经常用到的控件,也是一个比较必要的组件,可以说它是 ...
- jquery插件的用法之cookie 插件
一．使用cookie 插件 插件官方网站下载地址:http://plugins.jquery.com/cookie/ cookie 插件的用法比较简单,直接粘贴下面代码示例: //生成一个cookie ...
- Java中的Socket的用法
Java中的Socket的用法 Java中的Socket分为普通的Socket和NioSocket. 普通Socket的用法 Java中的 ...
- [转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法
一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...
- python enumerate 用法
A new built-in function, enumerate() , will make certain loops a bit clearer. enumerate(thing) , whe ...
- [转载]Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
本文对Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法进行了详细的总结,需要的朋友可以参考下,希望对大家有所帮助. 详细解读Jquery各Ajax函数: ...
- 【JavaScript】innerHTML、innerText和outerHTML的用法区别
用法: <div id="test"> <span style="color:red">test1</span> tes ...
- chattr用法
[root@localhost tmp]# umask 0022 一.chattr用法 1.创建空文件attrtest,然后删除,提示无法删除,因为有隐藏文件 [root@localhost tmp] ...
- 萌新笔记——vim命令“=”、“d”、“y”的用法（结合光标移动命令，一些场合会非常方便）
vim有许多命令,网上搜有一堆贴子.文章列举出各种功能的命令. 对于"="."d"."y",我在无意中发现了它们所具有的相同的一些用法,先举 ...
- [转]thinkphp 模板显示display和assign的用法
thinkphp 模板显示display和assign的用法 $this->assign('name',$value); //在 Action 类里面使用 assign 方法对模板变量赋值,无论 ...
随机推荐
- kukubeadm 1.6.1 + docker1.2.6 安装问题
kubeadm init --apiserver-advertise-address=192.168.20.229 --pod-network-cidr=10.244.0.0/16 kubelet: ...
- 【转】纯JS省市区三级联动（行政区划代码更新至2015-9-30）
本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...
- 【PHP笔试题】
1.以下脚本输出什么? $s = '12345'; $m = 'a2b1c'; $s[$s[$m]] = '3'; echo $s; [ ] A.12345 [ ] B.12235 [ ] C.223 ...
- nmap 扫描端口 + iftop 实时监控流量
sleep 1|telnet 127.0.0.1 223 nmap 127.0.0.1 -p 223 -PN (对禁ping IP) iftop -P -n -B -B 按字节显示 -N 切换 端 ...
- C++成员函数指针的应用
C++中,成员指针是最为复杂的语法结构.但在事件驱动和多线程应用中被广泛用于调用回叫函数.在多线程应用中,每个线程都通过指向成员函数的指针来调用该函数.在这样的应用中,如果不用成员指针,编程是非常困 ...
- iOS蓝牙APP常驻后台
iOS蓝牙类APP常驻后台的实现方法,经过在苹果开发者论坛询问,以及查看苹果开发者文档,最后得出正确的方法为: 1.设置plist,蓝牙权限 2.到target-capabilities-backgr ...
- 日志工具——log4j
资料参考自:http://www.codeceo.com/article/log4j-usage.html 关于日志的基本概念以及从入门到实战,请参见:http://www.cnblogs.com/L ...
- 2017-2018-1 20155234 实验三 实时系统及mypwd实现
2017-2018-1 20155234实验三实时系统及mypwd实现 实验三-并发程序-1 学习使用Linux命令wc(1) 基于Linux Socket程序设计实现wc(1)服务器(端口号是你学号 ...
- CF 1114 D. Flood Fill
D. Flood Fill 链接 题意: 一个颜色序列,每个位置有一个颜色,选择一个起始位置,每次可以改变包含这个位置的颜色段,将这个颜色段修改为任意一个颜色, 问最少操作多少次.n<=5000 ...
- 提交到开源git时出现:fatal: refusing to merge unrelated histories的解决办法
解决办法 创建本地库和fetch远程分支这些前面的步骤这里略过.可以自行百度. 解决办法: 1.cmd进入项目的根目录. 2.执行下面的命令:git pull origin master --al ...