正文 

当前位置： 首页 > 代码 > java教程

web前端之less简介(代码片段)

爱上口袋的天空 爱上口袋的天空     2022-12-13     110

关键词：

目录

一、less简介

二、安装插件

三、编写less

四、less语法

less注释

父子关系嵌套

变量

其他

五、混合函数

六、补充

一、less简介

less是一门css的预处理语言

  • less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
  • 在less中添加了许多的新特性：像对变量的支持、对mixin的支持…
  • less的语法大体上和css语法一致，但是less中增添了许多对css的扩展，所以浏览器无法直接执行less代码，要执行必须向将less转换为css，然后再由浏览器执行

二、安装插件

在vscode中搜索less，点击安装

 

三、编写less

html代码

使用快捷方式创建html代码

回车生成html代码

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

less代码

创建style.less文件，编写less代码

body 
  --height: calc(200px / 2);
  --width: 100px;
  div 
    height: var(--height);
    width: var(--width);
  
  .box1 
    background-color: #bfa;
  
  .box2 
    background-color: red;
  
  .box3 
    background-color: yellow;
  

body 
  --height: calc(200px / 2);
  --width: 100px;
  div 
    height: var(--height);
    width: var(--width);
  
  .box1 
    background-color: #bfa;
  
  .box2 
    background-color: red;
  
  .box3 
    background-color: yellow;

Easy LESS插件会帮助我们在style.less所在目录下面生成一个相同名称的css文件

查看生成的style.css代码

body 
  --height: calc(200px / 2);
  --width: 100px;

body div 
  height: var(--height);
  width: var(--width);

body .box1 
  background-color: #bfa;

body .box2 
  background-color: red;

body .box3 
  background-color: yellow;

 我们直接在HTML中引入生成的style.css

<link rel="stylesheet" href="/css/style.css">

运行代码，查看效果

 

四、less语法

less注释

less中的单行注释，注释中的内容不会被解析到css中

css中的注释，内容会被解析到css文件中

// `less`中的单行注释，注释中的内容不会被解析到`css`中

/*
`css`中的注释，内容会被解析到`css`文件中
*/

父子关系嵌套

在less中，父子关系可以直接嵌套

// `less`中的单行注释，注释中的内容不会被解析到`css`中

/*
`css`中的注释，内容会被解析到`css`文件中
*/
body 
  --height: calc(200px / 2);
  --width: 100px;
  div 
    height: var(--height);
    width: var(--width);
  
  .box1 
    background-color: #bfa;
    .box2 
      background-color: red;
      .box3 
        background-color: yellow;
      
      >.box4
        background-color: green;

对应的css

/*
`css`中的注释，内容会被解析到`css`文件中
*/
body 
  --height: calc(200px / 2);
  --width: 100px;

body div 
  height: var(--height);
  width: var(--width);

body .box1 
  background-color: #bfa;

body .box1 .box2 
  background-color: red;

body .box1 .box2 .box3 
  background-color: yellow;

body .box1 .box2 > .box4 
  background-color: green;

变量

变量，在变量中可以存储一个任意的值

并且我们可以在需要时，任意的修改变量中的值

变量的语法：@变量名

  • 直接使用使用变量时，则以@变量名的形式使用即可
  • 作为类名、属性名或者一部分值使用时，必须以@变量名的形式使用
  • 可以在变量声明前就使用变量（可以但不建议）
@b1:box1;
@b2:box2;
@b3:box3;
@size:200px;
@bc:background-color;
@bi:background-image;
@color:red;
@path:image/a/b/c;

.@b1
  width: @size;
  height: $width;
  @bc: @color;
  @bi: url("@path/1.png");


.@b2
  width: @size;
  height: $width;
  @bc: @color;
  @bi: url("@path/2.png");


.@b3
  width: @size;
  height: $width;
  @bc: @color;
  @bi: url("@path/3.png");

生成的css代码

.box1 
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image / a / b / c/1.png");

.box2 
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image / a / b / c/2.png");

.box3 
  width: 200px;
  height: 200px;
  background-color: red;
  background-image: url("image / a / b / c/3.png");

注意：在url中使用less语法需要用引号包裹

其他

.p1
  width: @size;
  height: $width;
  &-wrapper
    background-color: peru;
  
  // &:hover
  //   background-color: blue;
  // 
  :hover
    background-color: blue;
  

.p2:extend(.p1)
  color:@color;

.p3
  .p1();

.p4()
  width: @size;
  height: $width;

.p5
  // .p4();
  .p4;

生成的css代码

.p1,
.p2 
  width: 200px;
  height: 200px;

.p1-wrapper 
  background-color: peru;

.p1 :hover 
  background-color: blue;

.p2 
  color: red;

.p3 
  width: 200px;
  height: 200px;

.p5 
  width: 200px;
  height: 200px;
  • & 拼接
  • 伪元素
  • :extend() 对当前选择器扩展指定选择器的样式（选择器分组）
  • .p1() 直接对指定的样式进行引用，这里就相当于将p1的样式在这里进行了复制（mixin 混合）
  • 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins混合函数

五、混合函数

在混合函数中可以直接设置变量，并且可以指定默认值

.test(@w:200px, @h:100px, @bc:red)
  width: @w;
  height: @h;
  background-color: @bc;


.p6
  // .test(200px, 100px, red); // 对应参数位传值
  // .test(@h:200px,@w:100px,@bc:red); // 写明对应属性，可变换顺序
  // .test();
  .test(300px);

生成的css代码

.p6 
  width: 300px;
  height: 100px;
  background-color: red;

六、补充

创建all.less文件，将我们之前编写的less文件通过@import引入进来

可以通过import来将其他的less引入到当前的less中

@import "style.less";
@import "syntax.less";
  • 查看生成的all.css代码，会发现其他的内容囊括了两个less文件的内容
  • 所以，我们可以利用@import来对less文件进行整合，然后引入生成的css文件使用即可
  • 这样，每次修改的时候直接对某个模块的less文件进行修改，就会非常简单
  • 如果我们观察过之前fontawesome源码文件，会发现其中也有less代码文件

不同的less文件里都有其自己的职责，如

  • _animated.less中专门存放动画的混合函数
  • _variables.less中专门存放定义的变量
  • …

但是也有个问题，通过F12调试时显示的也是css中对应的行号

如果我们要改，需要找一下，太麻烦了，能不能直接显示less中行号呢？这样我们直接定位到对应less中直接进行修改，维护起来也会比较方便

我们需要在Easy LESS插件中修改settings.json文件，在其中添加如下配置

"less.compile": 
    "compress": true, // true => remove surplus whitespace
    "sourceMap": true, // true => generate source maps (.css.map files)
    "out": true // false => DON'T output .css files (overridable per-file, see below)

 修改完毕后，会发现多生成出来一个all.css.map文件，说明配置生效

再刷新下页面，通过F12会发现变成了less文件对应的行号

 

我们来逐一解释下配置的less.compile项中每一个属性的含义

  • compress 生成的css文件代码会被压缩（作用相当于我们之前安装的JS & CSS Minifier (Minify)插件的效果）
  • sourceMap 生成.css.map文件，通过F12可以查看了less文件对应行号
  • out 生成对应css文件（当然是需要了）

 

移动web开发之less基础(代码片段)

今天学习less基础相关内容。本篇目录一、维护css弊端二、less介绍三、Less安装（注意如果使用vscode不需要安装less）Less使用3.1Less变量3.2Less编译3.3Less嵌套3.4Less运算一、维护css弊端CSS是一门非程序式语言，没有变量、函... 查看详情

web前端之变形：平移旋转与缩放(代码片段)

目录一、简介二、平移1、绝对定位的方式 2、table-cell的方式3、transform的方式4、浮出效果三、Z轴平移透视效果四、旋转五、缩放六、实战1、鸭子表2、复仇者联盟 html代码一、简介变形就是指通过css来改变元素的形状或位置变... 查看详情

前端之bootstrap(代码片段)

Bootstrap简介　　Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的MarkOtto和JacobThornton一起开发的，Bootstra框架是基于HTML、CSS、JavaScript开发的，它因简洁、直观、功能强大被开发者广发使用。　　Boot... 查看详情

前端利器之less入门(代码片段)

less是什么？Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。less，是方便我们快速编写CSS的工具，它增强了CSS代码的扩展性和复用性。Less可以运行在Node或浏览器端。less能为我... 查看详情

web前端之定位的简介(代码片段)

目录一、定位的简介1、需求分析2、定位（position） ​编辑二、相对定位1、偏移量（offset） 2、相对定位的特点三、绝对定位1、绝对定位的特点2、包含块（containingblock）  3、水平方向的布局4、水平居中... 查看详情

web前端之浮动以及简单布局(代码片段)

目录一、浮动的简介二、浮动的特点浮动元素会完全脱离文档流，不再占据文档流中的位置设置浮动以后，元素会向父元素的左侧或右侧移动浮动元素默认不会从父元素中移出4、浮动元素向左或向右移动时，不会超... 查看详情

前端web-rem,vw/vh适配和less的使用(代码片段)

rem,vw,vh适配和less的使用rem案例HTML框架less介绍vw/vh案例：主体框架remrem介绍相对单位，相对于HTML标签字号计算尺寸1rem=1HTML标签字号基本使用给HTML标签添加字号设置元素尺寸为rem单位媒体查询基本使用视口不同，添... 查看详情

前端之jquery:简介,选择器,动画效果,属性操作;(代码片段)

jQuery简介jQuery选择器jQuery动画效果jQuery属性操作 jQuery简介为什么要使用jQuery:答:因为优秀.　　什么是jQuery:jQuery是js的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。js库是把我们常用的功能... 查看详情

撩课-mysql详解1-数据库简介(代码片段)

学习地址:[撩课-JavaWeb系列1之基础语法-前端基础][撩课-JavaWeb系列2之XML][撩课-JavaWeb系列3之MySQL][撩课-JavaWeb系列4之JDBC][撩课-JavaWeb系列5之web服务器-idea] 1、什么是数据库？数据库是按照数据结构来组织、存储和管理数据的仓库... 查看详情

web前端之iframe(代码片段)

iframe基本用法1、最基本的用法iframe标签指定src <iframesrc="demo_iframe_sandbox.htm"></iframe>2.常用属性(1).frameborder　　 是否显示边框，1代表显示，0代表不显示(2).height,width 　　高度、宽度(3).name　　　　　框架的名字... 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI（userInterface用户界面）框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板... 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

Bootstarp介绍bootstarp是Twitter公司开发基于html,css,js的前端框架为实现web应用程序快速实现开发提供了一套前端工具包UI（userInterface用户界面）框架Bootstrap的特性响应式设计(css媒体查询一套样式实现各个终端尺寸适配)pc平板... 查看详情

javaweb入门详解（第三篇）web服务器之tomcat简介(代码片段)

JavaWeb入门详解（第三篇）web服务器之Tomcat简介1、web服务器概述1.1、什么是服务器  服务器：就是安装了服务器软件的计算机。  服务器软件：接收用户请求、处理请求以及响应请求的软件。而web服务器，可... 查看详情

web前端之盒模型(代码片段)

目录一、文档流（normalflow）二、块元素三、行内元素四、盒子模型 1、盒模型、盒子模型、框模型（box model） 2、内容区（content） 3、边框（border）4、内边距(padding）5、外边距（margin࿰... 查看详情

less(代码片段)

...辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码，造成这些困难的很大原因源于CSS是一门非程序语言，没有变量、函数、scope（... 查看详情

web前端之过渡与动画(代码片段)

目录一、过渡（transition）1、过渡（transition）2、属性值二、动画三、实战1、米兔2、奔跑的少年3、弹力球4、酷炫球一、过渡（transition）1、过渡（transition）通过过渡可以指定一个属性发生变化时的... 查看详情

web前端之表格(代码片段)

目录一、表格二、长表格三、表格的样式1、HTML代码2、CSS代码四、表单1、表单2、form的属性2.1、文本框2.2、密码框2.3、提交按钮2.4、单选框2.5、多选框2.6、下拉列表五、表单补充1、按钮 ​编辑一、表格在现实生活中，我们... 查看详情

web学习-前端进阶(代码片段)

web学习-前端进阶1.CSS31.1字体图标1.2平面转换1.2.1位移1.2.2旋转1.2.3多重属性转换1.2.4缩放1.3渐变1.4平移、缩放、渐变综合案例1.5空间转换1.5.1空间平移和透视(perspective)1.5.2空间旋转（ratate）1.5.3空间缩放1.6动画1.6.1动画的基... 查看详情