文档章节

Less简介

stefanieliang
 stefanieliang
发布于 2017/08/18 15:00
字数 806
阅读 20
收藏 0

官方网站

        http://lesscss.cn/ 

        Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性,使CSS更易维护和扩展。

        Less可以运行在Node或浏览器端。也可运行在桌面客户端(考拉 )。

编译工具

  1. Node.js库
  2. 浏览器端使用 
  3. koala(推荐)

        koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。

        下载地址:http://koala-app.com/index-zh.html          

基本语法 

  • 注释 

  1. /**/,不会被编译
  2. //,被编译
  • 变量

         Less中声明变量的话,一定要用@开头,例如:“@变量名:值;”        

/*声明变量*/

//main.less
@text_width:300px;
.box{
	width: @text_width;
	height: @text_width;
	background-color: yellow;
}

//main.css
.box {
  width: 300px;
  height: 300px;
  background-color: yellow;
}
  • 混合 

/*混合*/

//main.less
@text_width:300px;
.box{
	width: @text_width;
	height: @text_width;
	background-color: yellow;
	.border;
}
.border{
	border: solid 5px pink;
}

//main.css
.box {
  width: 300px;
  height: 300px;
  background-color: yellow;
  border: solid 5px pink;
}
.border {
  border: solid 5px pink;
}
  • 混合-带参数

/*混合-带参数*/

//main.less
.border_02(@border_width){
	border: solid yellow @border_width;
}
.border_mixin{
	.border_02(30px;)
}

//main.css
.border_mixin {
  border: solid #ffff00 30px;
}
  • 混合-带默认值

/*混合-带默认值*/

//main.less
.border_03(@border_width:10px){
	border: solid yellow @border_width;
}
.border_mixin_03{
	.border_03();//传参使用新参数
}

//main.css
.border_mixin_03 {
  border: solid #ffff00 10px;
}
  • 混合-一个例子

/*混合-一个例子*/

//main.less
.border_radius(@radius:5px){
	-webkit-border-radius:@radius;
	-moz-border-radius:@radius;
	border-radius:@radius;
}
.radius_test{
	width: 100px;
	height: 100px;
	background-color: green;
	.border_radius();
}

//main.css
.radius_test {
  width: 100px;
  height: 100px;
  background-color: green;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
  • 匹配模式

/*匹配模式*/

//main.less
.sanjiao{	
	.triangle(top,100px);	
}
.triangle(@_,@w:5px,@c:#ccc){//@_表示此处样式全包括在内,后三个参数必须有
	width: 0;
	height: 0;
	overflow: hidden;//处理ie6最小高度问题
}
.triangle(top,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent transparent @c transparent; //上右下左
	border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: @c transparent transparent transparent; //上右下左
	border-style: solid dashed dashed dashed;
}

//main.css
.sanjiao {
  width: 0;
  height: 0;
  overflow: hidden;
  border-width: 100px;
  border-color: transparent transparent #cccccc transparent;
  border-style: dashed dashed solid dashed;
}
  • 运算

/*运算*/

//mian.less
@test_01:300px;
.box_02{
	width: @test_01 + 20;
}

//mian.css
.box_02 {
  width: 320px;
}
  • 嵌套规则

        & 代表上一层选择器

/*嵌套规则*/

//main.html
  <ul class="list">
		<li><a href="">这是一个list</a><span>2017-8-20</span></li>
  </ul>

//main.less
.list{
	width: 600px;
	margin:30px auto;
	padding: 0 10px;
	list-style: none;
	li{
		height: 30px;
		line-height: 30px;
		background-color: #eee;
		margin-bottom: 5px;
	}
	a{
		float: left;
		//& 代表上一层选择器
		&:hover{
			color: red;
		}
	}
	span{
		float: right;
	}
}

//main.css
.list {
  width: 600px;
  margin: 30px auto;
  padding: 0 10px;
  list-style: none;
}
.list li {
  height: 30px;
  line-height: 30px;
  background-color: #eee;
  margin-bottom: 5px;
}
.list a {
  float: left;
}
.list a:hover {
  color: red;
}
.list span {
  float: right;
}
  • @arguments变量

        @arguments包含了所有传递进来的参数,用的不多,了解即可。

/*@arguments变量*/

//main.less
.border_arg(@w:30px,@c:red,@xx:solid){
	border:@arguments;
}
.test_arguments{
	.border_arg(40px);
}

//mian.css
.test_arguments {
  border: 40px #ff0000 solid;
}
  • 避免编译

        有时候我们需要输出不正确的CSS语法,或者使用一些LESS不认识的专有语法,我们可以在字符串前加“~”,例如:width:~'calc(100%-35)';

/*避免编译*/

//main.less
.test_03{
	width:~'calc(100%-35)'; //不加~效果:width: calc(65%);
}

//main.css
.test_03 {
  width: calc(100%-35);
}
  •  !important

        优先级最高,可在调试时使用。 

/*!important*/

//main.less
.test_important{
	.border_radius() !important;
}

//main.css
.test_important {
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  border-radius: 5px !important;
}
  • @ import

        可以使用@ import,在一个less文件中导入less文件和css文件。

  1. @ import  "ku"  //此处为导入Less文件,可以把.less省略;
  2. @ import  (less) "a.css"  //此处为导入Css文件;

参考资料 

  1. 快速入门 http://less.bootcss.com/ 

© 著作权归作者所有

上一篇: 前端-面经
下一篇: TypeScript简介
stefanieliang
粉丝 0
博文 14
码字总数 4579
作品 0
朝阳
程序员
私信 提问
Elasticsearch插件大全

Elasticsearch扩展性非常好,有很多官方和第三方开发的插件,下面以分词、同步、数据传输、脚本支持、站点、其它这几个类别进行划分。 分词插件 Combo Analysis Plugin (作者 Olivier Favre,...

阿姆斯特芬
2018/01/08
0
0
HTML前端开发之路——多列布局

利用多列布局的属性可以轻松的为文字或者图片添加瀑布流效果; 首先看一下多列布局的属性总览: column-width属性简介 2.column-count属性简介 3.column属性简介 4.column-gap属性简介 5.co...

LeslieMay
2016/02/12
88
0
HTML前端开发之路——弹性盒模型

弹性盒模型(Flexible Box)是一个CSS3新增布局模块,用于实现容器里项目的对齐、方向、排序; 弹性盒模型最大的特效在于,能够动态的修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当...

LeslieMay
2016/02/12
143
0
没有任何秘密的 API:Vulkan* 简介

Vulkan 被视作是 OpenGL 的后续产品。 它是一种多平台 API,可支持开发人员准备游戏、CAD 工具、性能基准测试等高性能图形应用。 它可在不同的操作系统(比如 Windows、Linux 或 Android*)上...

IDZPRC
03/19
0
0
工具类汇总

工具类已封装成lib,代码地址:http://git.oschina.net/SRain215/DesignModeApp的SCUtilsLib中。 一、AppUtils: 简介:获取APP的信息的辅助工具类。 获取版本信息 安装、卸载 打开、退出 二...

SRain215
2016/09/12
56
3

没有更多内容

加载失败,请刷新页面

加载更多

ant 中的fileset include等拷贝

拷贝一个目录到指定目录下 例:<copy todir="${basedir}/new"> <fileset dir="${basedir}/old"> <include name="appgen" /> <include name="appgen/" /> <include name=appgen/**" /> <incl......

shzwork
9分钟前
1
0
react-jianshu项目的创建

创建项目 1、github上创建仓库react-jianshu 2、将项目克隆到本地git clone git@github.com:startjcu/react-jianshu.git 3、在当前目录(项目目录的上级目录)下执行create-react-app react-...

星闪海洋
19分钟前
2
0
OSChina 周二乱弹 —— 小哥哥,你可以教我写代码吗

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @nnnm: 生活大爆炸,结束了,这部陪伴了漫长时间的情景喜剧,最终是以诺贝尔奖和大团圆收尾的。虽然,不算精彩,但也是温馨。而少年谢尔顿的...

小小编辑
今天
235
11
typescript 接口 函数类型 可索引类型

函数类型 可索引类型 数字索引签名 字符串索引签名 数字索引签名返回值 必须是 字符串索引签名返回值的子集 只读索引签名

lilugirl
今天
3
0
Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部