前端三大Css处理器之Less

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

Less是Css预处理器之一,分别有Sass、Less、Stylus这三个。

       Lesshttps://lesscss.org/        Less是用JavaScript编写的,事实上,Less是一个JavaScript库,他通过混合、变量、嵌套和规则设置循环扩展了原生普通Css的功能。Less的少数缺点之一是它不支持函数

Less的语法与Scss十分相似,只是在声明变量时,Less使用@而不是$sign。

        Sasshttps://www.sass.hk/guide/        Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。

        Stylushttps://www.stylus-lang.cn/        Stylus由Node.JS编写,与JS堆栈完美匹配。Stylus神兽Sass的逻辑能力和Less的简单性的影响。与Sass或Less版本相比,Stylus的一个优点就是它具有极其强大的内置功能,并且能够处理繁重的计算。

Less笔记:

JavaScript代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>学无止境,永远对学习保持一种敬畏的态度!</title>
  <link rel="stylesheet" type="text/css" href="./css/01.css">
</head>

<body>
  <div id="wrap">
    <div class="inner"></div>
    <div class="inner2"></div>
  </div>
</body>

</html>

Less样式代码:文章来源地址https://www.toymoban.com/news/detail-687153.html

// less变量
@c-pink: pink;
@mgn: margin;
@wrap: #wrap;

// 混合
.juzhong(@width: 10px, @height: 10px, @color: skyblue){
  width: @width;
  height: @height;
  background: @color;
  // less中的嵌套规则
  // 注意点:一定要加&,否则会编译成父子关系,使用&:表示平级
  &:hover{
    background: @c-pink;
  }
}

* {
  padding: 0;
  @{mgn}: 0;
}
/* 这是我想给用户看的注释 */
// 这是给程序员看的注释
@{wrap} {
  width: 500px;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid skyblue;
  .inner {
    .juzhong(100px , 100px, red);
  }
  .inner2 {
    .juzhong(@color: gray);
  }
}

// less中唯一有一点逻辑的地方:变量的延迟加载(看作用域)
@var: 0;
.wzh-1{
  @var: 1;
  .wzh-2 {
    @var: 2;
    three: @var;  // 3
    @var: 3;
  }
  one: @var;  // 1
}
// less中的嵌套规则


// 注释



// 变量  @开头
// @c-pink: pink;  color: @c-pink;
// @wrap: #wrap;   @{wrap} {}
// @margin: margin;  @{margin}: auto;



// 场景:同一个大盒子下两个一模一样的小盒子,小盒子代码重复,如何复用?  混合即可高效解决
// less普通混合 :  juzhong()
// 混合的样式会在css文件内显示



// less不带输出混合: .juzhong()
// 混合的样式只在less文件内显示(给混合名字后面加上小括号即可,调用时也要加小括号)



// 带参数并且带默认值的混合 .juzhong(x, y)  俗称mixin
// 只需要在 .juzhong(@width, @height, @color)
// 1、调用时需要接收形参
// 2、并且需要默认值



// 命名参数混合
// 1、调用 .juzhong()函数时,它需要传三个参数,如果你只想要传参一个参数的话,就需要给参数命名;
// 2、命名参数这样使用: .juzhong(@color: black)  这样既可,如果不给参数命名,它会将颜色的值赋值到width宽度上去;



// arguments变量   实参列表  具有length属性的对象叫做伪数组
// .juzhong(@w, @line, @color) { border: @arguments}



// less计算: 加减乘除   计算时只需要一方带单位即可
.wzh-1{ width: (100 + 100px)}



// 避免编译:像我们css中计算的一个方法calc,
// 因为它是浏览器自带的方法,它是会被自动识别并编译的,
// 所以我们不需要再让less去编译它,我们就可以使用 ~'' 将calc计算包起来,就会避免less编译这行计算样式
.lv{
  margin: 0;
  padding: ~'calc(100 + 100px)';
}

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

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

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

相关文章

  • 【前端面经】CSS-less/sass/scss的区别和基本使用

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

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

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

    2024年02月15日
    浏览(61)
  • 在vite+vue3项目中配置使用css预处理器(less/sass)以及路径别名

    vite已经将这些预处理器的loader内置了,我们不用再像在webpack项目中那样,需要下载和配置一堆相关的loader,我们只需要下载less,sass依赖,就能直接在项目中使用啦 使用npm或者yarn来安装以下依赖: Less预处理器: npm install -D less Sass预处理器: npm install -D sass 如图,下载之后

    2024年02月11日
    浏览(99)
  • 在 Less 中使用与 Less 内置函数同名的原生 CSS 函数

    calc() - CSS:层叠样式表 | MDN Getting started - Escaping | Less.js Using The CSS Function calc() Inside The LESS CSS Preprocessor 在原生 CSS 中有以下的函数: calc() 、 max() 、 min() 等,而在 Less 中也有同名的函数,使用的时候可能会冲突,无法得到需要的结果。 对于 calc() ,Less 进行了处理,不会对数

    2024年02月08日
    浏览(55)
  • 【Css】Less和Sass的区别:

    一、定义: 【1】Less Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。 【2】Sass Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌

    2024年02月10日
    浏览(43)
  • css/less/scss代码注意事项

    一.命名 1.类名使用小写字母,以中划线分割;id 使用 驼峰式命名; 2.less/scss中的函数、混合采用驼峰命名; 3. class 的命名不要使用 标签名,如 .p .div .img ; 二.选择器 尽量使用直接子选择器,否则,有时会造成性能损耗 .content .title { ... } (不推荐)(后代选择器) .content .title {

    2024年02月04日
    浏览(51)
  • css ,less和sass的区别[简洁易懂

    CSS、Less和Sass都是用于样式表编写和管理的技术,它们之间有以下区别: CSS(层叠样式表)是一种标准的样式表语言,用于描述网页的外观和样式。它是前端开发中最基础和常用的技术,所有网页都需要使用CSS来定义样式。 Less是一种CSS预处理器,它在CSS的基础上提供了更多

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

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

    2024年02月03日
    浏览(54)
  • css,less,scss中的深度选择器,结合elementUi使用

    css中深度选择器用到的是 加类名 可以很方便的找到自己想要修改的样式  lees中用到 /deep/ 加类名   scss中用到::v-deep 加类名    

    2024年02月13日
    浏览(42)
  • 如何在微信小程序中使用less来编写css

    在微信小程序中使用 Less 需要一些额外的配置步骤,因为小程序本身不支持直接引用 Less 文件。我们可以借助 Webpack 进行构建,使用一些 loader 来编译 Less 文件。以下是具体步骤: 初始化项目 使用微信开发者工具新建一个小程序项目,或在已有项目的基础上操作。 安装依赖 使用

    2024年04月09日
    浏览(61)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包