# Less+响应式布局

---

theme: cyanosis
highlight: a11y-light

Less+响应式布局

less

1. less介绍：

   1. less是一种提高我们编写css效率的技术，专业术语“css预处理器”，less文件后缀名是".less",相同的技术有（scss，stylues）。
   2. 在工作中，写样式的地方，都不会直接写在css文件中，而是写在less文件中，再经过插件（easy less vscode）插件自动生成css文件，而我们只要在html结构中引入css文件即可。

   可直接link 引入less文件然后点击打开链接会显示 找不到less 再点击创建文件 就会自动创建 切记！！！找到刚刚引入得less文件 八后缀改成.css 因为浏览器不能直接识别less文件

3.easy less vscode插件

2.网页中, 文字文字颜色基本都是统一的， 如果网站改版，变换文字颜色， 如何修改代码？

方法一：逐一修改属性值（太繁琐）

方法二： 把颜色提前存储到一个容器，设置属性值为这个容器名

语法：

定义变量：@变量名：值；

使用变量： css属性：@变量名；

3.less语法–运算：

介绍：

加、减、乘直接书写计算表达式；

除法需要添加 小括号 或在除于号前面加个 “ ”

注意：

1. 除法需要添加 小括号 或 “.”；
2. 表达式存在多个单位以第一个单位为准；
3. 运算符前后要用空格隔开。

less语法–混合（mixin）

4.less语法–嵌套

作用：

快速生成后代选择器。

代码如下：

后代：

/* 后代 */
div {
    p {
        span {
            color: red;
        }
    }
}

兄弟：

/* 兄弟 */
div{
    p{ color: aqua;}
    span{color: pink;}
}

子代：

/* 子代选择器 */
div{
    >p{
        span{
            color: pink;
        }
    }
}

伪元素：

div{
    p