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);}

Less的点滴总结

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

Less变量详解

普通的变量 Css默认不支持变量,当我们使用less之后就可以使用。   其定义方式是 @变量名:值 ,如下,我们定义一个变量green,设置一个颜色green,然后将网页背景设置为绿色: @g...
  • lidiya007
  • lidiya007
  • 2016年10月08日 17:51
  • 2283

less笔记-变量

一、less变量的直观优点 比较下面CSS 写法与 less写法: css: a, .link { color: #428bca; } .widget { color: #fff; ...
  • qq_19865749
  • qq_19865749
  • 2016年09月11日 12:56
  • 840

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

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

LESS总结

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。1、安装:①安装js解析器node.js;③使用...
  • duola8789
  • duola8789
  • 2016年12月21日 22:09
  • 165

less字符串拼接

@iconUrl: "/img";// mixin .c-icon(@bgImg) { background-image: url(@bgImg); } .bg { @someImgU...
  • butterfly5211314
  • butterfly5211314
  • 2017年05月23日 21:08
  • 1936

学会如何使用LESS(一)----变量和混合

学会如何使用LESS(一)----变量和混合
  • m0_38099607
  • m0_38099607
  • 2017年06月09日 09:08
  • 3786

使用less的loop(循环)方法根据类名生成元素

less是一个功能强大的css超集,可以方便我们进行css代码的书写,less具有很多现代语言的特性,而不是简单的标记语言,包括分支和循环,这里我们使用循环来进行元素的自动化生成。下面的代码需要一些l...
  • cithegod
  • cithegod
  • 2016年11月25日 21:06
  • 4607

模板类 std::less

定义: 标准库中不小于或不等于的函数对象类。    下面是其在C++11中的定义: using namespace std; template struct less { ...
  • lklzyy
  • lklzyy
  • 2014年03月29日 20:12
  • 2791

less-带参数的混合(arguments)

1、编辑less: .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radi...
  • Mengzy007
  • Mengzy007
  • 2017年06月19日 23:52
  • 408
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:less总结
举报原因:
原因补充:

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