Less学习笔记

最新推荐文章于 2023-08-02 16:00:33 发布
最新推荐文章于 2023-08-02 16:00:33 发布
阅读量332 收藏 1
点赞数
文章标签： less css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HiLiou/article/details/108741924
版权

Less学习

Less简介

less是一门CSS预处理语言，给CSS增加了变量、函数等特性。

Less安装及使用

命令行安装

1.npm install -g less		//安装less
2.npm install -g less-plugin-clean-css		//安装clean-css，用于压缩css
3.lessc index.less index.css
4.lessc --clean-css index.less index.min.css

引入less.js文件

1.创建index.less文件
2.引入index.less文件
<link rel="stylesheet" href="index.less" type="text/less" />
3.引入less.js文件
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
4.在index.less文件中使用less语法编辑css样式

安装Easy LESS插件

  1. 在VS Code的扩展商店中，找到Easy LESS插件并安装，随后重启VS Code

  2. ”文件“-”首选项“-”设置“中找到Easy LESS的settings.json文件并打开

  3. 修改如下

    "less.compile": {
    "out":"./css/"
    }

  4. 在index.less文件中修改css样式，将会在css文件下生成新的index.css文件

    <link rel="stylesheet" type="text/css" href="/css/index.css" />

Less注释

//该类型注释不会被编译到css文件中去
/*该类型注释会被编译到css文件中去*/

Less变量

用@来声明一个变量

  1. 变量作为普通属性值来使用时，直接使用“@变量名”
  2. 变量作为选择器/属性名/url的时候，使用"@{选择器/属性名/url}"
  3. 变量延迟加载，可以先使用，后声明
@bgcolor:pink;	//声明背景变量
@m:margin;		//声明属性名变量，不常用
@h1:#h1;		//声明选择器变量，不常用
@{h1}{			//调用选择器变量
    @{m}: 0;	//调用属性名变量
    background: @bgcolor;	//调用背景变量
}
/*变量的延迟加载*/
#h1{
    @var: 1;
    num: @var;	//num的值最后会是3
    @var: 3;
}

Less嵌套

  1. 父级嵌套规则

    #div1{
    #div2{
	
    }
}

  2. 平级嵌套规则

    #div1{
	&:hover{
	
	}
}

Less 混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

优点是灵活性高，缺点是代码冗余

现有div1及其内部div2，div2要在div1中居中

  1. 普通混合，编译后的css文件中带有".juzhong"样式

    body{
    margin: 0;
    padding: 0;
    .juzhong{				//选择器后面没有括号，css中会输出该样式
        width: 100px;
        height: 100px;
        background-color: pink;
        transform: translate(50%,50%);
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
        .div2{
            .juzhong
        }
    }
}

  2. 不带输出的混合，编译后的css文件中没有“.juzhong”样式

    body{
    margin: 0;
    padding: 0;
    .juzhong(){				//选择器后加上括号，css中不输出该样式
        width: 100px;
        height: 100px;
        background-color: pink;
        transform: translate(50%,50%);
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
        .div2{
            .juzhong()
        }
    }
}

  3. 带参数的混合

    body{
    margin: 0;
    padding: 0;
    .juzhong(@w,@h,@bgc){		//选择器中定义形参
        width: @w;
        height: @h;
        background-color: @bgc;
        transform: translate(50%,50%);
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
        .div2{
            .juzhong(100px,100px,pink)		//调用时传入实参
        }
    }
}

  4. 带参数且有默认值的混合

    参数最后完整传入，如不完整传入有可能发生错误

    body{
    margin: 0;
    padding: 0;
    .juzhong(@w:50px,@h:50px,@bgc:red){		//定义形参时同时指定默认值
        width: @w;
        height: @h;
        background-color: @bgc;
        transform: translate(50%,50%);
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
        .div2{
            .juzhong(100px,100px,pink)	
            .juzhong(100px,100px)	/*当传入的参数数量不完整时，会按顺序将第									一个实参赋值给第一个形参，以此类推*/
            .juzhong()		//不传入实参就会选择默认值
        }
    }
}

  5. 命名混合

    如果只想给其中某一个变量赋值，需要使用命名混合

    body{
    margin: 0;
    padding: 0;
    .juzhong(@w:50px,@h:50px,@bgc:red){
        width: @w;
        height: @h;
        background-color: @bgc;
        transform: translate(50%,50%);
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
        .div2{
            .juzhong(@bgc:pink)  	/*只给背景赋值，其它采用默认值*/
        }
    }
}

  6. 匹配模式

    如需要一个大的和一个小的div，可采用匹配模式

    body{
    margin: 0;
    padding: 0;
    .juzhong(@_,@bgc){				//@_是公共样式
        transform: translate(50%,50%);
    }
    .juzhong(small,@bgc){
        width: 50px;
        height: 50px;
        background-color: @bgc;
    }
    .juzhong(big,@bgc){
        width: 100px;
        height: 100px;
        background-color: @bgc;
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
        .div2{
            .juzhong(big,pink)		//根据传入实参的不同选择样式
        }
    }
}

  7. arguments变量

    body{
    margin: 0;
    padding: 0;
    .juzhong(@w:50px,@h:50px,@bgc:red){		
        width: @w;
        height: @h;
        background-color: @bgc;
        transform: translate(50%,50%);
    }
    .border(@a,@b,@c){
        border: @arguments;		//使用arguments变量引用传入的实参
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
        .div2{
            .juzhong(100px,100px,pink);
            .border(1px,solid,black);
        }
    }
}

Less继承

继承的优点是代码简洁，缺点是灵活度低，不能使用参数

  1. 继承

    body{
    margin: 0;
    padding: 0;
    .juzhong{	
        transform: translate(50%,50%); 
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
        .div2:extend(.juzhong){     //第一种
            width: 100px;
            height: 100px;
            background-color: pink;
           // &:extend(.juzhong);   //第二种
        }
    }
}

  2. all关键字

    body{
    margin: 0;
    padding: 0;
    .juzhong{	
        transform: translate(50%,50%); 
    }
    .juzhong:hover{
        background-color: red();
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: green;
        .div2:extend(.juzhong all){     //第一种
            width: 100px;
            height: 100px;
            background-color: pink;
           // &:extend(.juzhong all);   //第二种
        }
    }
}

Less避免编译

less有时候会帮助我们进行计算，然后我们不想让其计算的话，可以采用“~”关键字

.div{
    width: ~"calc(200px + 200px)";
}
HiLiou
关注
less学习笔记
DSelegent的博客
08-21 856
less学习笔记
vue中使用less
qq_45669178的博客
10-12 3361
一、less的基本使用二、配置全局样式的less变量 一、less的基本使用 1、下载： npm install less --save npm install less-loader --save 2、使用（在vue文件里面直接使用，不用配置） <template> <div class="box"> 你好 </div> </template> <script> export default { } .
Less 教程【一】概览
qq_39223195的博客
06-16 2032
Less 是一个向后兼容的 CSS 语言扩展，因此学习它需要一定的 CSS 基础。本系列旨在深入的学习和探讨 Less 的功能与特性，但作为系列的第一篇，本文会讲的浅一些。因为对于很多中小型项目来说，只要学会变量、混合、嵌套、运算等基础内容就足以应付，且 Less 本身也十分易学易用。本系列的结构与官方文档基本一致，朋友们可以对照官方文档一起阅读。...............
less合集（一）：less设置全局样式----mixin&自定义样式&初始化vant组件
hyduan_h5的博客
03-18 6544
一：新建样式文件 文件目录可自定义：我的demo如下图，styles主要用于对于样式的全局设置，比如vant样式，样式变量等；index.less只要用于对文件的引入 index.less文件中 @import './var'; var.less文件中 @theme-color: #eb0029; @theme-color-disabled: #fabfc9; @margin-large: 32px; @margin-middle: 24px; @margin-small: 16px; @margi
webpack 入门教程
qq_41974199的博客
09-16 165
webpack 入门教程 文章目录webpack 入门教程1：webpack 是什么2：webpack 优点和缺点3：webpack 安装 1：webpack 是什么 Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码。 Webpack可以从终端、或是更改 webpack.config.js 来设置各项功能。 要使用 Webpack 前须先安装 Node.js。Webpack 其中一个特性是使用加载器来将资源转化成
less 什么是less 怎么使用less
Liux- 的博客
06-10 2445
什么是less？ 作为一个前端开发，写css样式是再平常不过的事情了，有时候，多个元素的样式是一样的，但是我们还是会把这些样式冲刺呢写一遍，要不就是键盘三剑客 CTRL + C，CTRL + v，真是苦了比程序猿，现在，我们不用再那么傻了，我们给css加点猛料。less是一个兼容css的拓展语言。 因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。 Less 到底为 CSS 添加了什么功能？以下就是这些新加功
common.less文件导入index.less文件
m0_67545415的博客
10-08 123
1
前端常用的三种引用方式（css、less、js）
a_xia_o的博客
02-12 318
前端常用的三种引用方式（css、less、js）
javascript系列之引入文件方式
最新发布
StayAlive1887的博客
08-02 1758
随着你越来越广泛的使用javascript，你可能会遇到这种情况：你在不同的网页中重复使用javascript代码。你不得不在多个html文件中维护相同的javascript代码。这时候，script标签提供一种机制，允许你在外部文件中保存javascript代码，然后使用script标签引入外部的javascript文件。使用外部的javascript文件，你需要将所有的javascript代码写入一个单独的文件中，并且这个文件的后缀名改为 “.js” ，然后在HTML文档中使用上面的方式引入。
前端基础26：less常规用法
weixin_33938733的博客
10-10 312
less 开发环境(dev) 生产环境(pro 就是线上) dev中可以引入less.main.js去解析引入less的link的rel="stylesheet"需要改为rel="stylesheet/less" dev用解析工具直接生成(webpack) pro 会将less先解析成css再上上线 在index.less所在的文件夹运行lessc indx.less ind...
Antd样式覆盖问题，总是被一个antd/es/style/index.less的文件覆盖
lister1005的博客
08-26 4579
之前按照文档添加了antd样式，并使用自定义样式覆盖antd样式 import 'antd/dist/antd.less' import "@/styles/theme.less" 后来发现，theme的样式会再次被一个antd/es/style/index.less的文件样式覆盖 试过修改webpack的按需加载style无效 我猜测是loadable/component的懒加载导致后引入样式的，于是通过提前引入了该文件后，就没有被覆盖的情况了，如下 import 'antd/es/styl
解决Page index must not be less than zero问题
山间明月江上清风的专栏
04-27 8878
今天在单元测试mockmvc调用时报错org.springframework.web.util.NestedServletException: Request processing failed; nested exception is java.lang.IllegalArgumentException: Page index must not be less than zero! at o...
react学习-引入less
weixin_42429288的1博客
08-05 2754
使用create-react-app脚手架搭建一个项目，并在其中引入less 命令行输入 安装less和less-loader 配置webpack.config.js 第一种方式 第二种配置方式 要注意一个小细节 使用create-react-app脚手架搭建一个项目，并在其中引入less 参考大佬的两种方法 都可以实现，其中遇到了坑，记录一下 搭建好脚手架以后，打开隐藏的配置文...
项目架构 (二) 03-全局样式-新建src-styles-index.less文件 后在src-main.js中导入
weixin_44867717的博客
02-26 969
全局样式 设置全局样式，尤其是导航栏的背景蓝色 第一步：在src/main.js中导入 import ‘@/styles/index.less’ 新建全局样式文件：src/styles/index.less // -----------------------全局样式----------------------- //清除内外间距 *{ margin: 0; padding: 0; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值