【CSS预处理语言】less

于 2023-03-06 21:05:05 发布
阅读量115 收藏
点赞数 1
分类专栏： 前端学习 文章标签： css less html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/menghen113/article/details/129370070
版权

视频

目录

less

less是一种动态样式语言，属于CSS预处理器的范畴，它扩展了CSS语言，增加了变量，Mixin,函数等特性，使CSS更易维护和扩展。

LESS就可以在客户端上允许，也可以借助Node.js在服务端运行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <!-- 
      less 官网：
      lesscss.cn
     -->
    <style type="text/less">
      * {
        margin: 0;
        padding: 0;
      }
      #wrap {
        position: relative;
        width: 300px;
        height: 400px;
        border: 1px solid black;
        margin: 0 auto;
        .inner {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          background: pink;
          height: 100px;
          width: 100px;
        }
      }
    </style>
    <div id="wrap">
      <div class="inner"></div>
    </div>
  </head>
  <body></body>
  <script src="./less.js-master/dist/less.min.js"></script>
</html>

Less编译工具

koala官网:www.koala-app.com

html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="./css/02.css" />
    <div id="wrap">
      <div class="inner"></div>
    </div>
  </head>
  <body></body>
</html>

less:

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  .inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: pink;
    height: 100px;
    width: 100px;
  }
}

生成的css

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: pink;
  height: 100px;
  width: 100px;
}

less中的注释

以//开头的注释，不会被编译到css文件中

以/**/包裹的注释会被编译到css文件中

less:

/*这是想暴露出去的注释*/
//这是见不得人的注释

生成的css:

/*这是想暴露出去的注释*/

less中的变量

用@来声明一个变量：@pink:pink;

  1. 作为普通属性值使用：@pink
  2. 作为选择器和属性名：#@{selector的值}的形式
  3. 作为URL:@{url}
  4. 变量的延迟加载

less:

/*这是想暴露出去的注释*/
//这是见不得人的注释
@color:pink;
@m:margin;
@selector:#wrap;
* {
  @{m}: 0;
  padding: 0;
}
@{selector} {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  .inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: @color;
    height: 100px;
    width: 100px;
  }
}

生成的css:

/*这是想暴露出去的注释*/
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ffc0cb;
  height: 100px;
  width: 100px;
}

less中的嵌套规则

  1. 基本嵌套规则(变量的延迟加载)
    less:

@var:0;
.class{
  @var:1;
  .brass{
    @var :2;
    three:@var;//3
    @var:3;
  }
  one:@var;//1
}

生成的css:

.class {
  one: 1;
}
.class .brass {
  three: 3;
}
  1. &的使用

less:

/*这是想暴露出去的注释*/
//这是见不得人的注释
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  .inner {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: pink;
    height: 100px;
    width: 100px;
    &:hover{
      background-color: skyblue;
    }
  }
}

生成的css:

/*这是想暴露出去的注释*/
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: pink;
  height: 100px;
  width: 100px;
}
#wrap .inner:hover {
  background-color: skyblue;
}

less中的混合

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" href="./css/01.css" />
    <div id="wrap">
      <div class="inner"></div>
      <div class="inner2"></div>
    </div>
  </head>
  <body></body>
</html>
  1. 普通混合
  2. 不带输出的混合
  3. 带参数的混合
  4. 带参数并且有默认值的混合

less:

.juzhong(@w:10px,@h:10px,@c:pink){
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: @c;
  height: @h;
  width: @w;
}
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  .inner {
   .juzhong();
  }
  .inner2 {
   .juzhong(200px,200px,deeppink);
  }
}

生产的css:

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ffc0cb;
  height: 10px;
  width: 10px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ff1493;
  height: 200px;
  width: 200px;
}
  1. 命名参数
    less:
.juzhong(@w:10px,@h:10px,@c:pink){
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: @c;
  height: @h;
  width: @w;
}
* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
  .inner {
   .juzhong(@c:black);
  }
  .inner2 {
   .juzhong(200px,200px,deeppink);
  }
}

生成的css

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 400px;
  border: 1px solid black;
  margin: 0 auto;
}
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #000000;
  height: 10px;
  width: 10px;
}
#wrap .inner2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #ff1493;
  height: 200px;
  width: 200px;
}
  1. 匹配模式
    less:
@import "./triangle.less";
//业务代码
#wrap > .sjx {
  .triangle(B,40px, yellow)
}

trangle.less:

.triangle(@_,@w,@c){
  width: 0px;
  height: 0px;
    /* 开启haslayout-->windows IE */
  overflow: hidden;
}
.triangle(L,@w,@c){
  border-width: @w;
  border-style: dashed solid dashed dashed;
  /* IE6不认识transparent -->画虚线 */
  border-color: transparent @c transparent transparent;
}
.triangle(R,@w,@c){
  border-width: @w;
  border-style: dashed dashed dashed solid;
  /* IE6不认识transparent -->画虚线 */
  border-color: transparent transparent transparent @c;
}
.triangle(T,@w,@c){
  border-width: @w;
  border-style: dashed dashed solid dashed;
  /* IE6不认识transparent -->画虚线 */
  border-color: transparent transparent @c transparent;
}
.triangle(B,@w,@c){
  border-width: @w;
  border-style: solid dashed dashed dashed;
  /* IE6不认识transparent -->画虚线 */
  border-color: @c transparent transparent transparent;
}

生成的css:

@import "./triangle.less";
//业务代码
#wrap > .sjx {
  .triangle(B,40px, yellow)
}
  1. arguments变量

less:

.border(@1,@2,@3){
  border:@arguments;
}
#wrap .sjx{
  .border(1px,solid,black)
}

生成的css:

#wrap .sjx {
  border: 1px solid #000000;
}

less运算

在less中可以进行加减乘除的运算
less:

#wrap .sjx{
  width: (100+100px);
  // less中只需要计算双方的一方带单位就可以了
}

生成的css:

#wrap .sjx {
  width: 200px;
}

less继承 继承与混合的区别

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/mixin.css" />
  </head>
  <body>
    <div id="wrap">
      <div class="inner">inner1</div>
      <div class="inner">inner2</div>
    </div>
  </body>
</html>

混合：

mixin.less

*{
  margin:0;
  padding: 0;
}
@import './mixin/juzhong-mixin.less';
#wrap{
  position:relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin:0 auto;
  .inner{
    &:nth-child(1){
      .juzhong(100px,100px,deeppink);
    }
    &:nth-child(2){
      .juzhong(50px,50px,pink);
    }
  }
}

生成的mixin.css:

* {
  margin: 0;
  padding: 0;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background-color: #ff1493;
}
#wrap .inner:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background-color: #ffc0cb;
}

juzhong-mixin.less

.juzhong(@w,@h,@c){
  position: absolute;
  left:0;
  right: 0;
  top:0;
  bottom: 0;//四边定义为0能居中
  margin: auto;
  width: @w;
  height: @h;
  background-color: @c;
}

继承：

extend.less

*{
  margin:0;
  padding: 0;
}
@import './mixin/juzhong-extend.less';
#wrap{
  position:relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin:0 auto;
  .inner{
    &:extend(.juzhong all);
    &:nth-child(1){
      width: 100px;
      height: 100px;
      background-color: deeppink
    }
    &:nth-child(2){
      width: 50px;
      height: 50px;
      background-color: pink;
    }
  }
}

生成的extend.css

* {
  margin: 0;
  padding: 0;
}
.juzhong,
#wrap .inner {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.juzhong:hover,
#wrap .inner:hover {
  background: red!important;
}
#wrap {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid;
  margin: 0 auto;
}
#wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: #ff1493;
}
#wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background-color: pink;
}

juzhong-extend.less

.juzhong{
  position: absolute;
  left:0;
  right: 0;
  top:0;
  bottom: 0;//四边定义为0能居中
  margin: auto;
}

.juzhong:hover{
  background: red!important;
}

less避免编译

~“要避免编译的代码”

test.less

*{
  margin: 0+10px;
  padding: ~"calc(100+100px)";
}

生成的test.css

* {
  margin: 10px;
  padding: calc(100+100px);
}
menghen113
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详细介绍less（css预处理语言）
杜永康的博客
03-19 3222
less（css预处理语言）Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
CSS预处理器篇学习-01 LESS
weixin_44552302的博客
05-08 704
CSS是一门非程序式的语言, 没有变量/函数/作用域等概念，需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用。 所以，CSS预处理器就是升级版CSS CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)， CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处 1、体验LESS LESS就是一种CSS预处理器 什么是...
CSS预处理之less,sass
qq_46063669的博客
10-29 1478
less是css的增强版，通过less可以编写更少的代码，给开发人员带来遍历，并能够方便后期的维护。
浅谈CSS预处理器SASS、LESS、Stylus
筱葭的博客
03-28 2381
1、背景 CSS不是一种编程语言，可以用它开发网页样式，但是没法用它编程，它没有自己的变量、简单的逻辑程序、函数及其他编程语法，只是一行行单纯的属性描述，写起来相当费事，而且代码难以组织和维护。 为了加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理，CSS预处器应运而生。   2、CSS预处理器 CSS预处理器用一种专门的编程语言，进行样式设计，然后再编译成正常的CSS
CSS预处理---Less
通俗易懂
05-06 779
前言 CSS的短板 作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。 问题的诞生往往伴随着技术的兴起， 在 Web 发展的这几年， 为了让 CSS 富有逻辑性，短板不那么严重，涌现出了 一些神奇的预处理语言。 它们让 CSS 彻底变成一门 可以使用 变量
10分钟学会CSS预处理语言Less
01-08
Less 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，将 CSS 赋予了动态语言的特性，如变量、继承、运算、函数等。 Less 既可以在 客户端 上运行 ...
less简单入门(CSS 预处理语言)
12-03
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你...
less使用demo( css预处理语言)
03-20
更少的代码量： Less使用变量和嵌套规则来简化样式表，使其更易于维护和修改，从而减少了代码量。...Less可以与CSS完全兼容，因此可以轻松地将现有的CSS文件转换为Less文件，而不会影响现有的样式表。
lesscss-python 是 Less CSS 的 Python 版本.rar
06-21
LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器...
CSS预处理技术总结（一）Less
浩时代的博客
07-25 6817
css预处理技术已经发展的比较成熟了，通过css预处理技术可以很好的提升css的编程性，提高css代码的开发效率和可维护性，目前比较热门的相关技术有Sass、Less CSS、Stylus、Compass等，最近也陆续在项目中用到了这些技术，所以就来个总结吧，本文为系列文章第二篇，主要讨论Less。相比Sass而言,Less要简单易上手一些，但是编程性较Sass而言，略有不足，所以也有人说它更适合设
CSS 预处理语言之 less 篇
weixin_34062469的博客
01-24 246
less 前言 Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 安装 客户端使用 // 引入 .less 文件，rel 属性值为：“stylesheet/less” <link rel="stylesheet/less" type="text/css" href="index.les...
CSS预处理器-Less
一种简单易食的杂烩????
03-25 606
less 认识 Less是一个 CSS预处理器， Less文件后缀为.less 浏览器不识别less文件，所以在VScode里使用Easy Less插件自动生成css文件 优点： css逻辑更加清晰 免去了繁琐的计算（直接写计算式就可） 注释 // 单行注释 CTRL+/ 不会跑到css中 /* 多行注释 Alt+shift+a 会跑到css中*/ 语法 .box { /* 加法 */ width: 100 + 30px; /* 减法 */ width: 100
CSS预处理技术（一）Less
华灯初上
08-23 257
CSS预处理技术已经发展的比较成熟，这种技术可以很好的提升css的编程性，提高编程效率和可维护性。目前比较热门的CSS预处理技术有Sass，Less CSS，Stylus，Compass等。在项目中的应用也是越来越多，下面总结一下这部分内容。 相比于Sass，Less上手简单，但是编程性不如Sass。 一、注释 Less注释一，会被编译到css /**/ Less注释二，不会被编译到cs...
CSS预处理器 Less
Serena_tz的博客
04-30 181
1 less是什么 less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。 less的中文官网：http://lesscss.cn/ 。 bootstrap中less教程：http://www.bootcss.com/p/lesscss/。 2 Less编译工具 koala 官网：www.koala-app.com 。 3 less中的注释 以
css预处理Less
菜鸟搬砖记
06-04 441
什么是Less？ Less其实就是css预处理器，简单的说，就是动态编写css。 Less用法 首先以vue中开发为例，先安装less和less-loader npm install less less-loader 1.变量 1.变量值定义 格式： @变量名 @width:100px; .hello{ width: @width; } 最...
学习Less-看这篇就够了
Tomotoes.com
12-09 874
前言CSS的短板    作为前端学习者的我们 或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。 而 CSS 作为一门标记性语言，可能 给初学者第一印象 就是简单易懂，毫无逻辑，不像编程该有的样子。在语法更新时，每当新属性提出，浏览器的兼容又会马上变成绊脚石，可以说 CSS 短板不容忽视。    问题的诞生往往伴随着技术的兴起， 在 Web 发展的这几年， 为
常见的CSS预处理器——Less
RouKou的博客
05-18 2587
目录 一.Less介绍 1. 官方介绍 2.自我理解 二.Less的使用 1.在VSCode上的安装使用 （1）插件安装 2.在HMTL上的引用 三.常见用法示例 1.从第一个Less变量开始 2.变量计算 3.变量混合 4.嵌套规则 5.函数的使用 6.条件判断 7.变量作用域 8.不得不说的import指令 9.综合实例 一.Less介绍 1. 官方介绍 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CS
详说css与预处理器（以及less、sass、stylus的区别）
热门推荐
ly2983068126的博客
08-31 4万+
CSS(Cascading Style Sheet)被译为级联样式表，做为一名前端从业人员来说，这个专业名词并不陌生，在行业中通常称之为“风格样式表（Style Sheet）”，它主要是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML（XHTML）中各标签的显示属性。可以使人更能有效的控制Web页面（或Web应用程序）外观，可以精确指定Web元素位置，外观以及创建特殊效果的能力。
CSS预处理器之Less
Science Explorer
09-04 737
less Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
vue css预处理
最新发布
09-14
2. Less：是另一个常用的CSS预处理器，它也提供类似Sass的功能，但语法略有不同。你可以使用less-loader来在Vue项目中使用Less。 3. Stylus：是一个基于Node.js的CSS预处理器，它具有简洁、富有表现力的语法，并且...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值