less笔记-less概要

刺骨的言语ヽ痛彻心扉 2022-09-25 13:22 209阅读 0赞

一、概要

As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.

二、语法

1、声明与使用：

@变量名：变量值；

@myColor：#0000dd；
    @pureBlue：@myColor+#002；
    .myClass{
    	color：@pureBlue；
    }

编译结果：

.myClass{
    	color:#0000ff;
    }

2、混合：mixins

在样式定义中引用其它样式定义。

.grayBorder{
    	border:1px solid gray;
    }
    #myDiv{
    	color:#008;
    	.grayBorder;
    }

编译结果：

被引用的样式将出现在被引用处，可被多次引用。

3、嵌套规则：nested rules

css中：

#myDiv{
    	border：1px solid gray；
    }
    #myDiv a{
    	color：blue；
    }
    #myDiv p{
    	color：#333；
    }

等价于less中：

#myDiv{
    	border：1px solid gray；
    	a {
    		color：blue；
    	}
    	p{
    		color：#333；
    	}
    }

说明： You can also bundle pseudo-selectors with your mixins using this method. Here's the classic clearfix hack, rewritten as a mixin ( `&`  represents the current selector parent):

你也能塞入虚假的（pseudo）选择器，通过使用这种方法的混合。下面有个经典的清除浮动的例子，被以混合的方式重写。（&代表当前的选择器的父亲），例：

.clearfix {
    	display: block;
    	zoom: 1;
    	&:after {
    		content: " ";
    		display: block;
    		font-size: 0;
    		height: 0;
    		clear: both;
    		visibility: hidden;
    	}
    }

上例中&即代表了.clearfix。

4、媒体查询与嵌套媒体查询：Media query bubbling and nested media queries

Media queries can be nested in the same way as selectors. Selectors are copied into the body of the media query。媒体查询也能像选择器一样被嵌套。选择器被复制在媒体查询体中。

less：

.screencolor{
    	@media screen {
    		color: green;
    		@media (min-width:768px) {
    			color: red;
    		}
    	}
    	@media tv {
      		color: black;
    	}
    }

编译后：选择器.screencolor被复制给被包含的每个媒体查询（包括内层嵌套的），且媒体查询的属性也都相同，可以有不同属性吗？（暂不讨论）

@media screen {
    	.screencolor {
      		color: green;
    	}
    }
    @media screen and (min-width: 768px) {
      	.screencolor {
      		color: red;
     	}
    }
    @media tv {
    	.screencolor {
        		color: black;
     	}
    }

5、操作：Operation

less中，任何number、color、variable都能被操作。例：

@base: 5%;
    @filler: @base * 2;
    @other: @base + @filler;
    color: #888 / 4;
    background-color: @base-color + #111;
    height: 100% / 2 + @filler;

上面的某些操作非常强大，此外，less能理解数值与单位之间的差别，并能自动完善，如：

@myVar：1px+10；

less会将单位px用于最终的结果，即myVar值为11px。

6、函数：function

说明;Less provides a variety of functions which transform colors, manipulate strings and do maths. They are documented fully in the function reference.

less函数手册：*http://www.runoob.com/manual/lessguide/functions/*

例：

@base: #f04615;
    @width: 0.5;
    .class {
    	width: percentage(@width); // returns `50%`
    	color: saturate(@base, 5%);
    	background-color: spin(lighten(@base, 25%), 8);
    }

7、命名空间与访问权：namespace & accessors

说明：Sometimes, you may want to group your mixins, for organizational purposes, or just to offer some encapsulation. You can do this pretty intuitively in Less, say you want to bundle some mixins and variables under `#bundle`, for later reuse or distributing:

有时，为了达到组织的目的，你可能想要为你的混合分组，或仅仅为了提供一些包装（encapsulation，n，包装，封装）。在less中你能相当直观地完成它，比如说你想在\#bundle下融入一些混合或变量，以便以后重用或分配。

#bundle {
    	.button {
        		display: block;
        		border: 1px solid black;
        		background-color: grey;
        		&:hover {
          			background-color: white
        		}
      	}
      	.tab { ... }
      	.citation { ... }
    }

上面的bundle即是一个命名空间。接下来，如果想混合\#bundle下的.button类，则可以下方式使用：

#header a {
      	color: orange;
      	#bundle > .button;
    }

**注意点：一个namespace内声明的变量，其作用范围（scope）将被限定在该命名空间内，外界无法通过与访问类相似的方式访问该变量！即以下是错误的：**

\#namespace > @myVar;

8、作用范围：Scope

说明：Scope in Less is very similar to that of programming languages. Variables and mixins are first looked for locally, and if they aren't found, the compiler will look in the parent scope, and so on.  
变量在less中的作用域与编程语言相似。例：

@var: red;
    #page {
    	@var: white;
     	 #header {
        	color: @var; // white
      	}
    }

说明： Variables and mixins do not have to be declared before being used so the following Less code is identical to the previous example:  
变量与混合没必要一定在使用的位置之前声明（强调位置不重要，但一定要声明！）。例：

@var: red;
    #page {
      	#header {
        		color: @var; // white
      	}
     	@var: white;
    }

原因： Variables are lazy loaded and do not have to be declared before being used.变量采用的是慢加载，因此没必要一定在使用之前的位置声明。  
例：

.lazy-eval-scope {
      	width: @var;
      	@a: 9%;
    }
    @var: @a;
    @a: 100%;

编译后为：

.lazy-eval-scope {
      	width: 9%;
    }

9、注释：comments

与CSS不同之处在于，less中块注释（/\*\*/）与行注释（//）都能使用。

10、导入：Importing

说明：Importing works pretty much as expected. You can import a `.less` file, and all the variables in it will be available. The extension is optionally specified for `.less` files.

导入工作与期望的相当接近。你可导入一个.less文件和其中的所有将被获取到的变量。这项扩展对.less文件是明确可选择的。示例：

@import "library"; // library.less
    @import "typo.css";

以上笔记参考：*http://www.runoob.com/manual/lessguide/features/\#features-overview-feature*