less学习笔记 27/8/17

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

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：less学习笔记 27/8/17

关键词：