英文原文：10 LESS CSS Examples You Should Steal for Your Projects

LESS, Sass 和其他 CSS 预处置器是一种超棒的办法用来扩大 CSS 功用，使之更合适顺序员。你可使用变量、函数、混杂、承继等多种编程经常使用办法来编写 CSS，以更少的代码完成更多的款式。

进修这些Tools最好的办法是经过各类实例疾速入门，今日我们向你引见 10 个十分有效的运用 Less CSS 的实例。

运用 LESS

假如你还没接触过 LESS CSS ，可以浏览下面两篇文章：

• Using Less.js to Simplify Your CSS3
• How to Build a Responsive Frankenstein Framework With LESS

我该怎么运用这些实例

我建议是你间接可以把本文中的代码复制粘贴到你的 .less 文件。

可让你这些文件自力于你的项目，经过 “@import “starter.less” 来引入。

你还可使用相似 Less.app, CodeKit 如许的Tools来将 LESS 编译成 CSS 。

假如我运用的是 Sass

假如你更爱好的是 Sass 而不是 LESS，没问题，这两个Tools都很棒，它们的语法有一点分歧，请看上图。二者更具体的比拟请看这里。

好了，不空话了，我们Start本文的主题！

圆角

CSS3 一个十分根本的新属性可以疾速的生产圆角后果，如上图所示。要运用 CSS3 的圆角后果我们必需针对分歧的阅读器定义各自的前缀，而假如运用了 LESS 就能够不必那末费事。

1. 容易的圆角半径

我的第一个 LESS 代码是我最容易的 LESS 代码之一，我需求设置圆角的半径，并且我盼望运用一个变量来调剂这个半径巨细。

下面代码运用 mixin 技巧，经过定义 .border-radius 并接纳一个 radius 参数，该参数默许值是 5px，你可以在多个地方反复运用该 mixin 办法：

/* Mixin */
.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}
 
/* Implementation */
#somediv {
	.border-radius(20px);
}

将这个 less 编译成 css 后的后果是：

/* Compiled CSS */
#somediv {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

2. 四角的半径定制

假如你盼望用户可自在定制四个角的半径，那末我们需求对上面代码做下改良。

运用4个变量辨别代表四个边角的半径巨细：

/* Mixin */
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) {
	-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
	-moz-border-radius: @topleft @topright @bottomright @bottomleft;
	border-radius: @topleft @topright @bottomright @bottomleft;
}
 
/* Implementation */
#somediv {
	.border-radius-custom(20px, 20px, 0px, 0px);
}

编译后的 CSS

/* Compiled CSS */
#somediv {
  -webkit-border-radius: 20px 20px 0px 0px;
  -moz-border-radius: 20px 20px 0px 0px;
  border-radius: 20px 20px 0px 0px;
}

3. 方块暗影 Box Shadow

别的一个 CSS3 常常用到的属性是 box-shadow，该属性也有分歧阅读器的前缀请求，而运用 LESS 的话可以如许：

/* Mixin */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
	-webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
	-moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
	box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}
 
/* Implementation */
#somediv {
	.box-shadow(5px, 5px, 6px, 0.3);
}

生成的 CSS：

/* Compiled CSS */
#somediv {
  -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}

4. 元素过渡后果 Transition

CSS3 的过渡运用起来愈加费事，你必需最大化的支撑各类阅读器，因而你需求定义 5 个前缀：

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) {
	-webkit-transition: @prop @time @ease;
	-moz-transition: @prop @time @ease;
	-o-transition: @prop @time @ease;
	-ms-transition: @prop @time @ease;
	transition: @prop @time @ease;
}
 
/* Implementation */
#somediv {
	.transition(all, 0.5s, ease-in);
} 
 
#somediv:hover {
	opacity: 0;
}

转换后的 CSS 代码：

/* Compiled CSS*/
#somediv {
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  -o-transition: all 0.5s ease-in;
  -ms-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}
 
#somediv:hover {
  opacity: 0;
}

5. 转换/扭转 Transform

你可使用 CSS3 来对元素实行角度扭转、缩放和倾斜等后果：

/* Mixin */
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
	-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
	transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
 
/* Implementation */
#someDiv {
	.transform(5deg, 0.5, 1deg, 0px);
}

生成的 CSS：

/* Compiled CSS*/
#someDiv {
  -webkit-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -moz-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -o-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  -ms-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
  transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px);
}

色彩突变 Gradients

突变是 CSS3 最庞杂的属性之一，有上百万中分歧的设置组合，但我们经常使用的不过几种。

6. 线性突变 Linear Gradient

我们仍是从最容易的Start，完成两个分歧色彩之间的突变，你可以定义Start色彩和终极色彩，这里我们运用最新的突变语法，阅读器的支撑状况请看这里。

/* Mixin */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) {
	background-color: @start;
	background-image: -webkit-linear-gradient(@origin, @start, @stop);
	background-image: -moz-linear-gradient(@origin, @start, @stop);
	background-image: -o-linear-gradient(@origin, @start, @stop);
	background-image: -ms-linear-gradient(@origin, @start, @stop);
	background-image: linear-gradient(@origin, @start, @stop);
}
 
/* Implementation */
#someDiv {
	.gradient(left, #663333, #333333);
}

生成的 CSS

/* Compiled CSS */
#someDiv {
  background-color: #663333;
  background-image: -webkit-linear-gradient(left, #663333, #333333);
  background-image: -moz-linear-gradient(left, #663333, #333333);
  background-image: -o-linear-gradient(left, #663333, #333333);
  background-image: -ms-linear-gradient(left, #663333, #333333);
  background-image: linear-gradient(left, #663333, #333333);
}

7. 疾速突变 Quick Gradient

创立突变最厌恶的工作之一就是找出你的色彩。有时你只是想疾速在现有色彩上做一些突变后果。

这里我们运用从通明Start到全黑的突变后果，你需求设置的就是最后色彩曾经通明度 alpha 值：

/* Mixin */
.quick-gradient (@origin: left, @alpha: 0.2) {
	background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
	background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
 
/* Implementation */
#somediv {
	background-color: BADA55;
	.quick-gradient(top, 0.2);
}

生成的 CSS：

/* Compiled CSS */
#somediv {
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

本文中的一切译文仅用于进修和交换目标，转载请务必注明文章译者、出处、和本文链接。 2KB翻译任务按照 CC 协议，假如我们的任务有进犯到您的权益，请实时联络我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务