javaless函数_less使⽤⼩结
Less 是⼀门 CSS 预处理语⾔，它扩展了 CSS 语⾔，增加了变量、Mixin(混⼊)、函数等特性，使 CSS 更易维护和扩展。Less 可以运⾏在 Node 或浏览器端。
使⽤之前需要安装，可以通过npm来进⾏安装
$ npm install -g less
1.变量
LESS 允许开发者⾃定义变量，变量可以在全局样式中使⽤，使得样式修改起来更加简单。
@mainColor:#E93223;
body{
color: @mainColor;
}
2.Mixin(混⼊)
混合(Mixin)是⼀种将⼀组属性从⼀个规则集包含(或混⼊)到另⼀个规则集的⽅法。
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.
bordered();
}
.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了
3.嵌套
假设我们有以下 CSS 代码：
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
⽤ Less 语⾔我们可以这样书写代码
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
⽤ Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。
css变量你还可以使⽤此⽅法将伪选择器(pseudo-selectors)与混合(mixins)⼀同使⽤。下⾯是⼀个经典的 clearfix 技巧，重写为⼀个混合(mixin) (& 表⽰当前选择器的⽗级)
.clearfix {
display: block;
zoom:1;&:after {
content:" ";
display: block;
font-size: 0;
height:0;
clear: both;
visibility: hidden;
}
}
4.导⼊
“导⼊”的⼯作⽅式和你预期的⼀样。你可以导⼊⼀个 .less ⽂件，此⽂件中的所有变量就可以全部使⽤了。如果导⼊的⽂件是 .less 扩展名，则可以将扩展名省略掉：
@import "library"; // library.less
@import "typo.css";
.f_left{float: @right;
}
5.运算及函数
算术运算符 +、-、*、/ 可以对任何数字、颜⾊或变量进⾏运算。如果可能的话，算术运算符在加、减或⽐较之前会进⾏单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算⽆效或失去意义，则忽略单位。⽆效的单位换算例如：px 到 cm 或 rad 到 % 的转换。
@back:#333;
.test{
border: 1px solid @back*2;
background: lighten(#000, 10%);
color:darken(#000, 10%);
}
saturate(@color, 10%); //饱和度增加 10%
desaturate(@color, 10%); //饱和度降低 10%
lighten(@color, 10%); //亮度增加 10%
darken(@color, 10%); //亮度降低 10%
fadein(@color, 10%); //透明度增加 10%
fadeout(@color, 10%); //透明度降低 10%
fade(@color, 50%); //设定透明度为 50%
6.命名空间和访问符
有时，出于组织结构或仅仅是为了提供⼀些封装的⽬的，你希望对混合(mixins)进⾏分组。你可以⽤ Less 更直观地实现这⼀需求。假设你希望将⼀些混合(mixins)和变量置于 #bundle 之下，为了以后⽅便重⽤或分发：
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做：
#header a {
color: orange;
#bundle.button();//还可以书写为 #bundle > .button 形式
}
7.作⽤域
Less 中的作⽤域与 CSS 中的作⽤域⾮常类似。⾸先在本地查变量和混合(mixins)，如果不到，则从“⽗”级作⽤域继承。
@var: red;
#page {
@var: white;
#header {
color: @var; //white
}
}
与 CSS ⾃定义属性⼀样，混合(mixin)和变量的定义不必在引⽤之前事先定义。因此，下⾯的 Less 代码⽰例和上⾯的代码⽰例是相同的：@var: red;
#page {
#header {
color: @var; //white
}
@var: white;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。