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简介 Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。 本质上,Less 包含一套自定义的...

LESS总结

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

动态CSS - LESS学习总结

动态的 css——less http://www.cnblogs.com/yjzhu/archive/2012/11/14/2770332.html less 是一种样式语言,它将 css 赋予了动态...

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

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

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 ...

Sass、LESS 和 Stylus区别总结

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

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

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

前端学习总结(十六)前端工具之bower,glup,less总结

bower,gulp,less实践总结
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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