less总结

原创 2016年08月30日 17:42:48
  • 注释
 /*会被编译*/
 //不会被编译
  • 变量
@test_width:300px;
  • 混合

例一:

.box {width:@test_width;  .border; }
.border {border:1px solid red;}
编译后-->.box {width:300px; border:1px solid red;}

例二(带参数或默认值):

.border(@border_width:10px) {border:solid red @border_width;}
.test01 {.border(30px);}  编译后-->.test01 {border:solid red 30px;}
.test02 {.border();}  编译后-->.test02 {border:solid red 10px;}
  • 匹配模式
.triangle(top,@w:5px,@c:#ccc)    
{
     border-width:@w; 
     border-color:transparent transparent @c transparent; 
     border-style:dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc)    
{
     border-width:@w; 
     border-color:transparent @c transparent transparent; 
     border-style:dashed solid dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc)    
{
     border-width:@w; 
     border-color:@c transparent transparent transparent; 
     border-style:solid dashed dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc)    
{
     border-width:@w; 
     border-color:transparent transparent transparent@c ; 
     border-style:dashed dashed dashed solid;
}
//都会执行下面的@_
.triangle(@_,@w:5px,@c:#ccc) 
{
    width:0; 
    height:0; 
    overflow:hidden;
}
.sanjiao {.triangle(top);}       
编译后-->
.sanjiao 
{
    width:0; 
    height:0; 
    overflow:hidden;
    border-width:5PX; 
    border-color:transparent transparent #CCC transparent; 
    border-style:dashed dashed solid dashed;
}
  • 运算
@text_01:300px;
.box02 {width:@text_01+20;} 编译后-->  .box02 {width:320px;}
  • 嵌套
.list 
{
    width:30px;
    a {color:yellow;}          //编译后-->.list a {color:yellow;}
    /* &代表上一层选择器 */
    a {&:hover:color:red}     //编译后--> .list a:hover {color:red;}
}
  • 避免编译
.text_03 {width:~’calc(300px-30px);}

CSS预处理技术总结(一)Less

css预处理技术已经发展的比较成熟了,通过css预处理技术可以很好的提升css的编程性,提高css代码的开发效率和可维护性,目前比较热门的相关技术有Sass、Less CSS、Stylus、Compa...

sass与less的区别总结

sass 与 less 的区别与学习 一、安装sass与less sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!);方法如下g...

Less的点滴总结

Less is more than css. LESS 是动态的样式表语言,通过简洁明了的语法定义,使编写 CSS 的工作变得非常简单。 LESS 可以直接在客户端使用,也可以在服务器端使...

less简单的入门知识总结

less的注释:/**/ 会编译出来,作为注释保存在css文件里面 // 仅仅是注释,不会再被编译less的变量//@变量名:变量值; @red:red; body{ backgr...

Sass、LESS 和 Stylus区别总结

CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。1.什么是 CSS ...

Linux中查看文本文件内容命令cat/tac/nl/more/less/head/tail/vi总结

概述在Linux系统下,有很多命令可以查看文本文件的内容,如cat/tac/nl/more/less/head/tail等命令,当然还有vi/nano等文本编辑器。在这里,我只介绍其中自己常用的一部分...

Sass、LESS 和 Stylus区别总结

CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架。本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。 1.什么是 ...

Linux less命令总结

Linux less命令简介 less命令可以对文件或其它输出进行分页显示,与moe命令相似,但是比more命令要强大许多。 在 less 中导航命令类似于 vi,如下: 1 搜索 ...

sublime 经验总结 主题有 less2css

1. 安装插件 https://sublime.wbond.net/installation#Simple 2.
  • c_cyoxi
  • c_cyoxi
  • 2014年07月05日 00:32
  • 6745

动态CSS - LESS学习总结

动态的 css——less http://www.cnblogs.com/yjzhu/archive/2012/11/14/2770332.html less 是一种样式语言,它将 css 赋予了动态...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:less总结
举报原因:
原因补充:

(最多只允许输入30个字)