less学习语法

这篇具有很好参考价值的文章主要介绍了less学习语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.CSS函数的补充

1.rgb/rgba/translate/rotate/scale

2.非常好用的css函数:

  • var:使用css定义的变量
  • calc:计算css值,通常用于计算元素的大小或位置
  • blur:毛玻璃(高斯模糊)效果
  • gradient:颜色渐变函数

var:定义变量

less学习语法,Less,less,学习,前端

 css中可以自定义属性:

  • 属性名需要两个减号(--)开始
  • 属性值则可以是任何有效的CSS值

2.Less语法一:Less兼容CSS

  • 所以我们可以在less文件中编写所有的CSS代码
  • 知识将css的扩展名改成了.less结尾而已

3.Less语法二:变量(variables)

在一个大型的网页项目中,我们css使用到的某几种属性值往往是特定的

  • 比如我们使用到的主题颜色值,那么每次编写类似于#f3c258格式的语法;
  • 一方面是记忆不太方便,需要重新编写或者拷贝样式;
  • 另一方面如果有一天颜色改变,我们需要修改大量的代码;
  • 所以,我们可以将常见的颜色或者字体等定义为变量来使用;

less学习语法,Less,less,学习,前端

@mainColor:red;
.box{
    width: 250px;
    height: 100px;
    background-color:@mainColor;
}

4.Less语法三:嵌套

选择器的嵌套:

less学习语法,Less,less,学习,前端

&:表示父级

可以用于伪类、伪元素:

less学习语法,Less,less,学习,前端

5.Less语法四:运算

在Less中,算术运算符+-*/可以对任何数字、颜色或变量进行运算。

  • 算数运算符在加、减或比较之前会进行单位换算,计算的结果以最左侧操作数的单位类型为准;
  • 如果单位换算无效或失去意义,则忽略单位

less学习语法,Less,less,学习,前端

6. Less语法五:混合

在原来的CSS编写过程中,多个选择器中可能有大量相同的代码

  • 我们希望可以将这些代码进行抽取到一个独立的地方,任何选择器都可以进行复用
  • 在less中提供了混入来帮助我们完成这样的操作。

less学习语法,Less,less,学习,前端

.cloor{
    color: red;
}
.box1{
    .cloor()
}
.box2{
    .cloor()

}

 混合是一种将一组属性从一个规则集(或混入)到另一个规则集的方法。

 less学习语法,Less,less,学习,前端

注意:混入在没有参数的情况下,小括号可以省略,但是不建议这样使用。 

6.1混入是可以传递参数(定义变量)的。

定义:

less学习语法,Less,less,学习,前端

调用:

less学习语法,Less,less,学习,前端

 6.2混合和映射结合使用

作用:弥补less中不能自定义函数的缺陷

less学习语法,Less,less,学习,前端

 less学习语法,Less,less,学习,前端

7.less其它语法补充

7.1less语法七:extend继承 

  •  和mixins作用类似,用于复用代码
  • 和mixins相比,继承代码最终会转化成并集选择器

less学习语法,Less,less,学习,前端

less学习语法,Less,less,学习,前端

 7.2Less语法八:Less内置函数

  • Less内置了多种函数用于转换颜色、处理字符串、算术运算等。
  • 内置函数手册:https://less.bootcss.com/functions/

less学习语法,Less,less,学习,前端

less学习语法,Less,less,学习,前端文章来源地址https://www.toymoban.com/news/detail-659606.html

7.3Less语法九;作用域(Scopr)

  • 在查找一个变量时,首先在本地查找变量和混合
  • 如果找不到,则从“父”级作用域继承; 

7.4Less语法十:注释

  • 在Less中,块注释和行注释都可以使用;

7.5Less语法十一:导入

  • 导入的方式和CSS的用法是一致的;
  • 导入一个.less文件,此文件中的所有变量就可以全部使用了;
  • 如果导入的文件是.less扩展名,则可以将扩展名省略掉

到了这里,关于less学习语法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Echarts基础-安装语法高亮插件&less-rem转换动态适配大小

    Echarts是一个功能强大的JavaScript开源可视化库,专门用于创建各种图表和数据可视化。 以下是关于Echarts的一些基础介绍: 丰富的图表类型:Echarts提供了包括折线图、柱状图、散点图、饼图、雷达图、地图等多种常见的图表类型,满足不同的数据展示需求。 兼容性良好:它可

    2024年04月10日
    浏览(46)
  • 前端三大Css处理器之Less

    Less是Css预处理器之一,分别有Sass、Less、Stylus这三个。         Less https://lesscss.org/         Less 是用JavaScript编写的,事实上,Less是一个JavaScript库,他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。 Less的少数缺点之一是它 不支持函数 。 Less的语法与Scss十

    2024年02月10日
    浏览(46)
  • 前端面试官:介绍一下less和scss,以及他们的区别

    Less是一种CSS预处理器,它扩展了纯CSS的功能,提供了更多的功能和灵活性。Less语法与常规CSS语法非常相似,但引入了一些新的特性和语法规则,使得样式表的编写更加简洁和可维护。 以下是一些Less语法的特点和用法: 变量(Variables):你可以使用 @ 符号来定义和引用变量

    2024年02月08日
    浏览(49)
  • 前端css/less绕椭圆轨道旋转动画 带遮挡效果 3D

    效果如图,多个物体在轨道上绕中心物体旋转,当旋转到物体后面时将被遮挡。主要使用css实现,为了简化代码,引入less进行处理。 本质上是使用动画控制轨道带动内部的物体进行旋转,计算出每个物体在椭圆轨道上的位置,使用绝对定位放置物体。由于轨道上物体有多个

    2024年02月03日
    浏览(87)
  • 记录--前端换肤方案 - element+less无感换肤(无需页面刷新)

    前不久在改造一个迭代了一年多的项目时,增加了一个换肤功能。通过自己的探索,总结出了一套比较合适的改造方案供大家参考,如有更好的方案欢迎评论区踊跃评论😄 先上效果: 在查阅现有方案时,总结了目前使用的几种方案: 1、定义多套样式 首先定义一套或多套样

    2024年02月08日
    浏览(51)
  • 【前端面经】CSS-less/sass/scss的区别和基本使用

    随着Web开发的不断发展,CSS预处理器变得越来越流行。它们为Web开发者提供了一种更高效、更简便的CSS编写方式。Less、Sass以及SCSS作为最受欢迎的三种CSS预处理器,它们都为CSS编写提供了不同的特点和功能。 在本篇博客中,我们将会探讨这三种预处理器之间的区别以及它们的

    2024年02月06日
    浏览(56)
  • webpack5基础使用(1)-介绍、打包文件、处理样式资源(css、less)文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5

    webpack5是一个 静态资源打包工具 。 会以一个或多个文件作为打包的入口,将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以直接在浏览器端运行了 进一步来说就是: 当开发时,肯定会使用框架、es6模块化语法、less/sass等css预处

    2024年02月03日
    浏览(54)
  • 前端实现动态切换主题色-使用 css/less 动态更换主题颜色(换肤功能)或通过单击更改背景颜色

    提示: 以下是本篇文章正文内容,主要描述 使用 css/less 动态更换主题色(换肤功能) 提示: 使用 css/less 动态更换主题色(换肤功能), 方法共通,不限制技术栈: 其实在日常项目开发中经常会遇到有些用户想要一些自定义的的主题色来满足不同的视觉需求,这时候就需

    2024年02月15日
    浏览(61)
  • less的安装、安装less指定版本

    注意: 上面的安装可能运行的时候报错   因为less-loader的版本问题把版本降下来就行 例如:npm install less-loader@5.0.0 -D

    2024年02月11日
    浏览(40)
  • vscode html使用less和快速获取标签less结构

    扩展插件里面搜索 css tree 插件 下载 使用方法 选择你要生成的标签结构然后按CTRL+shift+p 第一次需要在输入框输入 get  然后选择 Generate CSS tree  less结构就出现在这个里面直接复制到自己的less文件里面就可以使用了  在html里面使用less 下载 Easy LESS 插件 自己创建.less文件保存

    2024年02月10日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包