关于less:Less语法

66次阅读

共计 6365 个字符，预计需要花费 16 分钟才能阅读完成。

sass/scss 和 less 的区别：
相同点 ：变量 混入(Mixins) 嵌套 运算 命名空间 作用域 函数
不同点 ：
1、编译环境不一样
Sass 是在服务端解决的，以前是 Ruby，当初是 Dart-Sass 或 Node-Sass，而 Less 是须要引入 less.js 来解决 Less 代码输入 css 到浏览器，也能够在开发环节应用 Less，而后编译成 css 文件，间接放到我的项目中。
2、编写变量的形式不同。Sass 应用 $，而 Less 应用 @。
3、Sass 反对条件语句，能够应用 if{}else{},for{} 循环等等。而 Less 不反对。

正文
less 提供两种正文：/**/ 和 //
两者的区别是 /**/ 会将正文编译到 css 文件中，而 // 不会。

变量
Less 中的变量有以下规定：
以 @作为变量的起始标识，变量名由字母、数字、_、- 组成；
没有先定义后应用的规定；
定义时 “@变量名: 变量值;” 的模式；援用时采纳 “@变量名 ” 或 “@{变量名}” 的模式.

f.box{background-color: @color;}
// 甚至能够用变量名定义为变量:  
@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;
// 解析后
content: "I am fnord.";

变量能够用相似 ruby 和 php 的形式嵌入到字符串中，像 @{name}这样的构造

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

混合
混合能够将一个定义好的 class A 轻松的引入到另一个 class B 中，从而简略实现 class B 继承 class A 中的所有属性。咱们还能够带参数地调用，就像应用函数一样。

@testz_width:300px;
.box{
    width: @testz_width;
    height: @testz_width;
    background-color: yellow;
    .border;
}
.border{border: solid 5px pink;}
// 输入：.box {
    width: 300px;
    height: 300px;
    background-color: yellow;
    border: solid 5px pink;
}

咱们还能够带参数地调用，就像应用函数一样。

// 混合带参数
.border_02(@border_width){border: solid yellow @border_width;}
.text_hunhe{.border_02(30px);
}
// 输入：.border {border: solid 5px pink;}

咱们还能够混合是默认带参，当调用的 class 不传参时，就会传入默认参数

// 混合-默认带值
.border_03(@border_width:40px){border: solid green @border_width;}
.test_hunhe_03{.border_03();
}
// 输入：.test_hunhe_03 {border: solid #008000 40px;}

arguments 蕴含了所有的传递进来的参数，不必独自解决每一个参数

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
// 编译过后的后果是：.box-shadow{
          box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
  -webkit-box-shadow: 2px 5px 1px #000;
}

匹配模式与导引
有些状况下，咱们想依据传入的参数来扭转混合的默认出现。咱们就能够应用匹配模式。能够了解为其余语言中的 switch。以下是一个匹配模式的例子：

.triangle(top,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
 }
.triangle(bottom,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: @c transparent transparent  transparent;
    border-style: solid dashed dashed  dashed;
 }  

.triangle(left,@w:5px,@c:#ccc){
    border-width: @w;
    border-color:  transparent @c transparent  transparent;
    border-style:  dashed solid dashed  dashed;
 }
 .triangle(right,@w:5px,@c:#ccc){
    border-width: @w;
    border-color: transparent transparent  transparent @c;
    border-style:  dashed dashed  dashed solid;
 }
 .triangle(@_,@w:5px,@c:#ccc){
    width: 0;
    height: 0;
    overflow: hidden;
 }

定义好 less 后咱们就能够进行匹配：

html：<div class="sanjiao"></div>
less：.sanjiao{.triangle(right,100px); // 匹配到第四和第五个混合
}

后果输入：

当咱们想依据表达式进行匹配，而非依据值和参数匹配时，导引就显得十分有用。

.mixin (@a) when (lightness(@a) >= 50%) {background-color: black;}
.mixin (@a) when (lightness(@a) < 50%) {background-color: white;}
.mixin (@a) {color: @a;}

lightness 为 less 定义的函数，这个函数是用来返回 HSL 色彩模式的亮度（lightness）。返回值为 0 -100% 的百分比数或 0-1 的整数。

// 运行如下代码：class1 {.mixin(#ddd) }
.class2 {.mixin(#555) }
// 就会失去：.class1 {
    background-color: black;
    color: #ddd;
}
.class2 {
    background-color: white;
    color: #555;
}

导引序列应用逗号‘,’宰割，当且仅当所有条件都合乎时，才会被视为匹配胜利。导引中可用的全副比拟运算有：> >= = =< <。

.m-mixin (@a) when (@a > 10), (@a < 100) {...}
// 导引能够没有参数，也能够对参数进行比拟运算
@media: mobile;
.mixin () when (@media = mobile) {...}
.mixin () when (@media = desktop) {...}
.max (@a, @b) when (@a > @b) {width: @a}
.max (@a, @b) when (@a < @b) {width: @b}

如果想要基于值的类型进行匹配的话，能够应用 is 表达式进行判断

.mixin (@a, @b: 0) when (isnumber(@b)) {...}
.mixin (@a, @b: black) when (iscolor(@b)) {...}

常见的检测函数：iscolor、isnumber、isstring、iskeyword、isurl
判断一个值是纯数字，还是某个单位量，能够应用函数：ispixel、ispercentage、isem

应用 and/not 关键字实现与 / 非条件

.mixin(@a) when (isnumber (@a) ) and (@a > 0) {...}
.mixin(@b) when not (@b > 0){...}

运算与防止编译
任何数字、色彩或者变量都能够参加运算. 来看一组例子:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

@base-color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

如果像上面这样单位运算的话:

@var  : 1px + 5; // 6px
width  : (@var + 5) *2; // 被容许应用括号
border: (@width * 2) solid black;  // 能够在合乎属性中进行应用

那么如果咱们不心愿 less 进行运算，而是将表达式输入呢？

例如 css3 中新增的属性 calc()，其最大的益处就是用在流体布局上，浏览器能够通过 calc()计算失去元素的宽度。
less 中也思考到了这点，咱们能够应用～“表达式”来防止编译，这样就可原样输入表达式

.test_03{width:~"calc(300px-30px)";
}
// 输入：.test_03{width:calc(300px-30px);
}

嵌套
ESS 能够让咱们以嵌套的形式编写层叠款式. 让咱们先看下上面这段 CSS:

#header {color: black;}
#header .navigation {font-size: 12px;}
#header .logo {width: 300px;}
#header .logo:hover {text-decoration: none;}
// 在 less 中, 咱们就能够这样写:
#header {
    color: black;

    .navigation {font-size: 12px;}
    .logo {
         width: 300px;
        &:hover {text-decoration: none}
    }
}

留神 & 符号的应用—如果你想写串联选择器，而不是写后辈选择器，就能够用到 & 了. 这点对伪类尤其有用如 :hover 和 :focus.

函数
less 自身提供了一系列的色彩运算函数。色彩会被转化成为 HSL 色调空间，而后在通道级别操作。

lighten(@color, 10%);     // 返回一个比 @color 低 10%更轻的色彩
darken(@color, 10%);      // 返回一个比 @color 高 10%较暗的色彩
saturate(@color, 10%);    // 返回比 @color 多饱和度 10%的色彩
desaturate(@color, 10%);  // 返回一个比 @color 少饱和度 10%的色彩
fadein(@color, 10%);      // 返回一个比 @color 少 10%透明度的色彩
fadeout(@color, 10%);     // 返回一个比 @color 多 10%透明度的色彩
fade(@color, 50%);        // 返回一个色彩透明度为 50%的色彩
spin(@color, 10);         // 返回色调比 @color 大 10 度的色彩
spin(@color, -10);        // 返回一个比 @color 小 10 度色调的色彩
mix(@color1, @color2);    // 返回一个混合 @ color1 和 @ color2 的色彩

举个小栗子：

@base: #f04615;
.class {color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

能够获取色彩的具体参数

hue(@color)                     // 获取色相
saturation(@color)             // 获取饱和度
lightness(@color)              // 获取明度

也能够在一种色彩的通道下面创立另外一种色彩,@new 将会放弃 @old 的 色调, 然而具备不同的饱和度和亮度.
@new: hsl(hue(@old), 45%, 90%);

Math 函数：less 提供了一组不便的数学函数，能够应用它们解决一些数字类型的值。

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
percentage(0.5); // returns `50%`
// 以及如下函数：sqrt: 平方根函数（保留单位）abs: 取绝对值（保留单位）三角函数（返回数值)
反三角函数（返回以弧度为单位的角度)
pi: 返回圆周率 π  
pow(a，b): 返回 a 的 b 次方 
mod（a，b: 返回第一个参数对第二参数取余的后果
min: 返回最小的值 
max: 返回最大的值

类型函数：验证待验证的值是否为某一类型 例如：isnumber()、isstring()、iscolor()、iskeyword()、isurl() 等等。上面简略介绍 isnumber()函数

如果待验证的值为数字则返回 true，否则返回 false。参数：value - 待验证的值或变量。返回值：如果待验证的值为数字则返回 true，否则返回 false。案例：isnumber(#ff0);     // false
    isnumber(blue);     // false
    isnumber("string"); // false
    isnumber(123 4);     // true
    isnumber(56px);     // true
    isnumber(7.8%);     // true

命名空间
有时候，咱们可能更好地组织 CSS 或是单纯的为了更好地封装，咱们会将会一些变量或是混合模块进行打包操作，为了后续进行复用

#bundle {.button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {background-color: white}
  }
  .tab {...}
  .citation {...}
}
// 当咱们想要在某一个中央引入 button 的款式的时候：#header a {
  color: orange;
  #bundle > .button;
}

作用域
less 的作用域和其余编程语言非常的类似，首先在本地的变量和混合模块进行查找，如果没有找到的话，就会去父及作用域查找，直到找到为止。

@var: red;
#page {
  @var: white;
  #header {color: @var; // white}
}
#footer {color: @var; // red}

importing(导入)
咱们如果想要引入 less 文件，.less 的后缀能够有能够没有

@import "lib.less";
@import "lib";

然而想要导入一个 CSS 文件而且不心愿 less 对它进行解决，只有加上 CSS 后缀就能够了。这样的话 less 就能够跳过，不去解决他了。
import "lib.css";

JavaScript 表达式
（1）JavaScript 表达式也能够在.less 文件中应用. 能够通过反引号的形式应用:

@var: `"hello".toUpperCase() + '!'`;  // @var :"HELLO!"

（2）也能够同时应用字符串插值和防止编译

@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`; //@var: HELLO!;

（3）能够拜访 JavaScript 的环境

@height: `document.body.clientHeight`;

（4）将一个 JavaScript 字符串解析成 16 进制的色彩值，能够应用 color 函数

@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);

参考：
https://www.jianshu.com/p/9f6…
https://www.jianshu.com/p/35c…

正文完
less
发表至： less
2021-05-16
 0
关于less:Less-混合函数
关于less:vue-cli3-使用less变量Variable-xxx-is-undefined
关于less:Less基础使用秘籍让你的CSS更高效
关于less:Less用法小记