Less学习笔记

最新推荐文章于 2024-07-20 18:16:53 发布
最新推荐文章于 2024-07-20 18:16:53 发布
阅读量222 收藏
点赞数
分类专栏： CSS Less 文章标签： less css 前端 node.js css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LGD_HuaFEEng/article/details/104384587
版权
CSS 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
Less
1 篇文章 0 订阅
订阅专栏

文章目录

1.初见Less

1.1 什么是Less

  • Less是一个CSS预编译器，意思指的是它可以扩展CSS语言，添加功能如允许变量（variables），混合（mixins），函数（functions）和许多其他的技术，让你的CSS更具维护性、主题性、扩展性。

1.2 Less官方网站

  • http://lesscss.org/

1.3 与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;
        }
    }
}

1.4 Less中的注释

  • // 只会在LESS中显示，不会被编译到css文件中
  • /就会在LESS和CSS中显示/，会被编译到css文件中

2.正确使用Less

2.1 如何使用Less

  • Less文件只有在被编译后才能被浏览器识别使用

2.2 Less编译工具

  • Koala http://koala-app.com/
  • WinLess
  • CodeKit

2.3 客户端调试方式

  • 首先引用Less文件 link引入，rel=“stylesheet/less”
  • 然后引用less.js 要在less样式文件之后引入

3.变量(variables)

3.1 普通的变量

  • 定义 @
@blue: #5B83AD;
#header {
  color: @blue;
}
  • 由于变量只能定义一次，实际上它们就是“常量”

3.2 作为选择器和属性名

  • @{变量名}
@mySelector: width;
.@{mySelector} {
  @{mySelector}: 960px;
}

3.3 作为URL

  • 使用时，使用""将变量的值括起来，使用时同样将变量以@{变量名}的方式使用
@myUrl: "http://www.xxx.xxx";
body {
  background: #4cdca9 url("@{myUrl}/logo.png") no-repeat;
}

3.4 延迟加载

  • 变量是延迟加载的，在使用前不一定要预先声明
.lazy-eval {
  width: @var;
}
@var: @a;
@a: 9%;

3.5 定义多个相同名称的变量时

  • 在定义一个变量两次时，只会使用最后定义的变量，Less会从当前作用域中向上搜索。这个行为类似于CSS的定义中始终使用最后定义的属性值。

4.混合(mixins)

4.1 普通混合

  • 混合就是一种将一系列属性从一个规则集引入（“混合”）到另一个规则集的方式。
// 基本混合
.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;
  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;
}

4.2 不带输出的混合

  • 如果你想要创建一个混合集，但是却不想让它输出到你的样式中
// 不带输出的混合，类名后面使用()
.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;
}

4.3 带选择器的混合

// 带选择器的混合
.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}
/*编译成*/
button:hover {
  border: 1px solid red;
}

.my-hover-mixin {
  &:hover {
    border: 1px solid red;
  }
}
h1 {
  .my-hover-mixin();
}
/*编译成*/
.my-hover-mixin:hover {
  border: 1px solid red;
}
h1:hover {
  border: 1px solid red;
}

4.4 带参数的混合

// 带参数的混合
.border(@color) {
  border: 1px solid @color;
}
h1 {
  &:hover {
    .border(green);
  }
}
/*编译成*/
h1:hover {
  border: 1px solid #008000;
}

4.5 带参数并且有默认值

/*带参数并且有默认值的混合*/
.border_you(@color:red) {
  border: 1px solid @color;
}
h1 {
  &:hover{
    .border_you();
  }
}
h2 {
  &:hover{
    .border_you(yellow);
  }
}
/*编译成*/
/*带参数并且有默认值的混合*/
h1:hover {
  border: 1px solid #ff0000;
}
h2:hover {
  border: 1px solid #ffff00;
}

4.6 带多个参数的混合

  • 一个组合可以带多个参数，参数之间可以用分号或者逗号分隔
  • 但是推荐使用分号分割，因为逗号符号有两个意思。他可以解释为mixins参数分隔符或者css列表分隔符。
  • 两个参数，并且每个参数都是逗号分割的列表 .name(1,2,3;something, ele)
  • 三个参数，并且每个参数都包含一个数字 .name(1,2,3)
  • 使用伪造的分号创建mixin，调用的时候参数包含一个逗号分割的css列表 .name(1,2,3;)
  • 逗号分割默认值 .name(@param1: red, blue)
// 带多个参数的混合
// 如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值，
// 如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个参数值
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.divmaizi {
  .mixin(1,2,3;);
}
/*编译成*/
.divmaizi {
  color: 1, 2, 3;
  margin: 10px;
  padding: 20px;
}
  • 定义多个具有相同名称和参数数量的mixins是合法的。Less会使用它可以应用的属性。如果使用mixin的时候只带一个参数，比如.mixin(green)，这个属性会导致所有的mixin都会强制使用这个明确的参数
/*定义多个具有相同名称和参数数量的混合*/
.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);
}
/*编译成*/
/*定义多个具有相同名称和参数数量的混合*/
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}

4.7 命名参数

  • 引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值，任何参数都已通过它的名称来引用，这样就不必按照任意特定的顺序来使用参数
// 命名参数
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}
.class3 {
  .mixin(@padding: 80px;)
}
/*编译成*/
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}
.class3 {
  color: #000000;
  margin: 10px;
  padding: 80px;
}

4.8 @arguments变量

  • @arguments代表所有的可变参数
  • @arguments; 代表所有可变参数时，参数的先后顺序就是你的（）括号内的参数的先后顺序
  • 注意在使用的赋值，值的位置和个数也是一一对应的，只有一个值，把值赋值给第一个，两个值，赋值给第一个和第二个，三个值，分别赋值给第三个…以此类推，但是需要主要的是假如我想给第一个和第三个赋值，你不能写（值1， ，值3），必须把原来的默认值写上去！
/*@arguments;*/
.border(@x:solid,@c:red) {
  border: 21px @arguments;
}
.div1 {
  .border();
}
/*编译成*/
/*@arguments;*/
.div1 {
  border: 21px solid #ff0000;
}

4.9 匹配模式

  • 传值的时候定义一个字符，在使用的时候使用哪个字符，就调用哪条规则
.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;
}
/*编译成*/
footer {
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #33acfe;
}

4.10 得到混合中变量的返回值

// 混合的返回值
.average(@x, @y) {
  @average: ((@x + @y) / 2);
  @he:(@x + @y);
}
div {
  .average(16px, 50px);
  padding: @average;
  margin: @he;
}
/*编译成*/
div {
  padding: 33px;
  margin: 66px;
}

5.嵌套规则(nested-rules)

  • 嵌套规则它模仿了HTML的结构，让我们的css代码更加简洁明了清晰
  • & 表示当前选择器的所有父选择器
  • 将&放到当前选择器之后，就会将当前选择器插入到所有的父选择器之前
  • 组合使用生成所有可能的选择器列表
p, a, ul, li {
  border-top: 2px dotted #366;
  & & {
    border-top: 0;
  }
}
/*编译成*/
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;
}

6.运算(operations)

  • 任何数值，颜色和变量都可以进行运算
  • Less会为你自动推断数值的单位，所以你不必每一个值都加上单位
  • 注意：运算符与值之间必须以空格分开，涉及优先级时以()进行优先级运算
  • Less在运算时，先将颜色值转换为rgb模式，然后在转换为16进制的颜色值并且返回
  • 注意：既然是转换为rgb模式，我们知道rgb的取值范围是0~255，所以我们计算的时候不能超过这个区间，超过后默认使用最大值255计算
.wp {
  background: red - 55;
}
/*编译成*/
.wp {
  background: #ff0000 - 55;
}

7.函数(functions)

  • Less提供了许多用于转换颜色、处理字符串和进行算术运算的函数，这些函数使用起来非常简单。
  • 最常见的rgb()函数，将rgb模式的值转换为16进制的值

8.命名空间

  • 将一些需要的混合组合在一起，可以通过嵌套多层id或者class来实现
#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;
}
/*编译成*/
.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;
}

// 省略>写法
#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;
}
/*编译成*/
.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;
}

9.作用域

  • Less中的作用域与编程语言中的作用域概念非常相似，首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，以此类推

10.引入(importing)

  • 你可以引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用
    • @import “main”;
  • 注意：引用.css文件会被原样输出到编译的文件中，不会混合到项目中
    • 无法引用css中的选择器代码
  • 可带参数
    • once 默认，只包含一次
    • reference 使用Less文件但不输出
    • inline 在输出中包含源文件但不加工它
    • less 将文件作为Less文件对象，无论是什么文件扩展名
    • css 将文件作为css文件对象，无论是什么文件扩展名
    • multiple multiple允许引入多次相同文件名的文件

11.关键字(important)

  • 在调用的混合集后面追加!important关键字，可以使混合集里面的所有属性都继承!important
.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
  font-size: 16px;
  font-weight: 900;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}
/*编译成*/
.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;
}

12.条件表达式

  • 带条件的混合

    • ，>=，=，=<，<，true

    // 255/2=127.5
.mixin (@a) when (lightness(@a) >= 50%) {   
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
// 7e7e7e  =  126
.class1 { .mixin(#7e7e7e); }
// 808080 = 128
.class2 { .mixin(#808080); }
/*编译成*/
.class1 {
  background-color: white;
  color: #7e7e7e;
}
.class2 {
  background-color: black;
  color: #808080;
}

  • 类型检查函数

    • iscolor
    • isnumber
    • isstring
    • iskeyword
    • isurl
    // iscolor,isnumber.....判断值的类型
.mixin (@a) when (iscolor(@a)) {
  background-color: black;
}
.mixin (@a) when (isnumber(@a) ) {
  background-color: white;
  shuzi: shuzi;
}
.mixin (@a) {
  color: @a;
}
.class1 { .mixin(#7e7e7e); }
.class2 { .mixin(123); }
/*编译成*/
.class1 {
  background-color: black;
  color: #7e7e7e;
}
.class2 {
  background-color: white;
  shuzi: shuzi;
  color: 123;
}

  • 单位检查函数

    • ispixel
    • ispercentage
    • isem
    • isunit
    // 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); }
.class2 { .mixin(95%); }
/*编译成*/
.class1 {
  background-color: black;
  width: 960px;
}
.class2 {
  background-color: white;
  width: 95%;
}

13.循环(loop)

  • 在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。
.loop(@counter) when (@counter < 7)  {
  h@{counter} {
    padding: (10px * @counter);
  }
  .loop((@counter + 1));
}
div  {
  .loop(1);
}
/*编译成*/
div h1 {
  padding: 10px;
}
div h2 {
  padding: 20px;
}
div h3 {
  padding: 30px;
}
div h4 {
  padding: 40px;
}
div h5 {
  padding: 50px;
}
div h6 {
  padding: 60px;
}

14.合并属性

  • '+'逗号分隔所合并的属性值
    • 在需要合并的属性的’:‘的前面加上’+‘就可以完成合并，合并以’,'分割属性
  • '+_'空格分隔所合并的属性值
    • 在需要合并的属性的’:‘的前面加上’+_‘就可以完成合并，合并以’ '分割属性
// + 合并以后，以逗号分割属性值
.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();
}
/*编译成*/
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
.myclass {
  background: #f60 url("/sss.jod"), no-repeat center;
}

15.函数库(function)

15.1 其他函数

  • color()函数

    • 解析颜色，将代表颜色的字符串转换为颜色值

  • convert()函数

    • 将数字从一种类型转换到另一种类型

  • data-uri()函数

    • 将一个资源内嵌到样式文件，如果开启了ieCompat选项，而且资源文件的体积过大，或者是在浏览器中使用，则会使用url()进行回退。如果没有指定MIME，则Node.js会使用MIME包来决定正确的MIME

  • default()函数

    • 只能边界条件中使用，没有匹配到其他自定义函数（mixin）的时候返回true，否则返回false
    .x(1) { x:11; }
.x(2) { y:22; }
.x(@x) when (default()) { z:@x; }
.div1 {
  .x(1);
}
.div2 {
  .x(123);
}
/*编译成*/
.div1 {
  x: 11;
}
.div2 {
  z: 123;
}

.x(@x) when (ispixel(@x)) { width:@x; }
.x(@x) when not(default()) { padding:(@x/10); }
.div1 {
  .x(100px);
}
.div2 {
  .x(100cm);
  color:red;
}
/*编译成*/
.div1 {
  width: 100px;
  padding: 10px;
}
.div2 {
  color: red;
}

  • unit()函数

    • 移除或者改变属性值的单位
    div {
  width: unit(100px, cm);
}
/*编译成*/
div {
  width: 100cm;
}

15.2 字符串函数、长度相关函数

  • escape()函数

    • 将输入字符串中的url特殊字符进行编码处理
    • 不转义的编码 ‘,’ ‘/’ ‘?’ ‘@’ ‘&’ ‘+’ ‘’’ ‘~’ ‘!’ ‘$’
    • 转义的编码 ‘#’ ‘^’ ‘(’ ‘)’ ‘{’ ‘}’ ‘|’ ‘:’ ‘>’ ‘<’ ‘;’ ‘]’ ‘[’ ‘=’

  • e()函数

    • css转义，用~"值"符号代替
    div {
  filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
  filter2: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
  width: calc(~'960px - 100px');
  height: calc(~'960px - 100px');
}
/*编译成*/
div {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
  filter2: ms:alwaysHasItsOwnSyntax.For.Stuff();
  width: calc(960px - 100px);
  height: calc(960px - 100px);
}

  • %()函数

    • 函数%(string, arguments…)格式化一个字符串
    • d,D,a,A 能被任何类型参数替换（颜色值，数字，转义值，表达式，…）如果你在字符串中结合使用，整个字符串参数都会替换进去，包括它的引号，然后引号会被替换到字符串参数的原有位置，也许会被转义或者还是不变的，取决于占位符是大写字母还是小写字母
    • s,S 能被除了颜色值以外任何类型参数替换（实际测试，颜色值也可以），如果你在字符串中结合使用，只会替换成字符串参数的值，而字符串参数引号都被忽略
    div {
  font-family1: %( "%a %a" , "Microsoft", "YaHei");
  font-family2: %( "%A %a" , "Microsoft", "YaHei");
  font-family3: %( "%d %d" , "Microsoft", "YaHei");
  font-family4: %( "%D %d" , "Microsoft", "YaHei");
  font-family5: %( "%s %s" , "Microsoft", "YaHei");
  font-family6: %( "%S %s" , "Microsoft", "YaHei");
  font-family7: %( "%s %s" , #F00, "YaHei");
}
/*编译成*/
div {
  font-family1: ""Microsoft" "YaHei"";
  font-family2: "%22Microsoft%22 "YaHei"";
  font-family3: ""Microsoft" "YaHei"";
  font-family4: "%22Microsoft%22 "YaHei"";
  font-family5: "Microsoft YaHei";
  font-family6: "Microsoft YaHei";
  font-family7: "#ff0000 YaHei";
}

  • replace()函数

    • 用另一个字符串替换文本
    div {
  content: replace("Hello, World", "World", "LESS");
}
/*编译成*/
div {
  content: "Hello, LESS";
}

  • length()函数

    • 返回集合中的值的条数
    div {
  z-index: length(1px solid #0080ff);
}
/*编译成*/
div {
  z-index: 3;
}

  • extract()函数

    • 返回集合中指定索引的值
    div {
  @list: "A", "B", "C", "D";
  n: extract(@list, 4);
}
/*编译成*/
div {
  n: "D";
}

15.3 数学函数

  • ceil()函数
    • 向上取整
  • floor()函数
    • 向下取整
  • percentage()函数
    • 将浮点数转换为百分比
  • round()函数
    • 取整和四舍五入
  • sqrt()函数
    • 计算一个数的平方根，原样保持单位
  • abs()函数
    • 计算数字的绝对值，原样保持单位
  • sin()函数
    • 正弦函数
  • asin()函数
    • 反正弦函数
  • cos函数
    • 余弦函数
  • acos()函数
    • 反余弦函数
  • tan()函数
    • 正切函数
  • atan()函数
    • 反正切函数
  • pi()函数
    • 返回π（pi）
  • pow()函数
    • 乘方运算
  • mod()函数
    • 取余运算
  • min()函数
    • 最小值运算
  • max()函数
    • 最大值运算
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);
}
/*编译成*/
div {
  width: 1px;
  width: 3px;
}

15.4 类型函数

  • isnumber() 是否数字
  • isstring() 是否字符串
  • iscolor() 是否颜色值
  • iskeyword() 是否关键字
  • isurl() 是否url地址
  • ispixel() 是否带像素长度单位的数字
  • isem() 是否带em长度单位的数字
  • ispercentage() 是否带百分比单位的数字
  • isunit() 是否带指定单位的数字
//如果一个值是一个数字，返回'真(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%);
}
/*编译成*/
div {
  x: 240em;
  x: 280em;
  x: 290em;
}

15.5 颜色值定义函数

  • rgb()
    • 通过十进制红色，绿色，蓝色三种值（RGB）创建不透明的颜色对象
  • rgba()
    • 通过十进制红色，绿色，蓝色，以及alpha四种值（RGBA）创建带alpha透明的颜色对象
  • argb()
    • 创建格式为#AARRGGBB 的十六进制（hex representation）颜色
  • hsl()
    • 通过色相（hue），饱和度（saturation），亮度（lightness），三种值（HSL）创建不透明的颜色对象
  • hsla()
    • 通过色相（hue），饱和度（saturation），亮度（lightness），以及alpha四种值（HSLA）创建透明的颜色对象
  • hsv()
    • 通过色相（hue），饱和度（saturation），色调（value）三种值（HSV）创建不透明的颜色对象
  • hsva()
    • 通过色相（hue），饱和度（saturation），色调（value），以及alpha 四种值（HSVA）创建透明的颜色对象
//通过十进制红色，绿色，蓝色三种值 (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%);
}

15.6 颜色值通道提取函数

  • hue()
    • 从HSL色彩空间中提取颜色对象的色相值
  • saturation()
    • 从HSL色彩空间中提取颜色对象的饱和度值
  • lightness()
    • 从HSL色彩空间中提取颜色对象的亮度值
  • hsvhue()
    • 从HSV色彩空间中提取颜色对象的色相值
  • hsvsaturation()
    • 从HSV色彩空间中提取颜色对象的饱和度值
  • hsvvalue()
    • 从色彩空间中提取颜色对象的色调值
  • red()
    • 提取颜色对象的红色值
  • green()
    • 提取颜色对象的绿色值
  • blue()
    • 提取颜色对象的蓝色值
  • alpha()
    • 提取颜色对象的透明值
  • luma()
    • 计算颜色对象luma的值（亮度的百分比表示法）
  • luminance()
    • 计算没有伽玛校正的亮度值
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));
}

15.7 颜色值运算函数

  • saturate()
    • 增加一定数值的颜色饱和度
  • desaturate()
    • 降低一定数值的颜色饱和度
  • lighten()
    • 增加一定数值的颜色亮度
  • darken()
    • 降低一定数值的颜色亮度
  • fadein()
    • 降低颜色的透明度（或增加不透明度），令其更不透明
  • fadeout()
    • 增加颜色的透明度（或降低不透明度），令其更透明
  • fade()
    • 给颜色（包括不透明的颜色）设定一定数值的透明度
  • spin()
    • 任意方向旋转颜色的色相角度（hue angle）
  • mix()
    • 根据比例混合两种颜色，包括计算不透明度
  • greyscale()
    • 完全移除颜色的饱和度，与desaturate(@color, 100%)函数效果相同
  • contrast()
    • 选择两种颜色相比较，得出哪种颜色的对比度最大就倾向于对比度最大的颜色
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%);
}
/*编译成*/
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;
}

15.8 颜色值混合函数

  • multiply()
    • 分别将两种颜色的红绿蓝（RGB）三种值做乘法运算，然后再除以255，输出结果是更深的颜色。（注：对应Photoshop中的“变暗/正片叠底”）
  • screen()
    • 与multiply()函数效果相反，输出结果是更亮的颜色。（注：对应Photoshop中的“变亮/滤色”）
  • overlay()
    • 结合multiply()与screen()两个函数的效果，令浅的颜色变得更浅，深的颜色变得更深。（注：对应Photoshop中的“叠加”）注意：输出结果由第一个颜色参数决定。
  • softlight()
    • 与overlay()函数效果相似，只是当纯黑色或纯白色作为参数时输出效果不会是纯黑色或纯白色。（注：对应Photoshop中的“柔光”）
  • hardlight()
    • 与overlay()函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定（注：对应Photoshop中的“强光/亮光/线性光/点光”）
  • difference()
    • 从第一个颜色值中减去第二个（分别计算RGB三种颜色值），输出结果是更深的颜色（注：对应Photoshop中的“差值/排除”）
  • exclusion()
    • 效果与difference()函数效果相似，只是输出结果差别更小（lower contrast）（注：对应Photoshop中的“差值/排除”）
  • average()
    • 分别对RGB的三种颜色值取平均值，然后输出结果
  • negation()
    • 与difference()函数效果相反，输出结果是更亮的颜色。请注意：效果相反不代表做加法运算
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);
}
/*编译成*/
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;
}

16.结语

  • 更多文章可访问我的github
LGD_HuaFEEng
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
less学习笔记
DSelegent的博客
08-21 821
less学习笔记
less 学习笔记
狗剩的专栏
05-03 643
简介 less 是 css 的升级 ，使用koala 将less便以为css less 学习笔记 : https://www.bilibili.com/video/BV16Z4y1W7Rq koala （less–>css 工具）绿色版下载地址： http://www.downza.cn/soft/264601.html HBuilderX 编辑器3.1.2绿色版下载地址： https://www.onlinedown.net/soft/1217175.htm less 视频学习 地址： http
less学习笔记教程
hello_list的博客
04-04 798
less学习笔记，快速上手
Less学习笔记（尚硅谷前端less教程）
qq_48105178的博客
09-04 460
Less学习笔记（尚硅谷前端less教程）
Less知识点整理学习笔记
打代码是一天，不打代码也是一天
07-22 277
Less是CSS预处理语言，可以使用变量、嵌套、运算等，便于维护项目CSS样式代码。
Less学习笔记(二)
a1999tyj的博客
10-24 794
前端less学笔记
less学习笔记（Reset257）
ohnk_的博客
11-27 166
学习移动端时新补充的 less 知识 ，记一下笔记 ???? 一、Less介绍 Less ( Leaner Style Sheets的缩写)是一门 CSS扩展语言 ,也成为CSS预处理器。 做为CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入 程序式语言 的特性。 它在CSS的语法基础之上，引入了量, Mixin (混入) , 运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样, Less可以让我们用更少的代码
Less学习笔记1
koflance的博客
11-30 737
1、介绍Less是CSS预处理脚本语言，提供了函数、变量、混合（mixin）等功能，方便通过node、浏览器或Rhino环境生成CSS样式表，让CSS更容易维护和使用。2、安装$ npm install -g less使用案例 生成一个test.less文件，内容如下： @base: #f938ab;.box-shadow(@style, @c) when (iscolor(@c)) { -we
Less 学习笔记(五)
kuaizisong的博客
12-03 333
5. Less 中的运算 Less 提供了加（+）、减（-）、乘（*）、除（/）算术运算，可以对任何数值型的 value（数字、颜色、变量等）进行运算，来实现它们之间的复杂关系。 能自动推断出颜色和数值的单位。@var: 1px + 5; 可以使用括号width: (@var + 6) * 2; 可以在复合属性中进行计算border: (@width * 2) solid black; ...
前端学习笔记-less
05-26
在前端开发领域，LESS（层叠样式表，Low-level Style Sheets）是一种预处理器，它扩展了CSS语言，增加了变量、嵌套规则、运算符...在阅读"前端学习笔记——less"时，应重点理解并实践这些概念，以充分利用LESS的优势。
jQuery学习笔记01
01-08
 它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。   1.3 jQuery流行程度  jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在...
Python学习笔记.docx
12-13
在学习Python的过程中，理解并掌握异常处理和循环控制是非常重要的基础部分。 首先，让我们详细讨论Python中的标准异常。异常是程序在执行过程中遇到的问题，Python提供了一系列预定义的异常类来帮助开发者处理这些...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 340
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
前端面试题日常练-day91 【Less】
qq_44640575的博客
07-16 332
希望这些选择题能够帮助您进行前端面试的准备，答案在文末在Less中，以下哪种语法适用于创建混合器（Mixin）？a) @mixinb) #mixinc) .mixind) @extendLess中的子元素选择器是用什么符号表示的？a) >b) +c) ~d) /在Less中，以下哪个功能用于处理媒体查询？a) @mediab) @query以下哪个Less函数可以用于获取颜色的亮度值？
C++ versions less than C++14/11 are not supported.报错
qq_41359358的博客
07-20 131
TFHE报错C++ versions less than C++14 are not supported.3.打开CMAKELists.txt。4.在文件中添加以下两条命令。2.找到并进入src文件夹。安装TFHE遇见以下报错。1.进入TFHE文件夹。
深入解析：`cat` 与 `less` 命令在文件查看中的应用与对比
cheungxiongwei的博客
07-18 499
cat和less。通过详细解析它们的基本用法、常用选项及实际应用示例，本文对比了这两个命令的功能、适用场景和性能，旨在帮助读者根据具体需求选择最合适的工具。
前端面试题日常练-day95 【Less】
qq_44640575的博客
07-19 619
transform-rotate()功能用于在Less中生成旋转效果。通过transform-rotate()函数，我们可以对元素进行旋转操作，实现页面元素的旋转效果，让页面呈现更加生动和有趣的视觉效果。
bootstrap学习笔记
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值