css 原生变量设置

● 定义变量

 html {
    /* css 原生也支持变量的设置 */
    --color: #bfa;
    --length: 100px;
}

● 使用变量

.box1 {
    width: var(--length);
    height: var(--length);
    background-color: var(--color);
}

less 简介

来源：less 简介

less 是一门 css 预处理语言，less 是一个 css 的增强版，通过 less 可以编写更少的代码实现更强大的样式

在 less 中添加了许多的新特性：

● 对变量的支持
● 对 mixin 的支持
● ……

less 语法大体上和 css 语法一致，但是 less 中增加了许多对 css 的扩展
所以浏览器无法直接执行 less 代码，要执行必须将 less 转换为 css，然后再由浏览器执行。

less 插件

● Easy Less

VSCode 中添加插件 Easy Less

less 插件测试

项目中新建文件 css-style.less

编写下面内容

body {
    width: 100px;
    height: 100px;
    div {
        color: red;
    }
}

保存后，同文件夹下自动生成了 style.css，内容如下

body {
  width: 100px;
  height: 100px;
}
body div {
  color: red;
}

less 注释

值	作用
//	less 中的单行注释，不会被解析到 css 文件中
/**/	less 中的多行注释，会被解析到 css 文件中

less 变量

来源：less 变量

变量，在变量中可以存储一个任意的值
并且我们可以在需要时，任意修改变量中的值

● 变量定义

变量的语法：@变量名:变量值

@a:100px;
@b:#bfa;
@c:box6;
@img: '../images/';
@a:200px;

● 变量使用

.box1 {
    //使用变量时，如果是直接使用则以 @变量名 的形式使用即可。
    width: @a;
    color: @b;
}
//作为类名或者一部分值使用时，必须以 @{变量名} 的形式使用
.@{c} {
    width: @a;
    background-image: url("@{img}1.png");
    height: @d;
}
//可以在变量声明之前使用变量
@d:335px;
div{
    width: @a;
    //引用 width 的宽度
    height: $width;
}

生成 css 效果

.box1 {
  /*334*/
  background-color: #bfa;
}
.box1 {
  width: 200px;
  color: #bfa;
}
.box6 {
  width: 200px;
  background-image: url("../images/1.png");
  height: 335px;
}
div {
  width: 200px;
  height: 200px;
}

父元素和扩展

来源：父元素和扩展

● 父元素

定义

/*&*/ 
.box1 {
    >.box2 {
        color: red;
        //& 表示外层的父元素 box2
        &:hover {
            color: blue;
        }
    }
    //为 box1 设置一个 hover
    //& 表示外层的父元素 box1
    &:hover {
        color: orange;
    }
}

生成 css

/*&*/
.box1 > .box2 {
  color: red;
}
.box1 > .box2:hover {
  color: blue;
}
.box1:hover {
  color: orange;
}

● 扩展

/*extend*/
.p1 {
    width: 100px;
    height: 200px;
}
//:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1) {
    color: red;
}
.p3 {
    //直接对指定的样式进行引用，这里相当于将 p1 的样式在这里进行了复制
    //mixin 混合
    .p1();
}
//使用类选择器时可以在选择器后面添加 ()，这时实际上创建了一个 mixins
.p4() {
    width: 100px;
    height: 100px;
    background-color: blue;
}
.p5 {
    .p4();
}

生成 css

/*extend*/
.p1,
.p2 {
  width: 100px;
  height: 200px;
}
.p2 {
  color: red;
}
.p3 {
  width: 100px;
  height: 200px;
}
.p5 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

混合函数

来源：混合函数

● 定义使用

//混合函数，在混合函数中可以直接设置变量
.test(@w,@h,@bg-color) {
    width: @w;
    height:  @w;
    border: 1px solid @bg-color;
}
div {
    //调用一个混合函数，按顺序传递参数
    //.test(100px,200px,blue);
    //调用一个混合函数，按指定参数名称传递参数
    .test(@bg-color:red,@h:100px,@w:200px);
}
span {
    //调用 less 定义的函数，取颜色中间值
    color: average(red,yellow);
}

● 生成的 css

div {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}
span {
  color: #ff8000;
}

less 补充

来源：less 补充

import

//import 将其它 less 引入当前文件，当前文件生成 css 时，会加入引入文件生成的 css 
@import "syntax2.less";
div {
}

运算

● 定义 less

div {
    //在 less 中所有的数值都可以直接进行运算
    // + - * /
    width: 200px + 100px;
    height: 200px * 2;
    border: 1px solid red;
}

● 生成的 css

div {
  width: 300px;
  height: 400px;
  border: 1px solid red;
}

浏览器中定位 less

因为 less 最终是生成 css 在浏览器中呈现，假如某个元素需要修改，怎么定位到具体的 less 呢？

● 找到 less 插件，复制下面的内容

● VSCode 设置

设置-扩展-Easy LESS configuration-在 settings.json 中编辑

设置下面内容，主要是 "sourceMap": true

{
    "typescript.locale": "zh-CN",
    "editor.fontSize": 18,
    "emmet.triggerExpansionOnTab": true,
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
    "liveServer.settings.ChromeDebuggingAttachment": false,
    "liveServer.settings.port": 5500,
    "files.autoSave": "afterDelay",
    "less.compile": {
        "compress": false, 
        "sourceMap": true, 
        "out": true 
      }
}

● other.less

div {
    //在 less 中所有的数值都可以直接进行运算
    // + - * /
    width: 200px + 100px;
    height: 200px * 2;
    border: 1px solid red;
  }

● 同目录生成了 other.css

div {
  width: 300px;
  height: 400px;
  border: 1px solid red;
}
/*# sourceMappingURL=./other.css.map */

● 同目录生成了 other.css.map

{"version":3,"sources":["other.less"],"names":[],"mappings":"AAAA;EAGI,YAAA;EACA,aAAA;EACA,qBAAA"}

● 测试页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/other.css">
</head>
<body>
    <div class="box1"></div>
</body>
</html>

● 浏览器测试