Less Css总结

最新推荐文章于 2023-09-22 17:18:05 发布

原创最新推荐文章于 2023-09-22 17:18:05 发布 · 674 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #less

CSS 专栏收录该内容

0 篇文章

订阅专栏

LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (要在服务器中运行，不能再本地运行)，也可以借助Node.js或者Rhino在服务端运行。

在使用less前，你要为你的HTML文件引入相应的文件

其中styles.less是我们自己写的样式文件。style.less的引入必须在less.min.js前面。

一、变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

  // LESS

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

/* 生成的 CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

二、混合(继承)

// LESS

@color: #4D926F;
.common-div(@radius: 5px, @margin: 10px) {
	border: 1px solid @color;
	border-radius: @radius;
	display: inline-block;
	margin: @margin;
}
.div1 {
	.common-div;
}
.div2 {
	.common-div(2px);
}

/* 生成的 CSS */

.div1 {
  border: 1px solid #4d926f;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
}
.div2 {
  border: 1px solid #4d926f;
  border-radius: 2px;
  display: inline-block;
  margin: 10px;
}

三、嵌套

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

/* 生成的 CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

四、运算

less还提供了一个强大的功能——运算。运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

// LESS

@color: #4D9261;
@border: 1px;
@div_display: inline-block;


.div1 {
	display: @div_display;
	border: @border * 2 solid       @color + #111;
}

/* 生成的 CSS */

.div1 {
  display: inline-block;
  border: 2px, solid, #5ea372;
}

五、 @augmentums

@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

// LESS

@div_display: inline-block;


.box-shodow (@x: 1px, @y: 2px, @blur: 1px, @color: rgb(246, 184, 195)) {
	box-shadow: @arguments;
}


.div1 {
	display: @div_display;
	.box-shodow;
}

/* 生成的 CSS */

.div1 {
  display: inline-block;
  box-shadow: 1px 2px 1px #f6b8c3;
}

六、匹配模式

根据传入的参数，我们将会匹配不同的样式。如:

// LESS

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}


@switch: light;
.class {
  .mixin(@switch, #888);
}

/* 生成的 CSS */

.class {
  color: #a2a2a2;
  display: block;
}

具体实现如下：
第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值

less还会根据参数个数进行匹配

// LESS
.div-content (@display, @color: #FF0000) {
	display: @display;
	color: @color;
}
.div-content (@display) {
	display: @display;
}


.div1 {
	.div-content(inline-block);
}

/* 生成的 CSS */

.div1 {
  display: inline-block;
}

七、引导

当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。其实在我看来，引导最主要的就是if/else判断。

// LESS
.max-div (@width) when (@width > 150) {
	background-color: pink;
}
.max-div (@width) when (@width =< 150) {
	background-color: green;
}
.div1 {
	width: 100px;
	.max-div(100px);
}
.div2 {
	width: 200px;
	.max-div(200px);
}

/* 生成的 CSS */

.div1 {
  width: 100px;
  background-color: green;
}
.div2 {
  width: 200px;
  background-color: pink;
}

when关键字用以定义一个导引序列。导引中可用的全部比较运算有： >, >=, =, =<, <。此外，只有关键字true表示布尔真值，除去关键字true以外的值都被视示布尔假。

此外，less css提供

iscolor
isnumber
isstring
iskeyword
isurl

来判断类型。

提供

ispixel
ispercentage
isem

来判断单位，如

// LESS
.btn-gb (@c) when(iscolor(@c)) {
	color: @c;
}
.btn-gb (@c) when(isnumber(@c)) {
	width: @c;
}
.div1 {
	.btn-gb(#FF0000);
}
.div2 {
	.btn-gb(200px);
}

/* 生成的 CSS */
.div1 {
  color: #ff0000;
}
.div2 {
  width: 200px;
}

八、Math 函数

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`

// LESS
.div1 {
	width: round(2.34)px;
}
.div2 {
	width: ceil(3.55)px;
}

/* 生成的 CSS */
.div1 {
  width: 2 px;
}
.div2 {
  width: 4 px;
}

九、作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

// LESS
@color: #FF0000;


#div-common {
	@color: #00FF00;
	.div-child {
		color: @color;
	}
}
.div-common2 {
	color: @color;
}
.div1 {
	#div-common > .div-child;
}
.div2 {
	.div-common2;
}

/* 生成的 CSS */
#div-common .div-child {
  color: #00ff00;
}
.div-common2 {
  color: #ff0000;
}
.div1 {
  color: #00ff00;
}
.div2 {
  color: #ff0000;
}

十、Importing

我们可以通过importing关键字引入less文件或css文件。引入less文件时后缀名可带可不带。

@import "lib.less"; /* 或@import "lib"; */
@import "lib.css";

十一、字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中，像@{name}这样的结构:

// LESS
@base-url: "http://assets.fnord.com";


.div1 {
	background-image: url("@{base-url}/images/bg.png");
}

/* 生成的 CSS */
.div1 {
  background-image: url("http://assets.fnord.com/images/bg.png");
}

如果安装了node.js，那我们可以安装less将less文件解析成css文件。

1. npm install -g less

2. lessc styles.less > styles.css

3. 如果想要压缩版的css, 使用命令: lessc -x styles.less > style.css