1 简介
less是一门css的预处理语言,less是css的增强版,通过less可以编写更少的代码,实现更强大的样式
在less总添加了许多的新特性,像对变量的支持,对mixin的支持,less的语法大体和css预语法一致,但是less中增添了许多对css功能的拓展。
所以浏览器无法直接执行less代码,要执行必须先将less转换为css,然后再由浏览器执行。
Less 编译工具:
2 less使用
2.1 注释
/*
* 一个块注释
* style comment!
*/
// 这一行被注释掉了!
div {
color: red;
}
2.2 变量
//变量的语法
@a:200px;
@b:200px;
@c:Box1;
.Box1{
width:@a;
}
//作为类名,或者一部分使用时,必须以@{变量名}的形式使用
.@{c}{
width: @a;
background-color: #8fd76b;
background-image: url("@{c}/1.png");
color: $background-color;
}
- 延迟加载(Lazy Evaluation),当一个变量被声明多次,会取最后一次的值,并从当前作用域往外寻找变量。
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var;
@var: 3;
}
one: @var;
}
/* 结果 */
.class {
one: 1;
}
.class .brass {
three: 3;
}
2.3 嵌套(nesting)
Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
2.4 父选择器 (Parent Selectors)
在嵌套规则中, & 表示父选择器,常用于给现有选择器添加伪类。
.header {
a {
color: blue;
&:hover {
color: green;
}
}
}
.header a {
color: blue;
}
.header a:hover {
color: green;
}
如果没有 &,会被编译成后代选择器 a :hover。
除此之外,& 还能用于生成重复类名:
.button {
&-ok {
background-image: url('ok.png');
}
&-cancel {
background-image: url('cancel.png');
}
&-custom {
background-image: url('custom.png');
}
}
.button-ok {
background-image: url('ok.png');
}
.button-cancel {
background-image: url('cancel.png');
}
.button-custom {
background-image: url('custom.png');
}
3 混合(Mixins)
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方式,可理解为复制粘贴。
3.1 普通混合和不带输出的混合
/* 后面不加括号 编译成CSS后 该类也会被输出 加上()后不会输出 */
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
3.2 带参数的混合(Parametric Mixins)
3.2.1 混合带参数,参数需要按顺序传递
.border(@width, @style, @color) {
border: @width @style @color;
}
div {
.border(1px, solid, #ccc);
}
div {
border: 1px solid #ccc;
}
3.2.2 混合带参数并有默认值
- 需注意的是,就算有默认值,也要按顺序传递
.border(@width, @style, @color: #ccc) {
border: @width @style @color;
}
div {
.border(1px, solid);
}
// 会出错
.border(@width: 1px, @style, @color) {
border: @width @style @color;
}
div {
.border(solid, #ccc);
}
3.3 命名参数
可以在向混合传参是指定参数名称,从而不需要按顺序传入
.border(@width, @style, @color: #ccc) {
border: @width @style @color;
}
div {
.border(@style: solid, @color: red, @width: 100px);
}
3.4 @arguments 变量
@arguments
变量包含了传入的所有参数
.Box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
-webkit-Box-shadow: @arguments;
-moz-Box-shadow: @arguments;
Box-shadow: @arguments;
}
.big-block {
.Box-shadow(2px, 5px);
}
.big-block {
-webkit-Box-shadow: 2px 5px 1px #000;
-moz-Box-shadow: 2px 5px 1px #000;
Box-shadow: 2px 5px 1px #000;
}
3.5 匹配模式(Pattern-matching)
在多个相同的混合中(参数个数必须相同),匹配特定的混合。
.mixin(dark, @color) {
color: darken(@color, 10%);
}
.mixin(light, @color) {
color: lighten(@color, 10%);
}
// @_ 表示匹配所有
.mixin(@_, @color) {
display: block;
}
@switch: light;
.class {
.mixin(@switch, #888);
}
.class {
color: #a2a2a2;
display: block;
}
4 运算(Operations)
- 计算结果以操作数最左侧的单位类型为准
@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm - 5mm; // -1.5cm
@conversion-3: 3.1 * 2cm; // 6.2cm
@conversion-4: 4px / 2; // 4px / 2
// conversion is impossible
@incompatible-units: 1cm - 1px; // 0.97354167cm
// example with variables
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%
@color: #224488 / 2; // #112244
background-color: #112244 + #111; // #223355
5 继承(Extend)
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
5.1 Extend “all”
.a.b.test,
.test.c {
color: orange;
}
.test {
&:hover {
color: green;
}
}
.replacement:extend(.test all) {
}
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
color: orange;
}
.test:hover,
.replacement:hover {
color: green;
}
6 避免编译
通过加引号可以避免 Less 编译,直接把内容输出到 CSS 中
.banner .inline .header {
width: '100px + 100px';
height: 100px + 100px;
}
.banner .inline .header {
width: '100px + 100px';
height: 200px;
}
原文地址:https://www.jb51.cc/wenti/3286745.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。