Less基础知识
初见Less
- 传统写法
.conten ul {
list-style: none;
}
.conten li {
height: 24px;
line-height: 25px;
padding-left: 15px;
background: url("arr.jpg") no-repeat center left;
}
.conten li a {
text-decoration: none;
color: #535353;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
- Less写法
.conten {
ul{
list-style: none;
}
li{
height: 25px;
line-height: 25px;
padding-left: 15px;
background: url("arr.jpg") no-repeat center left;
a{
text-decoration: none;
color: #535353;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
}
}
正确使用LESS
- 如何使用LESS
LESS文件只有在被编译才能够被浏览器识别 - LESS编译工具
1、Koala，国人开发的全平台的LESS编译工具，网址：http://koala-app.com
2、WinLess，Windows下的LESS编译软件，网址：http://winless.org
3.CodeKit，MAC平台下的LESS编译软件，网址：http://incident57.com/codekit/index.html - 客户端调试方式
首先引用less文件，注意引用时使用link引入，然后将rel属性设置为rel=”stylesheet/less”
然后引用less.js
注意：引入普通js引入方式一致，但是一定要放置在less样式文件之后。
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet/less" href="style.less"/>
<script src="less.min.js"></script>
</head>
<body>
<div class="conten">
<ul>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
<li><a href="">这是测试文档</a></li>
</ul>
</div>
</body>
</html>
style.less
@charset "UTF-8";
//只会在LESS中显示
/*就会在LESS和CSS中显示*/
.conten {
ul{
list-style: none;
}
li{
height: 25px;
line-height: 25px;
padding-left: 15px;
background: url("arr.jpg") no-repeat center left;
a{
text-decoration: none;
color: #535353;
font-family: microsoft yahei, "微软雅黑", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
}
}
style.css
@charset "UTF-8";
/*就会在LESS和CSS中显示*/
.conten ul {
list-style: none;
}
.conten li {
height: 25px;
line-height: 25px;
padding-left: 15px;
background: url("arr.jpg") no-repeat center left;
}
.conten li a {
text-decoration: none;
color: #535353;
font-family: microsoft yahei, "微软雅黑", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
变量（variables）
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<h1>less教程</h1>
</header>
<footer class="widths">
<h1>less教程</h1>
</footer>
</body>
</html>
style.css
header,
footer {
background: #801f77;
}
header h1,
footer h1 {
color: #ffffff;
}
.width {
width: 150px;
}
header {
background: #801f77 url("https://www.baidu.com/img/bdlogo.png");
height: 500px;
}
.class {
one: 1;
}
.class .brass {
three: 3;
}
style.less
@green: #801f77;
@baise:white;
header,footer{
background: @green;
h1{
color: @baise;
}
}
//作为选择器和属性名的变量
@kuandu:width;
.@{kuandu}{
@{kuandu}:150px
}
//作为URL的变量
@imgurl:"https://www.baidu.com/img/";
header{
background: @green url("@{imgurl}bdlogo.png");
height: 500px;
}
//定义多个相同名称的变量时
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var; //这是的值是3
@var: 3;
}
one: @var; //这是的值是1
}
混合上（mixins）
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<h1>less教程</h1>
</header>
<footer class="width">
<h2>less教程</h2>
</footer>
</body>
</html>
style.css
.font_hn {
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1 {
font-size: 28px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h2 {
font-size: 24px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1 {
font-size: 28px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h2 {
font-size: 24px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
.my-hover-mixin:hover {
border: 1px solid red;
}
button:hover {
border: 1px solid red;
}
h1:hover {
border: 1px solid red;
}
h1:hover {
border: 1px solid #008000;
}
h2:hover {
border: 1px solid #000000;
}
/*带参数并且有默认值的混合*/
h1:hover {
border: 1px solid #ff0000;
}
h2:hover {
border: 1px solid #ffff00;
}
style.less
//基本混合
.font_hn{
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
//不带输出的混合，类名后面使用()
.font_hn(){
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
//带选择器的混合
.my-hover-mixin {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
h1{
.my-hover-mixin();
}
//带参数的混合
.border(@color){
border: 1px solid @color;
}
h1{
&:hover{
.border(green);
}
}
h2{
&:hover{
.border(#000);
}
}
/*带参数并且有默认值的混合*/
//带参数并且有默认值的混合
.border_you(@color:red){
border: 1px solid @color;
}
h1{
&:hover{
.border_you();
}
}
h2{
&:hover{
.border_you(yellow);
}
}
混合下（mixins）
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<h1>less教程</h1>
</header>
<footer class="width">
<h2>less教程</h2>
</footer>
</body>
</html>
style.css
.font_hn {
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1 {
font-size: 28px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h2 {
font-size: 24px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1 {
font-size: 28px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h2 {
font-size: 24px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
.my-hover-mixin:hover {
border: 1px solid red;
}
button:hover {
border: 1px solid red;
}
h1:hover {
border: 1px solid red;
}
h1:hover {
border: 1px solid #008000;
border: 21px #008000 #ff0000;
}
h2:hover {
border: 1px solid #000000;
border: 21px #000000 #ff0000;
}
/*带参数并且有默认值的混合*/
h1:hover {
border: 1px solid #ff0000;
}
h2:hover {
border: 1px solid #ffff00;
}
/*带多个参数的混合*/
.divmaizi {
color: 1, 2, 3;
margin: 10px;
padding: 20px;
}
/*定义多个具有相同名称和参数数量的混合*/
/*命名参数*/
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
.class3 {
color: #000000;
margin: 10px;
padding: 80px;
}
/*@arguments;*/
.div1 {
border: 1px solid solid;
border: 21px solid #ff0000;
}
footer {
border: 21px t_l 10px;
border-top-left-radius: 10px;
border: 21px b-r 10px;
border-bottom-right-radius: 10px;
background: #33acfe;
}
div {
padding: 33px;
margin: 66px;
}
style.less
//基本混合
.font_hn{
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
//不带输出的混合，类名后面使用()
.font_hn(){
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
//带选择器的混合
.my-hover-mixin {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
h1{
.my-hover-mixin();
}
//带参数的混合
.border(@color){
border: 1px solid @color;
}
h1{
&:hover{
.border(green);
}
}
h2{
&:hover{
.border(#000);
}
}
/*带参数并且有默认值的混合*/
//带参数并且有默认值的混合
.border_you(@color:red){
border: 1px solid @color;
}
h1{
&:hover{
.border_you();
}
}
h2{
&:hover{
.border_you(yellow);
}
}
/*带多个参数的混合*/
//带多个参数的混合
//.mixin(@color; @padding:xxx; @margin: 2) {
// color-3: @color;
// padding-3: @padding;
// margin: @margin @margin @margin @margin;
//}
//.divmaizi{
// .mixin(red;)
//}
//.divmaizi {
// .mixin(1,2,3;something, ele;132);
//}
//.divmaizi {
// .mixin(1,2,3);
//}
.divmaizi {
.mixin(1,2,3;);
}
//如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值，
//如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个参数值
/*定义多个具有相同名称和参数数量的混合*/
//.mixin(@color) {
// color-1: @color;
//}
//.mixin(@color; @padding:2) {
// color-2: @color;
// padding-2: @padding;
//}
//.mixin(@color; @padding; @margin: 2) {
// color-3: @color;
// padding-3: @padding;
// margin: @margin @margin @margin @margin;
//}
//
//.some .selector div {
// .mixin(#008000);
//}
//命名参数
/*命名参数*/
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
2
.class2 {
.mixin(#efca44; @padding: 40px);
}
.class3{
.mixin(@padding: 80px;)
}
/*@arguments;*/
.border(@x:solid,@c:red){
border: 21px @arguments;
}
.div1{
.border(solid);
}
//
.border(all,@w: 5px){
border-radius: @w;
}
.border(t_l,@w:5px){
border-top-left-radius: @w;
}
.border(t_r,@w:5px){
border-top-right-radius: @w;
}
.border(b-l,@w:5px){
border-bottom-left-radius: @w;
}
.border(b-r,@w:5px){
border-bottom-right-radius: @w;
}
footer{
.border(t_l,10px);
.border(b-r,10px);
background: #33acfe;
}
//混合的返回值
.average(@x, @y) {
@average: ((@x + @y) / 2);
@he:(@x + @y);
}
div {
.average(16px, 50px);
padding: @average;
margin: @he;
}
嵌套规则（nested-rules)
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<header>
<h1>less教程</h1>
<div class="logo"></div>
</header>
<footer class="width">
<h2>less教程</h2>
</footer>
</body>
</html>
style.css
.a .b .c {
color: 123;
}
.c.a .b {
color: 123;
}
p,
a,
ul,
li {
border-top: 2px dotted #366;
}
p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
border-top: 0;
}
a a a,
a a b,
a a c,
a b a,
a b b,
a b c,
a c a,
a c b,
a c c,
b a a,
b a b,
b a c,
b b a,
b b b,
b b c,
b c a,
b c b,
b c c,
c a a,
c a b,
c a c,
c b a,
c b b,
c b c,
c c a,
c c b,
c c c {
border-top: 0;
}
style.less
//传统写法
//header{
// width: 960px;
//}
//header h1 {
// font-size: 18px;
// color: green;
//}
//header .logo{
// width: 300px;
// height: 150px;
// background: darkred;
//}
//header .logo:hover{
// background: forestgreen;
//}
//less写法
//header{
// width: 960px;
// h1{
// font-size: 18px;
// color: green;
// }
// .logo{
// width: 300px;
// height: 150px;
// background: darkred;
// &:hover{
// background: forestgreen;
// }
// }
//}
.a{
.b{
.c{
color: 123;
}
}
}
.a{
.b{
.c&{
color: 123;
}
}
}
p, a, ul, li {
border-top: 2px dotted #366;
& & {
border-top: 0;
}
}
a , b ,c{
& & & {
border-top: 0;
}
}
运算（operations）
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wp">
</div>
</body>
</html>
style.css
.wp {
margin: 0 auto;
width: 1024px;
height: 800px;
background: #c80000;
}
style.less
//.wp{
// margin: 0 auto;
// background: forestgreen;
// width: 450px + 450;
// height: 400 + 400px;
//}
//涉及到优先级，使用()区分优先级
.wp{
margin: 0 auto;
width: (550 - 50)*2 + 24px;
height: 400 + 400px;
background:#ff0000 - 55; //#000021 c8c8c8
}
//rgb模式他的值是 0~255 ，当你的值超过255 ，那么就会以255进行相加操作
函数（funxtion）
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wp">
</div>
</body>
</html>
style.css
.wp {
background: #ff0000;
z-index: 6;
}
style.less
.wp {
background: #ff0000;
z-index: blue(#050506);
}
命名空间
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="bgcolor1">
<h1>less教程</h1>
<div class="b">
<h1>less教程</h1>
</div>
</div>
<div class="bgcolor2">
<h1>less教程</h1>
</div>
</body>
</html>
style.css
.wi {
background: green;
color: #fff;
}
.wi .a {
color: green;
background: #ffffff;
}
.bgcolor1 {
background: #fdfee0;
color: #888888;
}
.bgcolor1:hover {
color: #ff6600;
}
.bgcolor1 .b {
background: #ff0000;
}
.bgcolor2 {
color: green;
background: #ffffff;
}
style.less
//#bgcolor(){
// background: #ffffff;
// .a{
// color: #888888;
// &:hover{
// color: #ff6600;
// }
// .b{
// background: #ff0000;
// }
// }
//}
//
//.wi{
// background: green;
// color: #fff;
// .a{
// color: green;
// background: #ffffff;
// }
//}
//
//.bgcolor1{
// background: #fdfee0;
// #bgcolor>.a;
//}
//.bgcolor2{
// .wi>.a;
//}
//省略>写法
#bgcolor(){
background: #ffffff;
.a{
color: #888888;
&:hover{
color: #ff6600;
}
.b{
background: #ff0000;
}
}
}
.wi {
background: green;
color: #fff;
.a {
color: green;
background: #ffffff;
}
}
.bgcolor1{
background: #fdfee0;
#bgcolor .a;
}
.bgcolor2{
.wi .a;
}
作用域
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="bgcolor1">
<h1>less教程</h1>
<div class="b">
<h1>less教程</h1>
</div>
</div>
<div class="bgcolor2">
<h1>less教程</h1>
</div>
</body>
</html>
style.css
.bgcolor {
width: 50px;
}
.bgcolor a {
color: #ff0000;
}
style.less
@clolor:#ffffff;
.bgcolor{
width: 50px;
a{
color: @clolor;
}
}
@clolor:#ff0000;
引入（importing)
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="bgcolor1">
<h1>less教程</h1>
<div class="b">
<h1>less教程</h1>
</div>
</div>
<div class="bgcolor2">
<h1>less教程</h1>
</div>
</body>
</html>
index.css
.color{
color: #ff6600;
}
style.css
.colorsss {
color: darkgreen;
}
.colorsss {
color: darkgreen;
}
.colorsss {
color: darkgreen;
}
style.less
//@import "main.less";
//@import (reference) "main.less"; //引用LESS文件，但是不输出
//@import (inline) "main.less"; //引用LESS文件，但是不进行操作
//@import (once) "main.less"; //引用LESS文件，但是不进行操作
//@import (less) "index.css"; //无论是什么格式的文件，都把他作为LESS文件操作
//@import (css) "main.less"; //无论是什么格式的文件，都把他作为CSS文件操作
@import (multiple) "main.less"; //multiple，允许引入多次相同文件名的文件
@import (multiple) "main.less"; //multiple，允许引入多次相同文件名的文件
@import (multiple) "main.less"; //multiple，允许引入多次相同文件名的文件
.centen{
// width:@wp;
// .color;
}
main.less
@wp:960px;
.colorsss{
color: darkgreen;
}
关键字（important）
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="bgcolor1">
<h1>less教程</h1>
<div class="b">
<h1>less教程</h1>
</div>
</div>
<div class="bgcolor2">
<h1>less教程</h1>
</div>
</body>
</html>
style.css
.unimportant {
background: #f5f5f5;
color: #990000;
font-size: 16px;
font-weight: 900;
}
.important {
background: #f5f5f5 !important;
color: #990000 !important;
font-size: 16px !important;
font-weight: 900 !important;
}
style.less
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
font-size: 16px;
font-weight: 900;
}
.unimportant {
.foo();
}
.important {
.foo() !important;
}
条件表达式
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="bgcolor1">
<h1>less教程</h1>
<div class="b">
<h1>less教程</h1>
</div>
</div>
<div class="bgcolor2">
<h1>less教程</h1>
</div>
</body>
</html>
style.css
.class1 {
background-color: black;
width: 960px;
}
.class2 {
background-color: white;
width: 95%;
}
style.less
//.mixin (@a) when (lightness(@a) >= 50%) { //255/2=127.5
// background-color: black;
//}
//.mixin (@a) when (lightness(@a) < 50%) {
// background-color: white;
//}
//.mixin (@a) {
// color: @a;
//}
//.class1 { .mixin(#7e7e7e) } //221 > 127.5 >50% background-color: black; 7e7e7e = 126
//.class2 { .mixin(#808080) } //85 <127.5 <50% background-color: white; 808080 = 128
//iscolor,isnumber.....判断值得类型
//.mixin (@a) when (iscolor(@a)) { //255/2=127.5
// background-color: black;
//}
//.mixin (@a) when (isnumber(@a) ) {
// background-color: white;
// shuzi:shuzi;
//}
//.mixin (@a) {
// color: @a;
//}
//.class1 { .mixin(#7e7e7e) } //background-color: black;
//.class2 { .mixin(123) } //background-color: white;
//ispixel,ispercentage.....单位检查函数
.mixin (@a) when (ispixel(@a)) {
background-color: black;
}
.mixin (@a) when (ispercentage(@a) ) {
background-color: white;
}
.mixin (@a) {
width: @a;
}
.class1 { .mixin(960px) } //background-color: black; width:960px
.class2 { .mixin(95%) } //background-color: white;width:95%
循环（loop）
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="bgcolor1">
<h1>less教程</h1>
<div class="b">
<h1>less教程</h1>
</div>
</div>
<div class="bgcolor2">
<h1>less教程</h1>
</div>
</body>
</html>
style.css
div h1 {
padding: 10px;
}
div h2 {
padding: 20px;
}
div h3 {
padding: 30px;
}
div h4 {
padding: 40px;
}
div h5 {
padding: 50px;
}
div h6 {
padding: 60px;
}
style.less
//.loop(@counter) when (@counter > 0) {
// .loop((@counter - 1)); // 递归调用自身 4 3 2 1 0
// width: (10px * @counter); // 每次调用时产生的样式代码 50px 40px 30px 20px 10px
//}
//
//div {
// .loop(5); // 调用循环
//}
//.loop(@counter) when (@counter > 0) {
// h@{counter}{
// padding: (10px * @counter);
// }// 每次调用时产生的样式代码
// .loop((@counter - 1)); // 递归调用自身
//}
//
//div {
// .loop(6); // 调用循环
//}
.loop(@counter) when (@counter < 7) {
h@{counter}{
padding: (10px * @counter);
}// 每次调用时产生的样式代码
.loop((@counter + 1)); // 递归调用自身
}
div {
.loop(1); // 调用循环
}
合并属性
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="bgcolor1">
<h1>less教程</h1>
<div class="b">
<h1>less教程</h1>
</div>
</div>
<div class="bgcolor2">
<h1>less教程</h1>
</div>
</body>
</html>
style.css
.myclass {
box-shadow: inset 0 0 10px #555 , 0 0 20px black;
}
.myclass {
background: #f60 url("/sss.jod"), no-repeat center;
}
style.less
//+ 合并以后，以逗号分割属性值
.mixin() {
box-shadow+: inset 0 0 10px #555 ;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}
//+_ 合并以后，以空格分割属性值
.a(){
background+:#f60;
background+_:url("/sss.jod") ;
background+:no-repeat;
background+_:center;
}
.myclass {
.a()
}
//background+_:#f60 url("/sss.jod");
函数库（function）
函数库（function）- 其它函数
main.css
.colorsss{color:#006400}
style.css
div {
width: 100;
}
style.less
//.x(1) { x:11 }
//.x(2) { y:22 }
//.x(@x) when (default()) {z:@x}
//body{
//// background: color("#f60");
//// width: convert(1s,ms);
//// background: data-uri('arr.jpg');
//}
//.div1{
// .x(1)
//}
//.div2{
// .x(123)
//}
//.x(@x) when (ispixel(@x)) {width:@x}
//.x(@x) when not(default()) {padding:(@x/10)}
//
//.div1{
// .x(100px)
//}
//
//.div2{
// .x(100cm);
// color:red;
//}
div{
width: unit(100px);
}
函数库（function）- 字符串函数
style.css
div {
n: "D";
}
style.less
div{
// d:escape('#, ^, (, ), {, }, |, :, >, <, ;, ], [ , =');
// filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
// filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
//// width: calc(960px-100px);
// width: calc(~'960px-100px');
// height: calc(~'960px-100px');
// font-family: %( "%a %a" , "Microsoft", "YaHei");
// font-family: ""Microsoft" "YaHei"";
// font-family: %( "%A %a" , "Microsoft", "YaHei");
// font-family: "%22Microsoft%22 "YaHei"";
// font-family: %( "%s %s" , F60, "YaHei");
// font-family: %( "%s %s" , "Microsoft", "YaHei");
// font-family: "Microsoft YaHei";
//content: replace("Hello, maizi", "maizi", "LESS");
// content: replace("Hello, A", "A", "B");
//n:length(1px solid #0080ff);
@list: "A", "B", "C", "D";
n:extract(@list,4)
}
函数库（function）- 数学函数
style.css
div {
width: 1px;
width: 3px;
}
style.less
div{
// width: ceil(2.9999999px); //1.ceil()函数 向上取整
// width: floor(2.9999999px); //1.floor()函数 向下取整
// width:percentage( 0.5px); 将浮点数转换为百分比
// 取整和四舍五入
// width:4.5px ;
// width:round(4.5px) ;
//
// width:4.4px ;
// width:round(4.4px) ;
// 计算一个数的平方根，原样保持单位。
// width: sqrt(16px);
// width: sqrt(9px);
// 计算数字的绝对值，原样保持单位。
// top: -999px;
// top: abs(-999px);
// width: sin(1); //1弧度角的正弦值
// width: sin(1deg);//1角度角的正弦值
// width: sin(1grad); //1百分度角的正弦值
// 反正弦值
// width: asin(-0.84147098);
// width: asin(0);
// width: asin(2);
// width: cos(1); //1弧度角的余弦值
// width: cos(1deg);//1角度角的余弦值
// width: cos(1grad); //1百分度角的余弦值
// width: tan(1); //1弧度角的正切值
// width: tan(1deg);//1角度角的正切值
// width: tan(1grad); //1百分度角的正切值
// PI
// width: pi();
// 乘方运算
// width: pow(2px,2);
// width: pow(3px,2);
// width: pow(4px,2);
// width: pow(25px,0.5);
// mod()取余
// width: mod(3px,2);
width: min(3px,2px,1px);
width: max(3px,2px,1px);
}
函数库（function）- 类型函数
style.css
div {
x: 240em;
x: 280em;
x: 290em;
}
style.less
//如果一个值是一个数字，返回'真(true)',否则返回'假(false)'.
//.m(@x) when (isnumber(@x)) {
// x:@x
//}
//div{
//.m(123);
//.m(ABC);
//}
//如果一个值是一个字符串，返回'真(true)',否则返回'假(false)'.
//.m(@x) when (isstring(@x)) {
// x:@x
//}
//div{
//.m(123);
//.m("ABC");
//}
//如果一个值是一个颜色，返回'真(true)',否则返回'假(false)'.
//.m(@x) when (iscolor(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
//}
//如果一个值是一个关键字，返回'真(true)',否则返回'假(false)'.
//.m(@x) when (iskeyword(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
//}
//如果一个值是一个url地址，返回'真(true)',否则返回'假(false)'.
//.m(@x) when (isurl(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
//}
//如果一个值是带像素长度单位的数字，返回'真(true)',否则返回'假(false)'.
//.m(@x) when (ispixel(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
// .m(220px);
// .m(220cm);
//}
//如果一个值是带em长度单位的数字，返回'真(true)',否则返回'假(false)'.
//.m(@x) when (isem(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
// .m(220px);
// .m(240em);
//}
//如果一个值是带百分比单位的数字，返回'真(true)',否则返回'假(false)'.
//.m(@x) when (ispercentage(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
// .m(220px);
// .m(240em);
// .m(260%);
//}
//如果一个值是带指定单位的数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isunit(@x,em)) {
x:@x
}
div{
.m(123);
.m(220px);
.m(240em);
.m(280em);
.m(290em);
.m(260%);
}
函数库（function）- 颜色值定义函数
style.less
//通过十进制红色，绿色，蓝色三种值 (RGB) 创建不透明的颜色对象。
//div{
// background: rgb(255,0,0);
// background: rgb(100%,0%,0%);
//}
//通过十进制红色，绿色，蓝色，以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。
//div{
// background: rgba(255,0,0,0.5);
// background: rgba(100%,0%,0%,0.5);
//}
//创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA ！)。
//div{
// background: argb(rgba(255,0,0,0.5));
// background: argb(rgba(100%,0%,0%,0.5));
//}
//通过色相 (hue)，饱和度 (saturation)，亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。
//div{
// background: hsl(90,100%,50%);
//}
//通过色相 (hue)，饱和度 (saturation)，亮度 (lightness)，以及 alpha 四种值 (HSLA) 创建透明的颜色对象。
//div{
// background: hsla(90,100%,50%,0.5);
//}
//通过色相 (hue)，饱和度 (saturation)，色调 (value) 三种值 (HSV) 创建不透明的颜色对象。
//div{
// background: hsv(90,100%,50%);
//}
//通过色相 (hue)，饱和度 (saturation)，色调 (value)，以及 alpha 四种值 (HSVA) 创建透明的颜色对象。
//div{
// background: hsva(90,100%,50%,8%);
//}
函数库（function）- 颜色值通道提取函数
style.less
div{
// hue()色相值
//z-index: hue(hsl(90,100%,50%)); //90
////saturation()饱和度
//z-index: saturation(hsl(90,80%,50%)); //80%
////lightness()亮度值
//z-index: lightness(hsl(90,100%,100%)); //100%
// hsv(90,100%,50%)
// z-index:hsvhue( hsv(90,100%,50%)); //函数90
// z-index:hsvsaturation( hsv(90,100%,50%)); //函数100%
// z-index:hsvvalue( hsv(90,100%,50%)); //函数50%
//rgba(29,199,29,80%)
// 提取红色
//z-index: red(rgba(29,199,150,80%)); //29
// // 提取绿色
//z-index: green(rgba(29,199,150,80%)); //199
// // 提取蓝色
//z-index: blue(rgba(29,199,150,80%)); //29
// // 提取透明度
//z-index: alpha(rgba(29,199,150,80%)); //0.8
// 计算颜色对象luma的值（亮度的百分比表示法）。
//z-index:luma(rgb(100,200,30));
//// 计算没有伽玛校正的亮度值
// z-index:luminance(rgb(100,200,30));
}
函数库（function）- 颜色值运算函数
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<p>增加一定数值的颜色饱和度。</p>
<div class="ys1">#80e619</div>
<div class="ys2">#80ff00</div>
<p>降低一定数值的颜色饱和度。</p>
<div class="ys3">#80cc33</div>
<p>增加一定数值的颜色亮度。</p>
<div class="ys4">#b3f075</div>
<p>减少一定数值的颜色亮度。</p>
<div class="ys5">#b3f075</div>
<div class="ys66">hsla(90,80%,50%,50%)</div>
<div class="ys6">rgba(128, 230, 25, 0.6)</div>
<div class="ys7">rgba(128, 230, 25, 0)</div>
<div class="ys8">#80e619</div>
<div class="ys9">rgba(128, 230, 25, 0.4)</div>
<div class="ys10">hsl(10,90%,50%)</div>
<div class="ys11">hsl(40,90%,50%)</div>
<div class="ys12"></div>
<div class="ys13"></div>
<div class="ys14"></div>
<div class="ys15"></div>
<div class="ys16"></div>
</body>
</html>
style.css
body {
c: #80e619;
c: #80ff00;
}
div {
width: 90px;
height: 50px;
font-size: 16px;
text-align: center;
}
.ys1 {
background: #80e619;
}
.ys2 {
background: #80ff00;
}
.ys3 {
background: #80cc33;
}
.ys4 {
background: #b3f075;
}
.ys5 {
background: #4d8a0f;
}
.ys66 {
background: rgba(128, 230, 25, 0.5);
}
.ys6 {
background: #80e619;
}
.ys7 {
background: rgba(128, 230, 25, 0.1);
}
.ys8 {
background: #80e619;
}
.ys9 {
background: rgba(128, 230, 25, 0.4);
}
.ys10 {
background: #f2330d;
}
.ys11 {
background: #f20d0d;
}
.ys12 {
background: rgba(100, 50, 20, 0.5);
}
.ys13 {
background: rgba(0, 150, 120, 0.2);
}
.ys14 {
background: rgba(65, 85, 55, 0.35);
}
.ys15 {
background: #80ff00;
}
.ys16 {
background: #ffffff;
}
style.less
body{
c:hsl(90,80%,50%);
c:saturate(hsl(90,80%,50%),20%);
}
div{
width: 90px;
height: 50px;
font-size: 16px;
text-align: center;
}
.ys1{
background: hsl(90,80%,50%);
}
.ys2{
background: saturate(hsl(90,80%,50%),20%);
}
.ys3{
background: desaturate(hsl(90,80%,50%),20%);
}
.ys4{
background: lighten(hsl(90,80%,50%),20%);
}
.ys5{
background: darken(hsl(90,80%,50%),20%);
}
.ys66{
background:hsla(90,80%,50%,50%);
}
.ys6{
background: fadein(hsla(90,80%,50%,50%),50%);
}
.ys7{
background: fadeout(hsla(90,80%,50%,50%),40%);
}
.ys8{
background: hsl(90,80%,50%);
}
.ys9{
background: fade(hsl(90,80%,50%),40%);
}
.ys10{
background: hsl(10,90%,50%);
}
.ys11{
background: spin(hsl(0,90%,50%),360);
}
.ys12{
background: rgba(100,50,20,0.5);
}
.ys13{
background: rgba(0,150,120,0.2);
}
.ys14{
background: mix(rgba(100,50,20,0.5),rgba(0,150,120,0.2));
}
.ys15{
background: hsl(90,100%,50%);
}
.ys16{
background:contrast(hsl(90,100%,50%),#000000,#ffffff,100%)
}
函数库（function）- 颜色值混合函数
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初见LESS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="ys1">ff6600</div>
<div class="ys2">000000</div>
<div class="ys3">000000</div>
<div class="ys4">ff6600</div>
<div class="ys5">333333</div>
<div class="ys6">331400</div>
<div class="ys7">ff6600</div>
<div class="ys8">ffffff</div>
<div class="ys9">ff6600</div>
<div class="ys10"></div>
<div class="ys11"></div>
<div class="ys12"></div>
<div class="ys13"></div>
<div class="ys14"></div>
<div class="ys15"></div>
<div class="ys16"></div>
<div class="ys17"></div>
<div class="ys18"></div>
<div class="ys19"></div>
<div class="ys20"></div>
</body>
</html>
style.css
body {
c: #80e619;
c: #80ff00;
}
div {
width: 90px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 16px;
text-align: center;
}
.ys1 {
background: #ff6600 ;
}
.ys2 {
background: #000000;
}
.ys3 {
background: #ff6600;
}
.ys4 {
background: #ff6600 ;
}
.ys5 {
background: #333;
}
.ys6 {
background: #cc9933;
}
.ys7 {
background: #ff6600 ;
}
.ys8 {
background: #ffffff;
}
.ys9 {
background: #0099ff;
}
style.less
body{
c:hsl(90,80%,50%);
c:saturate(hsl(90,80%,50%),20%);
}
div{
width: 90px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 16px;
text-align: center;
}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: multiply(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: multiply(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: multiply(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: screen(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: screen(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: screen(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: overlay(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: overlay(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: overlay(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: softlight(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: softlight(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: softlight(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: hardlight(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: hardlight(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: hardlight(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: difference(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: difference(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: difference(#ff6600,#fff);
//}
//
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: exclusion(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: exclusion(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: exclusion(#ff6600,#fff);
//}
//
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: average(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: average(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: average(#ff6600,#fff);
//}
.ys1{
background:#ff6600 ;
}
.ys2{
background: #000000;
}
.ys3{
background: negation(#ff6600,#000000);
}
.ys4{
background:#ff6600 ;
}
.ys5{
background: #333;
}
.ys6{
background: negation(#ff6600,#333);
}
.ys7{
background:#ff6600 ;
}
.ys8{
background: #ffffff;
}
.ys9{
background: negation(#ff6600,#fff);
}
砥砺前行
