投稿
  1. 极客之音首页
  2. 技术随笔

全网最详细的less教程(为什么使用less和less的语法)以及 解决css的兼容性问题，并解决NameError: variable ## is undefined的问题

小半 • • 技术随笔 • 阅读 325

导读：本篇文章讲解 全网最详细的less教程(为什么使用less和less的语法)以及 解决css的兼容性问题，并解决NameError: variable ## is undefined的问题，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

目录

1. 为什么使用less

1.1 CSS的兼容性问题

在这里插入图片描述
我们现在想使用css原生设置变量的方式，来设置三个div不同属性的相同颜色，都是绿色，如上图所示。

假设三个div的id分别是div1 div2 div3：

  • div1：边框为绿色
  • div2：字体为绿色
  • div3：背景框为绿色

因而，实现的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的兼容性问题</title>

    <style type="text/css">

        /*设置颜色变量*/
        html {
            --color:green;
        }
        
        /*边框定义绿色*/
        #div1 {
            width: 50px;
            height: 50px;
            border: 1px solid var(--color);
        }

        /*设置字体为绿色*/
        #div2 {
            width: 50px;
            height: 50px;
            color: var(--color);
        }

        /*背景定义为绿色*/
        #div3 {
            width: 50px;
            height: 50px;
            background-color: var(--color);
        }
    </style>
</head>
<body>

<div id="div1"></div>
<div id="div2">这是div2</div>
<div id="div3"></div>

</body>
</html>

但是，我们如果将这段代码，使用ie浏览器打开，便是这样的：
在这里插入图片描述
ie直接报出兼容性的问题，而且如上样式也没有显示出来。

因而，CSS原生的设置变量会存在兼容性问题。

1.2 解决兼容性问题

我们可以通过less语言来解决上诉兼容性问题。

通过less代码生成CSS代码之后，使用ie浏览器打开，如下图所示：

在这里插入图片描述

2. less简介

  1. less官网

  2. 何谓less

less是一门css预处理语言：

  • 通过less可以编写更少的代码实现更强大的样式。

  • 在less中添加了许多的新特性，像对变量的支持，对mixin的支持… …

  • less的语法大体上与css语法一致，但是less中增添了许多对css的扩展

但是，浏览器无法直接执行less代码。要执行必须将less样式转换为css，然后再由浏览器执行。

3. 如何使用less

3.1 安装less

npm install less -g

-g 参数表示将lessc命令安装到全局环境。

对于特定版本（或 tag），你可以在软件包（package）名称后面添加 @VERSION ，例如:

 npm install less@2.7.1 -g

如果你的电脑出现 npm 不是内部或外部命令等错误，也就是说你的电脑没有安装node，此时你需要安装node

3.2 less编译

我们不能直接使用less文件，需要将less文件编译成css文件，如下代码所示：

D:\project\1myProject\bloghtml\less>lessc test.less test.css

使用外链的方式引入到html文件中，如下代码所示：

在这里插入图片描述

3.3 less基本语法

  1. 注释

除css注释外，less还支持//注释

  1. 变量

less可以像js一样声明变量，如下所示：

//声明
@width: 10px;

//在属性值中使用变量
#header {
    width:@width;
}

==== 插值语法 ====
//选择器中使用变量
@my-selector: banner;

.@{my-selector} {
    width:100px;
}

//URL中使用变量
@images: "../img";

body {
    background:url("@{images}/white-sand.png");
}
  1. 作用域

同js一样，less变量向父级作用域查找，如下所示：

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
  1. 导入外部less（@import）
@import "lib.less";
@import "lib";
  1. 嵌套（nesting）

嵌套是一种简写css选择器的方法

//嵌套将会将父级和祖级元素添加到前面
#header {
    color:black;
    .logo {   //等同于#header .logo
        color:red; 
        tr {     //等同于#header .logo tr
            color:yellow;
        }
    }
}
  1. 父级选择器

less通过&简写父级选择器

a {
    color:blue;
    &:hover {        //等同于 a:hover
        color:green;
    }

    & + & {  // a + a
        color:white;
    }

    &-children {  // a-children
        color:black;
    }
}
  1. 冒泡

针对媒体查询，这样同样的样式就不用复写了。

.component {
    width:300px;
    color:white;
    @media (min-width: 768px) {  // 等于复写一个@media>.component，已有的color属性将写入，width将覆盖
        width:600px;
    }
}

  1. 运算

    • less支持+,-,*,/运算，基本同js

    • 属性值的单位将参与换算，如果12px+12px = 24px

    • 当单位无法换算时，取消单位计算，比如12em+12px = 24

  2. 转义

转义中的文字将会原样输出,不会进行计算和转化

//less 3.5以下版本
@data: ~"min-width:640px";

//less 3.5+
@min768: (min-width: 768px);

3.4 less语言拓展

  1. Mixins混入样式

Mixin将一个样式集，“混入”另一个样式中，主要是方便简写复用属性

.borderd {
    border-top:2px;
}
#main a {
    color:white;
    .borderd();   //border-top:2px
}
  1. 带参数的混入样式
.border-radius(@radius){
    border-radius:@radius;
}

//调用
header {
    .border-radius(4px);  //border-radius: 4px;
}
  1. 参数可带默认值，可多个，可覆盖和@arguments
.border-radius (@radius: 5px,@color:yellow) {
    ....

    //@arguments 变量包含所有参数的值
}
//调用
header {
    .border-radius; //直接调用
    .border-radius(2px) //部分覆盖

}
  1. 不带参数(隐藏混入)
// 集合将被隐藏,不会暴露到css中
.wrap(){
    text-wrap:wrap;    
}


//调用
pre {
    .wrap
}
  1. 命名空间

命名空间用于在某一样式下声明的mixin，这样可以和其他mixin区分开

.bundle {
    mixin(){
        ...
    }
}

//调用
.bundle>mixin()
  1. 模式匹配的混合样式
//我们可以给多个样式匹配同一指定
.mixin (dark, @color) {  //只接受dark为首参
  color: darken(@color, 10%);
}
.mixin (light, @color) {  //只接受light为首参
  color: lighten(@color, 20%);
}
.mixin (@_, @color) {  //接受任意值
  display: block;
}
  1. 样式继承(Extend)
.inline{
    width:100px;
}

nav ul {
    &:extend(.inline);
    color:white;
}
  1. 样式合并(merge)
  • 逗号合并(使用+)

.myfunc() {
  box-shadow+: 5px 5px 5px grey;
}
.class {
  .myfunc();
  box-shadow+: 0 0 5px #f78181;
}
//  结果box-shadow: 5px 5px 5px grey, 0 0 5px #f78181;
  • 空格合并(使用 + 或 +_)
.mixin() {
  transform+_: scale(1);
}
.class {
  .mixin();
  transform+_: rotate(2deg);
}
//结果:  transform: scale(1) rotate(2deg);
  1. 导引(Guards)

导引类似条件判断，less通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。

.mixin (@a) when (lightness(@a) >= 50%) {   //后面的运算为true值，则应用样式
  background-color: black;
}

.mixin(#ddd); 


//导引中可用的全部比较运算有： >， >=， =， =<， <。，
//注意a=b，等同于js中a==b
//此外，关键字true只表示布尔真值,除去关键字true以外的值都被视示布尔假
//使用not关键字表示非


//导引序列使用逗号‘,’—分割,表示&&
.mixin (@a) when (@a > 10), (@a < -10) { ... }

//参数比较运算
.max (@a, @b) when (@a > @b) { width: @a }


//is*函式检验是否为某数据类型
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }


//CSS Guards(略)
.style when (@usedScope=mixin)
  1. 循环

通过导引来实现循环语句

.cont(@count) when (@count > 0) {
  .cont((@count - 1));
  width: (25px * @count);
}
div {
  .cont(7);
}
  1. 映射（Maps）

从Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}
  1. JavaScript表达式引入

less引入js很简单，只需要反引号：

//使用反引号表示
@var: `"hello".toUpperCase() + '!'`;
  1. 内置函数

函数手册

@width: 0.5;
percentage(@width); //50%

例：color函数

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // return a mix of @color1 and @color2

例：Math 函数

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
percentage(0.5); // returns `50%`

4. 问题

在编码时遇到的如是问题：NameError: variable ## is undefined

  1. 复现问题

这个问题是在将less编译成CSS报出的错误，比如NameError: variable @color is undefined，即变量@color未定义。如下文字所示：

D:\project\my\ts\less>lessc less解决CSS兼容性问题.less
NameError: variable @color is undefined in D:\project\my\ts\less\less解决CSS兼容性问题.less on line 8, column 21:
7   height: 50px;
8   border: 1px solid @color;
9 }
  1. 分析问题

那么如何解决呢？因为，我在定义@clolor变量时，没有在结尾处写结束符号，即;，如下截图所示：

在这里插入图片描述

  1. 解决问题

只要在@color:green加上分号即可，如@color:green;

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/99098.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！