less学习笔记 27/8/17

2018-06-24 01:48:11来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

less最新官网

http://less.bootcss.com/

 

Less 是一种动态的样式语言。Less扩展了CSS的动态行为,比如说,设置变量(Variables)、混合书写模式(mixins)、操作(operations)和功能(functions)等等,最棒的是,Less使用了现有的CSS语法,也就是说,你可以直接把你现成的样式文件“style.css”直接改成“style.less”,他也能正常工作。如:


<link rel="stylesheet/less" href="less/style.less" />


Less现在可以在客户端(如:IE+,Webkit,Firefox)和服务器(如node.js)上运行。前面也说过Less是CSS的一种扩展,他不但向后兼容,而且在现有的CSS语法基础上增加许多额外的功能。

LESS的基础语法基本上分为以下几个方面:变量、混合(Mixins)、嵌套规则、运算、函数、作用域等。

1、注释

可以用css的/**/注释,编译成css文件时,该注释会被保留。

也可以用双斜杠//注释,编译成css文件时,该注释不会被保留。

 

2、变量

必须用@开始,推荐采用驼峰式命名。如:@变量名:值
 
/*======== 定义变量===========*/
@color: #4d926f;
 
/*======== 应用到元素中 ========*/ 
#header {    color: @color;}          h2 {    color: @color;}
 
注:在Less中的变量实际上就是一个“常量”,因为它们只能被定义一次。

@arguments变量

例:
.border_arg(@w:30px, @c: red, @x: solid) {
border: @arguments;
}
 

3、混合(mixin)

混合其实就是一种嵌套,它充许你将一个类嵌入到另一个类中,而被嵌入的这个类也称为是一个变量。换句话说,你可以用一个类定义CSS,然后把整个为当作一个变量来使用,嵌入到另一人类中当作他的属性;另外混合也像一个带有参数的functions,如下在的例子:
 
/*========= 定义一个类 ===========*/
.roundedCorners(@radius:5px) {   
 -moz-border-radius: @radius;   
 -webkit-border-radius: @radius;   
 border-radius: @radius;
}
/*========== 定义的类应用到另个一个类中 ===========*/
#header {    
.roundedCorners();   //调用时,不带参数混合,不用写括号
}
#footer {    
.roundedCorners(10px);
}
混合有:不带参数混合、带参数混合、带默认参数混合。
 

4、匹配模式

相当于js当中的if(但不完全是),它要满足条件后才能匹配。
 
.pos(a) {
position: absolute;
}
.pos(r) {
position: relative;
}
.pos(f) {
position: fixed;
}
.pos(@_) {
width:200px;
}
使用时:
.myDiv {
.pos(r);
}
 
@_  是固定写法,意思是以上不管哪个匹配到或者没有匹配到,都要加上里面的属性。
 

5、运算

less中,任何数字、颜色、变量都可以参与运算,运算应该被包裹在括号中。 常见运算如:+  -  *  / 

例:
@w: 300px;
 
.box {
width:(@w + 20) * 10;   //运算中,只有一个带单位就行
color: #ccc - 20; //实际开发中不常用
}

6、嵌套规则

例:
.list {
width: 300px;
li {
height: 30px;
}
a {
float: left;
&: hover {
color: red;
}
}
}
& 代表它的上一级选择器。
 
实际开发中,尽量少用多重嵌套,减少DOM查询,可提高页面加载性能
 

7、避免编译

需求:有时需要输出一些不正确的css语法或less不认识的语法。
 
办法:可以在字符串前加一个波浪号+引号    ~‘ ’
 
例:
width: ~"calc(100% - 10)";
 
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:利用padding——实现高度可控的分隔线

下一篇:使用webpack热加载,开发多页面web应用