前端三大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代码:

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样式代码:

css 复制代码
// 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)';
}
相关推荐
周亚鑫5 分钟前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
Justinc.21 分钟前
CSS3新增边框属性(五)
前端·css·css3
fruge29 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia37 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫38 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
嚣张农民44 分钟前
JavaScript中Promise分别有哪些函数?
前端·javascript·面试
光影少年1 小时前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_1 小时前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu10830189111 小时前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾1 小时前
前端基础-html-注册界面
前端·算法·html