常用less小结

最新推荐文章于 2023-05-24 10:04:01 发布
最新推荐文章于 2023-05-24 10:04:01 发布
阅读量224 收藏
点赞数
分类专栏： html 文章标签： 常用less小结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hangGe0111/article/details/85339560
版权

1.对于常用的，做了一个简单小结，后续如果还有别的，再继续完善

1.1less

/****border-radius系列****/
/**上左**/
.radiusTopleft(@radius:5px){
    border-top-left-radius:@radius;
    -webkit-border-top-left-radius:@radius;
    -moz-border-top-left-radius:@radius;
}

.radiusTopleft10{
    .radiusTopleft(10px)
}
/**上右**/
.radiusTopright(@radius:5px){
    border-top-right-radius:@radius;
    -webkit-border-top-right-radius:@radius;
    -moz-border-top-right-radius:@radius;
}

.radiusTopright10{
    .radiusTopright(10px)
}

/**下右**/
.radiusBottomright(@radius:5px){
    border-bottom-right-radius:@radius;
    -webkit-border-bottom-right-radius:@radius;
    -moz-border-bottom-right-radius:@radius;
}

.radiusBottomright10{
    .radiusBottomright(10px)
}

/**下左**/
.radiusBottomleft(@radius:5px){
    border-bottom-left-radius:@radius;
    -webkit-border-bottom-left-radius:@radius;
    -moz-border-bottom-left-radius:@radius;
}

.radiusBottomleft10{
    .radiusBottomleft(10px)
}

/**上**/
.radiusTop(@radius:5px){
    border-top-right-radius:@radius;
    -webkit-border-top-right-radius:@radius;
    -moz-border-top-right-radius:@radius;
    border-top-left-radius:@radius;
    -webkit-border-top-left-radius:@radius;
    -moz-border-top-left-radius:@radius;
}

.radiusTop10{
    .radiusTop(10px)
}

/**下**/
.radiusBottom(@radius:5px){
    border-bottom-right-radius:@radius;
    -webkit-border-bottom-right-radius:@radius;
    -moz-border-bottom-right-radius:@radius;
    border-bottom-left-radius:@radius;
    -webkit-border-bottom-left-radius:@radius;
    -moz-border-bottom-left-radius:@radius;
}

.radiusBottom10{
    .radiusBottom(10px)
}

/**所有**/
.radiusAll(@radius:5px){
    border-radius:@radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

.radiusAll10{
   .radiusAll(10px);
}

/****boxshadow系列****/

/**box-shadow: h-shadow v-shadow blur spread color inset;**/
/**
 * h-shadow:必需。水平阴影的位置。允许负值
 * v-shadow:必需。垂直阴影的位置。允许负值
 * blur:    可选。模糊距离。
 * spread:  可选。阴影的尺寸。   
 * color:   可选。阴影的颜色。请参阅 CSS 颜色值 
 * inset:   可选。将外部阴影 (outset) 改为内部阴影。
 * **/

/**普通，没有阴影的尺寸**/
.boxshadow(@right_left:5px,@bottom_top:5px,@box :5px,@box_color:#b6ebf7){
    box-shadow:@arguments;
   -moz-box-shadow:@arguments;
   -webkit-box-shadow:@arguments;
}

.boxshadow7-7-7_black{
  .boxshadow(7px,7px,7px,black);
}

/**常用，有阴影的尺寸**/
.boxshadow_spread(@right_left:5px,@bottom_top:5px,@box :5px,@spread :5px,@box_color:#b6ebf7){
    box-shadow:@arguments;
   -moz-box-shadow:@arguments;
   -webkit-box-shadow:@arguments;
}
.boxshadow0-0-14-3_rgba_01{
    .boxshadow_spread(0px,0px,14px,3px,rgba(0,0,0,0.1));
}

/**透明度系列**/
.rgba(@rgb_a:.4,@rgb_b:40){
    filter: alpha(opacity=@rgb_b); 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{rgb_b})"; 
    opacity:@rgb_a;    
}
.rgba5{
    .rgba(.5,50);
}

/****背景图系列****/
.bg-img(@img:'//img-ads.csdn.net/2018/201811191651213306.jpg',@w:20px,@h:20px,@position_l:center,@position_t:center,@repeat:no-repeat){
    background-image: url(@img);
    background-size: @w @h;
    background-position: @position_l @position_t;
    background-repeat: @repeat;
}

.bg-img20{
   .bg-img('//img-ads.csdn.net/2018/201811191651213306.jpg',40px,40px,center,center,no-repeat);
}

/****居中系列****/
/**水平垂直居中**/
.pos_center(@w:50px,@h:50px){
    width: @w;
    height: @h;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1/2*@w;
    margin-top: -1/2*@h;
}

.pos_center50{
    .pos_center(50px,50px);
}

/**水平居中**/
.pos_left(@w:50px,@h:50px){
    width: @w;
    height: @h;
    position: absolute;
    left: 50%;
    margin-left: -1/2*@w;
}
.pos_left50{
    .pos_left(50px,50px)
}

1.2编译的css

/****border-radius系列****/
/**上左**/
.radiusTopleft10 {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
}
/**上右**/
.radiusTopright10 {
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
}
/**下右**/
.radiusBottomright10 {
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
}
/**下左**/
.radiusBottomleft10 {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
}
/**上**/
.radiusTop10 {
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
}
/**下**/
.radiusBottom10 {
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
}
/**所有**/
.radiusAll10 {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
/****boxshadow系列****/
/**box-shadow: h-shadow v-shadow blur spread color inset;**/
/**
 * h-shadow:必需。水平阴影的位置。允许负值
 * v-shadow:必需。垂直阴影的位置。允许负值
 * blur:    可选。模糊距离。
 * spread:  可选。阴影的尺寸。   
 * color:   可选。阴影的颜色。请参阅 CSS 颜色值 
 * inset:   可选。将外部阴影 (outset) 改为内部阴影。
 * **/
/**普通，没有阴影的尺寸**/
.boxshadow7-7-7_black {
  box-shadow: 7px 7px 7px black;
  -moz-box-shadow: 7px 7px 7px black;
  -webkit-box-shadow: 7px 7px 7px black;
}
/**常用，有阴影的尺寸**/
.boxshadow0-0-14-3_rgba_01 {
  box-shadow: 0px 0px 14px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 0px 14px 3px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 14px 3px rgba(0, 0, 0, 0.1);
}
/**透明度系列**/
.rgba5 {
  filter: alpha(opacity=50);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  opacity: 0.5;
}
/****背景图系列****/
.bg-img20 {
  background-image: url('//img-ads.csdn.net/2018/201811191651213306.jpg');
  background-size: 40px 40px;
  background-position: center center;
  background-repeat: no-repeat;
}
/****居中系列****/
/**水平垂直居中**/
.pos_center50 {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}
/**水平居中**/
.pos_left50 {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
}

1.3html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/3.css"/>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.clearfix:before, .clearfix:after {
			    content: '.';
			    display: block;
			    visibility: hidden;
			    font-size: 0;
			    line-height: 0;
			    width: 0;
			    height: 0;
			}
			.clearfix:after {
			  clear: both;
			}
			.clearfix {
			  zoom: 1;
			}
			.box{
				margin: 10px auto;
				padding: 0 10px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: #fff;
				background-color: orange;
				float: left;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		
		<div style="font-size: 20px;line-height: 30px;font-weight: bold;margin: 10px 0;">border-radius系列</div>
		<div class="clearfix">
			<div class="box radiusTopleft10">radiusTopleft10</div>
			<div class="box radiusTopright10">radiusTopleft10</div>
			<div class="box radiusBottomright10">radiusBottomright10</div>
			<div class="box radiusBottomleft10">radiusBottomleft10</div>
			<div class="box radiusTop10">radiusTop10</div>
			<div class="box radiusBottom10">radiusBottom10</div>
			<div class="box radiusAll10">radiusAll10</div>
		</div>
		<div style="font-size: 20px;line-height: 30px;font-weight: bold;margin: 10px 0;">boxshadow系列</div>
		<div class="clearfix">
			<div class="box boxshadow7-7-7_black">boxshadow7-7-7_black</div>
			<div class="box boxshadow0-0-14-3_rgba_01">boxshadow0-0-14-3_rgba_01</div>
		</div>
		<div style="font-size: 20px;line-height: 30px;font-weight: bold;margin: 10px 0;">透明度系列</div>
		<div class="clearfix">
			<div class="box rgba4">rgba4</div>
		</div>
		
		<div style="font-size: 20px;line-height: 30px;font-weight: bold;margin: 10px 0;">背景图系列</div>
		<div class="clearfix" style="width: 100;height: 100px;position: relative;">
			<div style="width: 50px;height: 50px;background-color: rgba(0,0,0,0.5);" class="bg-img20"></div>
		</div>
		
		<div style="font-size: 20px;line-height: 30px;font-weight: bold;margin: 10px 0;">居中系列</div>
		<div class="clearfix" style="width: 100%;height: 100px;position: relative;background: rgba(0,0,0,0.5);">
			<div style="background-color: orange;" class="pos_center50"></div>
		</div>
		<div style="width: 100%;height: 100px;position: relative;background: rgba(0,0,0,0.2);">
			<div style="background-color: orange;" class="pos_left50"></div>
		</div>
	
	</body>
</html>

1.4效果预览

2.说明

推荐博客:https://www.cnblogs.com/RuMengkai/p/6502057.html

推荐博客：https://www.cnblogs.com/grey-zhou/p/5796496.html

推荐：https://www.jianshu.com/p/d81496ed0e29

less用法见官网：http://lesscss.cn/

 

hangGe0111
关注
专栏目录
less常用语法
weixin_43165676的博客
11-28 1082
less语法、mixins
less常用用法
小冯的博客
09-25 224
css命名： <template> <div> <img class="user-poster" src="https://img.yzcdn.cn/public_files/2017/10/23/8690bb321356070e0b8c4404d087f8fd.png"> <van-row class="user-links">...
Less常用的方法
最新发布
m0_62785037的博客
05-24 559
Less是一门向后兼容CSS扩展语言，js开发的用于将Less样式转成CSS样式的Less.js工具
less常用方法讲解
June.1
03-14 1274
1 .安装方式 安装less的同时也安装less加载器 less-loader 在webpack里面配置就可以,webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换less为css 配置详情请点击 . npm 安装命令 npm install less less-loader --save yran 命令 yarn add less less-loade...
项目中less常用的一些东西
郊眠寺
12-12 620
LESSCSS是一种动态样式语言，简称LESS，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护 LESS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
js中less常用的方法小结
12-11
LESS对于大图片是不能转码的，我们可以使用BASE64工具转码（tool.css-js.com） 项目中慎用，当你在移动端项目中有一些大图实在没有办法处理了的情况下在使用BASE64。 @c:'#000' @url:'../img/banner'; .box{ ...
less语法小结-源代码+注释.rar
04-07
《Less语法小结——深入解析与实践》 在前端开发领域，Less是一种强大的CSS预处理器，它扩展了CSS的功能，让样式表编写更加简洁、高效。本文将基于“less语法小结-源代码+注释.rar”这个压缩包中的内容，深入探讨...
jquery常用操作小结
10-25
jQuery 是一款快速、简洁的 JavaScript 库，其设计宗旨是“write less, do more”（写得更少，做得更多）。它极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等任务。本文将详细介绍 jQuery 中的一些常用...
linux中的常用命令小结
09-15
在Linux操作系统中，掌握...当然，Linux命令行还有很多其他功能强大的命令，如查找文件（`find`）、查看文件内容（`cat`/`less`/`more`）、文件权限管理（`chmod`/`chown`）等，持续学习和实践是成为Linux高手的关键。
常用less变量定义
weixin_30762087的博客
06-28 635
@bgfff:#fff;.bg(@color){background:@color;}.color(@color){color:@color;}.bgf{background:#fff;}.col333{color:#333}.cof{color:#fff}.col666{color:#666}.col999{color:#999}.colf53{color:#f53}.rel{position:...
Vue前端项目-首页-左侧菜单栏的展开与折叠
热门推荐
踏 浪的博客
04-01 2万+
目录 1、思路 2、按钮单击事件 3、父组件调用 Vuex 改变侧边栏状态 4、新建app模块用于管理整个应用状态 5、左侧菜单栏 6、隐藏样式 实现效果 展开效果图: 合并效果图: 1、思路 点击按钮（展开与折叠按钮），触发左侧菜单栏的张开与折叠，需要使用一个变量（state.sidebar.opened）来控制 为什么要用state.sidebar.open...
Bootstrap学习——padding和margin对栅栏的影响
黑白的博客
04-17 1080
结果展示: HTML代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>padding和margin对栅栏的影响</title> <link href="../css/bootstrap.min.c...
less常用整理
越思考越清晰
04-20 1986
编译： 1、在node全局使用npm包管理器，安装less模块     npm install less -g     less  xxx.less  xxx.css  把less编译成css          less  xxx.less  xxx.min.css  -x 不仅编译成css,而且把css压缩     注意：编译时引入进来的样式后缀也要是less @import "reset...
CSS常用 Less 公共样式封装
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
12-14 1万+
/------------------------------------- ├ 布局 ┆ └------------------------------------/ // 盒子宽高 .size(@w, @h) { width: @w; height: @h; } // 最小尺寸, 兼容IE6 .min-width(@min-w) { min-width: @min-w; _wi
Less常用函数集合
楊枝國博客
06-04 1229
含*号的函数只在1.4.0 beta以上版本中可用 escape(@string); // 通过 URL-encoding 编码字符串 e(@string); // 对字符串转义 %(@string, values...); // 格式化字符串 unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位 color(@string); // 将字符串解析为颜色...
Less的常见用法
wangongda的博客
06-21 3119
//声明初始化变量 @xs:200px; //使用上面的变量 .box1{ width:@xs; height:@xs; margin-top: 10px; background: red; } //此时.box1是一个混合,可以如下使用 .box2{ .box1; } //预设一个混合 .class1{ margin-top: 10px; bo
LESS学习笔记（初学实用）
前端向朔
08-19 2409
一、什么是less？Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 LESS官网（中文）：http://lesscss.cn/二、less怎么用？方式一：直接通过引入less.js文件，通过浏览器端来编译.less文件（类css文件），当然先要下载less.js文件放在项目文件中，目录就来个简单的。 —-less
HTML循环创建div和table并实现滚动效果
小橘是橘子的博客
10-31 4612
HTML循环创建div与解决ajax多次请求重复创建div
Linux常用命令速查与实战小结
在本文档中，作者分享了一份自我整理的常用Linux命令小结，旨在帮助记忆和提高效率。Linux作为一种强大的操作系统，拥有众多实用命令，包括但不限于： 1. **grep命令**：这是一种强大的文本搜索工具，能够根据正则...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值