值得参考的 10 个 LESS CSS 实例
来源:互联网 发布:php基础知识视频 编辑:程序博客网 时间:2024/06/06 20:18
值得参考的 10 个 LESS CSS 实例
摘要:LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员。你可以使用变量、函数、混合、继承等多种编程常用方法来编写 CSS,以更少的代码完成更多的样式。
LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能,使之更适合程序员。你可以使用变量、函数、混合、继承等多种编程常用方法来编写 CSS,以更少的代码完成更多的样式。
学习这些工具最好的方法是通过各种实例快速入门,今天我们向你介绍 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 这样的工具来将 LESS 编译成 CSS 。
如果我使用的是 Sass
如果你更喜欢的是 Sass 而不是 LESS,没问题,这两个工具都很棒,它们的语法有一点不同,请看上图。
好了,不废话了,我们开始本文的主题!
圆角
CSS3 一个非常基本的新属性可以快速的生产圆角效果,如上图所示。要使用 CSS3 的圆角效果我们必须针对不同的浏览器定义各自的前缀,而如果使用了 LESS 就可以不用那么麻烦。
1. 简单的圆角半径
我的第一个 LESS 代码是我最简单的 LESS 代码之一,我需要设置圆角的半径,而且我希望使用一个变量来调整这个半径大小。
下面代码使用 mixin 技术,通过定义 .border-radius 并接收一个 radius 参数,该参数默认值是 5px,你可以在多个地方重复使用该 mixin 方法:
01
/* Mixin */
02
.border-radius (@radius:
5px
) {
03
-webkit-border-radius: @radius;
04
-moz-border-radius: @radius;
05
border-radius: @radius;
06
}
07
08
/* Implementation */
09
#somediv {
10
.border-radius(
20px
);
11
}
将这个 less 编译成 css 后的结果是:
1
/* Compiled CSS */
2
#somediv {
3
-webkit-border-radius:
20px
;
4
-moz-border-radius:
20px
;
5
border-radius:
20px
;
6
}
2. 四角的半径定制
如果你希望用户可自由定制四个角的半径,那么我们需要对上面代码做下改进。
使用4个变量分别代表四个边角的半径大小:
01
/* Mixin */
02
.border-radius-custom (@topleft:
5px
, @topright:
5px
, @bottomleft:
5px
, @bottomright:
5px
) {
03
-webkit-border-radius: @topleft @topright @bottomright @bottomleft;
04
-moz-border-radius: @topleft @topright @bottomright @bottomleft;
05
border-radius: @topleft @topright @bottomright @bottomleft;
06
}
07
08
/* Implementation */
09
#somediv {
10
.border-radius-custom(
20px
,
20px
,
0px
,
0px
);
11
}
编译后的 CSS
1
/* Compiled CSS */
2
#somediv {
3
-webkit-border-radius:
20px
20px
0px
0px
;
4
-moz-border-radius:
20px
20px
0px
0px
;
5
border-radius:
20px
20px
0px
0px
;
6
}
3. 方块阴影 Box Shadow
另外一个 CSS3 经常用到的属性是 box-shadow,该属性也有不同浏览器的前缀要求,而使用 LESS 的话可以这样:
01
/* Mixin */
02
.box-shadow (@x:
0px
, @y:
3px
, @blur:
5px
, @alpha:
0.5
) {
03
-webkit-box-shadow: @x @y @blur rgba(
0
,
0
,
0
, @alpha);
04
-moz-box-shadow: @x @y @blur rgba(
0
,
0
,
0
, @alpha);
05
box-shadow: @x @y @blur rgba(
0
,
0
,
0
, @alpha);
06
}
07
08
/* Implementation */
09
#somediv {
10
.box-shadow(
5px
,
5px
,
6px
,
0.3
);
11
}
生成的 CSS:
1
/* Compiled CSS */
2
#somediv {
3
-webkit-box-shadow:
5px
5px
6px
rgba(
0
,
0
,
0
,
0.3
);
4
-moz-box-shadow:
5px
5px
6px
rgba(
0
,
0
,
0
,
0.3
);
5
box-shadow:
5px
5px
6px
rgba(
0
,
0
,
0
,
0.3
);
6
}
4. 元素过渡效果 Transition
CSS3 的过渡使用起来更加麻烦,你必须最大化的支持各种浏览器,因此你需要定义 5 个前缀:
01
/* Mixin */
02
.transition (@prop:
all
, @time:
1
s, @ease: linear) {
03
-webkit-transition: @prop @time @ease;
04
-moz-transition: @prop @time @ease;
05
-o-transition: @prop @time @ease;
06
-ms-transition: @prop @time @ease;
07
transition: @prop @time @ease;
08
}
09
10
/* Implementation */
11
#somediv {
12
.transition(
all
,
0.5
s, ease-in);
13
}
14
15
#somediv:hover {
16
opacity:
0
;
17
}
转换后的 CSS 代码:
01
/* Compiled CSS*/
02
#somediv {
03
-webkit-transition:
all
0.5
s ease-in;
04
-moz-transition:
all
0.5
s ease-in;
05
-o-transition:
all
0.5
s ease-in;
06
-ms-transition:
all
0.5
s ease-in;
07
transition:
all
0.5
s ease-in;
08
}
09
10
#somediv:hover {
11
opacity:
0
;
12
}
5. 转换/旋转 Transform
你可以使用 CSS3 来对元素进行角度旋转、缩放和倾斜等效果:
01
/* Mixin */
02
.transform (@rotate:
90
deg, @scale:
1
, @skew:
1
deg, @translate:
10px
) {
03
-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
04
-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
05
-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
06
-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
07
transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
08
}
09
10
/* Implementation */
11
#someDiv {
12
.transform(
5
deg,
0.5
,
1
deg,
0px
);
13
}
生成的 CSS:
1
/* Compiled CSS*/
2
#someDiv {
3
-webkit-transform: rotate(
5
deg) scale(
0.5
) skew(
1
deg) translate(
0px
);
4
-moz-transform: rotate(
5
deg) scale(
0.5
) skew(
1
deg) translate(
0px
);
5
-o-transform: rotate(
5
deg) scale(
0.5
) skew(
1
deg) translate(
0px
);
6
-ms-transform: rotate(
5
deg) scale(
0.5
) skew(
1
deg) translate(
0px
);
7
transform: rotate(
5
deg) scale(
0.5
) skew(
1
deg) translate(
0px
);
8
}
颜色渐变 Gradients
渐变是 CSS3 最复杂的属性之一,有上百万中不同的设置组合,但我们常用的无非几种。
6. 线性渐变 Linear Gradient
我们还是从最简单的开始,实现两个不同颜色之间的渐变,你可以定义开始颜色和最终颜色,这里我们使用最新的渐变语法,浏览器的支持情况请看这里。
01
/* Mixin */
02
.gradient (@origin:
left
, @start:
#ffffff
, @
stop
:
#000000
) {
03
background-color
: @start;
04
background-image
: -webkit-linear-gradient(@origin, @start, @stop);
05
background-image
: -moz-linear-gradient(@origin, @start, @stop);
06
background-image
: -o-linear-gradient(@origin, @start, @stop);
07
background-image
: -ms-linear-gradient(@origin, @start, @stop);
08
background-image
: linear-gradient(@origin, @start, @stop);
09
}
10
11
/* Implementation */
12
#someDiv {
13
.gradient(
left
,
#663333
,
#333333
);
14
}
生成的 CSS
1
/* Compiled CSS */
2
#someDiv {
3
background-color
:
#663333
;
4
background-image
: -webkit-linear-gradient(
left
,
#663333
,
#333333
);
5
background-image
: -moz-linear-gradient(
left
,
#663333
,
#333333
);
6
background-image
: -o-linear-gradient(
left
,
#663333
,
#333333
);
7
background-image
: -ms-linear-gradient(
left
,
#663333
,
#333333
);
8
background-image
: linear-gradient(
left
,
#663333
,
#333333
);
9
}
7. 快速渐变 Quick Gradient
创建渐变最讨厌的事情之一就是找出你的颜色。有时你只是想快速在现有颜色上做一些渐变效果。
这里我们使用从透明开始到全黑的渐变效果,你需要设置的就是最初颜色已经透明度 alpha 值:
01
/* Mixin */
02
.quick-gradient (@origin:
left
, @alpha:
0.2
) {
03
background-image
: -webkit-linear-gradient(@origin, rgba(
0
,
0
,
0
,
0.0
), rgba(
0
,
0
,
0
,@alpha));
04
background-image
: -moz-linear-gradient(@origin, rgba(
0
,
0
,
0
,
0.0
), rgba(
0
,
0
,
0
,@alpha));
05
background-image
: -o-linear-gradient(@origin, rgba(
0
,
0
,
0
,
0.0
), rgba(
0
,
0
,
0
,@alpha));
06
background-image
: -ms-linear-gradient(@origin, rgba(
0
,
0
,
0
,
0.0
), rgba(
0
,
0
,
0
,@alpha));
07
background-image
: linear-gradient(@origin, rgba(
0
,
0
,
0
,
0.0
), rgba(
0
,
0
,
0
,@alpha));
08
}
09
10
/* Implementation */
11
#somediv {
12
background-color
: BADA
55
;
13
.quick-gradient(
top
,
0.2
);
14
}
生成的 CSS:
1
/* Compiled CSS */
2
#somediv {
3
background-image
: -webkit-linear-gradient(
top
, rgba(
0
,
0
,
0
,
0
), rgba(
0
,
0
,
0
,
0.2
));
4
background-image
: -moz-linear-gradient(
top
, rgba(
0
,
0
,
0
,
0
), rgba(
0
,
0
,
0
,
0.2
));
5
background-image
: -o-linear-gradient(
top
, rgba(
0
,
0
,
0
,
0
), rgba(
0
,
0
,
0
,
0.2
));
6
background-image
: -ms-linear-gradient(
top
, rgba(
0
,
0
,
0
,
0
), rgba(
0
,
0
,
0
,
0.2
));
7
background-image
: linear-gradient(
top
, rgba(
0
,
0
,
0
,
0
), rgba(
0
,
0
,
0
,
0.2
));
8
}
8. 镜像效果 Webkit Reflection
CSS3 中的镜像效果在浏览器都是普遍支持的。你需要做的就是设置长度和不透明度这两个参数,很简单:
01
/* Mixin */
02
.reflect (@length:
50%
, @opacity:
0.2
){
03
-webkit-box-reflect:
below
0px
-webkit-gradient(linear,
left
top
,
04
left
bottom
, from(
transparent
),
05
color-stop(@length,
transparent
), to(rgba(
255
,
255
,
255
,@opacity)));
06
}
07
08
/* Implementation */
09
#somediv {
10
.reflect(
20%
,
0.2
);
11
}
生成的 CSS:
1
/* Compiled CSS */
2
3
#somediv {
4
-webkit-box-reflect:
below
0px
-webkit-gradient(linear,
left
top
,
left
bottom
, from(
transparent
), color-stop(
20%
,
transparent
), to(rgba(
255
,
255
,
255
,
0.2
)));
5
}
颜色计算 Color Math
LESS 和 Sass 最独特的功能就是颜色计算函数,你可以轻松使用 LESS 来创建各种调色板,下面是两个简单的例子。
9. 互补色方案 Complementary Color Scheme
这里我们使用一个基本色,然后通过彩色旋转以及加亮和变暗方法扩展到5个不同色板。为了生成互补色,我们使用 spin 将颜色旋转 180 度:
01
/* Mixin */
02
@base:
#663333
;
03
@complement
1:
spin(@base,
180
);
04
@complement
2:
darken(spin(@base,
180
),
5%
);
05
@lighten
1:
lighten(@base,
15%
);
06
@lighten
2:
lighten(@base,
30%
);
07
08
/* Implementation */
09
.one {
color
: @base;}
10
.two {
color
: @complement
1
;}
11
.three {
color
: @complement
2
;}
12
.four {
color
: @lighten
1
;}
13
.five {
color
: @lighten
2
;}
生成的 CSS:
1
/* Compiled CSS */
2
.one {
color
:
#663333
;}
3
.two {
color
:
#336666
;}
4
.three {
color
:
#2b5555
;}
5
.four {
color
:
#994d4d
;}
6
.five {
color
:
#bb7777
;}
10. 颜色微调 Subtle Color Scheme
互补色很有用,但在网页设计中另外一个更有用的就是颜色微调:
01
/* Mixin */
02
@base:
#663333
;
03
@lighter
1:
lighten(spin(@base,
5
),
10%
);
04
@lighter
2:
lighten(spin(@base,
10
),
20%
);
05
@darker
1:
darken(spin(@base,
-5
),
10%
);
06
@darker
2:
darken(spin(@base,
-10
),
20%
);
07
08
/* Implementation */
09
.one {
color
: @base;}
10
.two {
color
: @lighter
1
;}
11
.three {
color
: @lighter
2
;}
12
.four {
color
: @darker
1
;}
13
.five {
color
: @darker
2
;}
生成的 CSS:
1
/* Compiled CSS */
2
.one {
color
:
#663333
;}
3
.two {
color
:
#884a44
;}
4
.three {
color
:
#aa6355
;}
5
.four {
color
:
#442225
;}
6
.five {
color
:
#442225
;}
结论
到这里我们这篇文章就结束了,主要的目的是讲述使用 LESS 处理一些常用的 CSS3 处理效果。
英文原文, OSCHINA原创翻译- 值得参考的 10 个 LESS CSS 实例
- 值得参考的 10 个 LESS CSS 实例
- LESS CSS 常用的10个实例
- 值得参考的博客地址
- 2017年值得学习的3个CSS特性
- 四月份值得关注的15个JavaScript和CSS库
- 值得参考的sql语句
- Less CSS框架的简介
- 设计师值得关注的10个网站
- 10个值得关注的Geek网站
- less css
- Less-CSS
- 关于Less里的css一些规则,了解入门less
- IDEA编译less插件LESS CSS Compiler的安装
- less实例
- Less入门一 概述 我的第一个less
- 值得参考的一个WEBGIS网站
- 值得参考的几本算法书
- 08 Spring 操作持久层 (融合 Mybatis)最简使用(使用 Mybatis Generator)
- 文件的上传,下载,多个文件生成压缩包,文件的删除
- 51nod 1108 距离之和最小 V2【思维+求中位数】
- 多线程
- 番外 02: Spring 之使用 JAVA 操作Mysql数据库(为何要用ORM)Spring整合 Mybatis前基础
- 值得参考的 10 个 LESS CSS 实例
- Tomcat容器管理安全的几种验证方式
- 2016年前端技术观察
- 数据结构笔记之数据结构基本概述(二)
- DBSCAN聚类算法
- MySQL group by后的结果将每组某VARCHAR字段字符串连接起来
- 限流算法实现
- Java多线程学习笔记(一)
- 番外 03:Java日志框架引入 log4j2(Log For Java version2.x)