1、先看效果图

上图中比较麻烦的是每块的底色处理,下面看怎么处理??

2、:nth-child(n) 选择器

匹配属于其父元素的第 N 个子元素,不论元素的类型。

n 可以是数字、关键词或公式。

  • 数字:最常见的使用方式,eg: :nth-child(1)

  • 关键词: Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。

  • 公式: 使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

3、主要思路:

  1. 运用less混合传参,参数既是 :nth-child(n) 选择器的公式

  2. 在混合里面处理每个原色的底色,通过 :nth-child(n) 选择器结合 ::after 伪元素实现。

有了思路之后,下面让我们看一下具体的代码实现??

4、代码实现

以下只贴颜色处理的核心代码??

.colorLine(@index, @startColor, @endColor) {
  .li-item:nth-child(@{index})::after {
    background: linear-gradient(136deg, @startColor, @endColor);
  }
}
.colorLine(1n, rgba(255, 122, 109, 1), rgba(255, 77, 62, 1));
.colorLine(2n, rgba(93, 219, 224, 1), rgba(0, 188, 218, 1));
.colorLine(3n, rgba(59, 220, 72, 1), rgba(92, 209, 46, 1));
.colorLine(4n, rgba(254, 190, 43, 1), rgba(255, 163, 0, 1));
.colorLine(5n, rgba(148, 117, 247, 1), rgba(119, 83, 233, 1));

4.1、代码说明:

通过Less混合传参,实现指定了下标是 1,2,3,4,5 的倍数的所有 li-item 元素的伪元素背景色


??????

?? 持续更文,关注我,你会发现一个踏实努力的宝藏前端??,让我们一起学习,共同成长吧。

?? 喜欢的小伙伴记得点赞关注收藏哟,回看不迷路 ??

? 欢迎大家评论交流,蟹蟹??

标签智能推荐:

微信公众号开发

Less官网三十分钟学会Less

gulp.js实现less批量实时编译

编译less文件,但本人感觉Koala用起来非常麻烦,好像不能做多个less文件的批量的编译;因为目前项目也没有用到webpack,我的less是通过vscode里的easyless插件来编译的,然而今天在项目中发现了个比较尴尬的问题,比如我编写了一个公用的base.less文件,里面定义了一些公用的变量、样式,其他.less文件都使用@import引入了base.less文件;接下来问题来了,当

sqli-labs全通关payload

 less-1: less-2: less-3: less-4: less-5: less-6: less-7: outfile,dumpfile,load_file函数的用法如下所示: less-8: less-9: less-10: less-11: less-12

【Web前端HTML5&CSS3】18-less简介

尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版目录less简介1、安装插件2、编写less3、less语法less注释父子关系嵌套变量其他4、混合函数其他5、补充less简介less是一门css的预处理语言less是一个css的增强版,通过less可以编写更少的代码实现更强大的样式在less中添加了许多的新特性:像对变量的支持、对mixin的支持...less的语法大体上和

前端自动化

一、less、sass、stylus它们是三种类似的样式动态语言,属于css预处理语言,它们有类似css的语法,为css赋予了动态语言的特性、如变量、继承、运算、函数等,这么做是为了css的编写和维护。它们使用的文件分别是:.less、.scss、.*styl,这些文件是不能再网页上直接使用的,最终要编译成css文件来使用,编译的方法有软件编译,或者用nodejs程序。less中文网址:http:

NodeJS中安装第三方模块`Gulp`以及它的使用

件压缩gulp-less:less语法转化,gulp-csso:压缩css先下载模块npmigulp-lessdest:gulp-less//引用gulp模块constgulp=require('gulp');constless=require('gulp-less');//css任务//1、less语法转换//2、css代码压缩gulp.task('cssmission',(cb)=>{g

HTML+CSS开发引入less

1.去less官网下载less.js或者less.min.js文件放在文件夹中注意:下载完文件后要把最后一行的注释删掉,否则有可能不起作用2.在页面中引用<linkrel="stylesheet/less"href="../less/XXX.less">//.less样式文件<scriptsrc="../js/less.min.js"></script>

webpack使用

###Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。Webpack可以将多种静态资源js、css、less转换成一个静态文件,减少了页面的请求。安装webpack首先要安装Node.js,Node.js自带了软件包管理工具npm,可以使用npm安装各种插件。Webpack至少需要Node.jsv0.6版本,直接安装最

Less

Less为什么需要Less?CSS需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码,造成这些困难的很大原因源于CSS是一门非程序语言,没有变量、函数、scope(作用域)等概念。Less为Web开发者带来了福音,它在CSS的基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大

17-css布局

流式布局flex布局rem+媒体查询+less