Less 的使用

小鱼儿 2023-01-10 13:29 164阅读 0赞

vscode 插件 EasyLESS

EasyLESS // 插件把原来的less文件编译为css文件

Lass 变量

@变量名: 值;  //不能与数字开头，不能包含特殊字符，变量名区分大小写，必须用@开头

// 定义一个粉色的变量
    @color: pink;
    // body 使用了这个变量
    body { 
        background-color: @color;
    }

Lass 嵌套

<div class="header">
    	<a href="#">文字</a>
    </div>
    
    .header { 
        width: 200px;
        height: 200px;
        background-color: pink;
        // 1. less嵌套 子元素的样式直接写到父元素里面就好了
        a { 
            color: red;
            // 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
            &:hover { 
                color: blue;
            }
        }
    }

Lass 运算

@baseFont: 50px;
    html { 
        font-size: @baseFont;
    }
    @border: 5px + 5;
    div { 
        width: 200px - 50;
        height: (200px + 50px ) * 2;
        border: @border solid red;
        background-color: #666 - #222;
    }
    img { 
        width: 82rem / @baseFont;
        height: 82rem / @baseFont;
    }
    // 1. 我们运算符的左右两侧必须敲一个空格隔开
    // 2. 两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
    // 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准

less文件 引入另外一个 less 文件

@import "common";  // @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 Less 的使用

vscode 插件 EasyLESS EasyLESS // 插件把原来的less文件编译为css文件 Lass 变量 @变量名: 值; //不

小鱼儿/ 2023年01月10日 13:29/ 0 赞/ 165 阅读

相关 less基本使用

less是一个扩展的css语言；可定义变量； <!DOCTYPE html> <html> <head> <meta charset="ut

约定不等于承诺〃/ 2022年10月05日 00:45/ 0 赞/ 181 阅读

相关 less笔记-Less安装与基础使用

一、安装Less npm为Node.js的包管理器，通过npm可简易的安装Less。 Node.js下载地址：https://nodejs.org/en/ 下载的Node

布满荆棘的人生/ 2022年09月25日 13:21/ 0 赞/ 269 阅读

相关 less使用

less的特点：大体上语法同css，但是支持变量，嵌套等特殊用法，使用起来也更方便。 less不能直接运行在浏览器上，得通过转换为css代码，采用用于浏览器

曾经终败给现在/ 2022年09月04日 11:42/ 0 赞/ 186 阅读

相关 less的使用介绍（一）

Less 类似的预处理css语言还有 Sass styuls等等 > 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点 > [官网][Link

àì夳堔傛蜴生んèń/ 2022年06月13日 08:40/ 0 赞/ 181 阅读

相关 less （七） when 的使用

下面看看 less when 的使用；我们写一个样式：当输入的宽度大于等于150px 的时候，给div添加一种样式；

左手的ㄟ右手/ 2022年05月26日 00:39/ 0 赞/ 466 阅读

相关 less（六）混合的使用

直接看下面的代码：混合就相当于一个函数，我们可以使用不同的参数来反复使用这个函数； ![70][] 上面的代码首先定义了一个函数

古城微笑少年丶/ 2022年05月26日 00:24/ 0 赞/ 198 阅读

相关 LESS使用教程

LESS使用教程第一章 LESS简介第一节变量第二节混合第三节嵌套规则

灰太狼/ 2022年05月19日 02:46/ 0 赞/ 290 阅读

相关 SCSS和LESS的使用

一. Sass/Scss、Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，

爱被打了一巴掌/ 2022年02月18日 09:17/ 0 赞/ 414 阅读

相关 vue 使用less

vue中使用less 1、在创建项目时使用less编译或者 1、安装 cnpm install -D less cn

妖狐艹你老母/ 2021年07月24日 15:14/ 0 赞/ 479 阅读