less基础认知

帅气的一朵云朵
162 阅读2分钟

less

目标：使用less语法快速编译生成css代码

  • less是一个css预处理器.less文件后缀是.less

  • 扩充了css语言，使css具备一定的逻辑性，计算能力。

  • 注意：浏览器不识别less代码，目前阶段，网页要引入对应的css文件。

    编译插件

  • Easy LESS :

  • vscode插件

  • 作用：less文件保存自动生成css文件

less语法

注释：

  • 单行注释

语法：//注释内容 快捷键：ctrl+/

  • 块注释

语法：/* 注释内容 */ 快捷键：shift + alt + A

目标：使用less运算写法完成px单位到rem单位的转换

  • 运算：
  • 加，减，乘直接书写计算表达式
  • 除法需要添加小括号或.
  • 写法：
.box {
    width: 100+10px;
    width: 100-20px;
    width: 100*2px;

    //除法
    //68 > rem
    width: 29./37.5rem;
    width: (68/37.5rem);


    height: 29./ 37.5rem;
}

目标：能够使用less嵌套写法生成后代选择器

  • 嵌套：
  • 作用：快速生成后代选择器
  • 语法：
.box {
    color：red;

    .less {
        width: 100px;
    }
}

// less自动生成后代选择器

.box {
    color：red;
}

.box .less {
    width：100px；
}

  • 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

    目标：能够使用less变量设置属性值

    • 思考：

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

    • 变量
    • 方法：把颜色提前存储到一个容器，设置属性值为这个容器名
    • 变量：：存储数据，方便使用和修改。
    • 语法：

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

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

@colora:red;

.box {
    color: @colora;
}

.father {
    background-color: @colora;
}

.aa {
    color: @colora;
}

目标：能够使用less导入写法引用其他less文件

  • 思考：

开发网站时，网页如何引入公共样式？

CSS：书写link标签 LESS：导入

  • 导入：@import"文件路径"；
  • 语法
@import './01-体验less.less';
@import './02-注释';

目标：使用less语法导出css文件

  • 方法一：

配置Easyless插件，实现所有less有相同的导出路径 codevs里设置里面找到less插件 点击编辑


{
    "workbench.editor.enablePreview": false,
    "markdown.extension.preview.autoShowPreviewToSide": true,
    "less.compile": {
        "out":"../css/"
    }
}

// 单个文件导出

//out: ./qqq/daqiu.css


// out: ./abc/

.box {
    color: red;
}

目标：禁止导出

  • 禁止导出

    在less文件第一行添加：//out：false

// out:false
avatar
文章
阅读
粉丝