Less随笔

Less是什么?

1.Less类似于jQuery( css中的jQuery )

LessCss是一种动态样式语言,属于css预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

LessCss可以再多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件.

这里用 sublime编辑器+koala编译工具

新建main.less,输入 @charset"utf-8"; 保存。

将项目文件(这里命名为Less,其中包括img与style文件夹),托到koala中,执行编译。

它将自动生成main.css文件,在sublime中打开,(准备完成)

Less中的注释:

/*我是被编译的*/  (显示在css中)

//我是不被编译的  (不显示)

内容:变量、混合、匹配模式、运算 嵌套规则、@arguments变量、避免编译、!important关键字

1.变量

@width:30px;

2.混合

<span style="font-family:Microsoft YaHei;">@test_width:300px; 
.box{
	width:@test_width;
	height:@test_width; 
	background-color:yellow; 	//2.混合	
        .border;
} //混合
.border{
	border:solid 5px pink;
}</span>

3.混合 - 可带参数的(必填)

<span style="font-family:Microsoft YaHei;">.border_02(@border_width){
	border:solid yellow @border_width;
} 
.test_hunhe{
	.border_02(30px);
}</span>

4.混合 — 默认带值

<span style="font-family:Microsoft YaHei;">.border_03(@border_width:10px){
	border:solid green @border_width;
}

.test_hunhe_03{
	.border_03(20px);
}</span>

5.匹配模式 (@_ :无论选谁都必须带上我 )

<span style="font-family:Microsoft YaHei;">.triangle(top,@w:5px,@c:#ccc){
	border-width: @w;
	border-color:transparent transparent @c transparent;
	border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: @c transparent transparent transparent;
	border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent @c transparent transparent;
	border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
	border-width: @w;
	border-color: transparent transparent transparent @c;
	border-style: dashed dashed dashed solid;
}
// @_ : 无论上面选谁,都必须带上我
.triangle(@_,@w: 5px,@c: #ccc){
	width: 0;
	height: 0;
	overflow: hidden;
}
.sanjiao{
	.triangle(right,100px);
}</span>

6.匹配模式的定位

<span style="font-family:Microsoft YaHei;">.pos(r){
	position: relative;
}
.pos(a){
	position: absolute;
}
.pos(f){
	position: fixed;
}

.pipei{
	width: 200px;
	height: 200px;
	background-color:green;
	.pos(r);
}</span>

 7.运算

<span style="font-family:Microsoft YaHei;">@test_01:300px;
.box_02{
	width:@test_01 + 20;
	color:#ccc - 10;
}</span>

8.嵌套规则 (& : 代表上一层选择器

<span style="font-family:Microsoft YaHei;">.list{
	width:600px;
	li{
		height:30px;
	}
	a{
		float: left;
		//& 代表上一层选择器
		&:hover{
			color:red;
		}
	}
	span{
		float:right;
	}
}</span>

9. @arguments变量

<span style="font-family:Microsoft YaHei;">.border-arg(@w:30px,@c:red,@xx:solid){
	border:@arguments; //带上了所有默认值
} 
.test_arguments{
	.border-arg(40px);   //更改了第一个变量的值
}</span>

10.避免编译

1. 有时候我们需要输出一些不正确的css语法或者使用一些LESS不认识的专有语法。
2. 要输出这样的值我们可以在字符串前加上一个 ~
例如: width:~''

<span style="font-family:Microsoft YaHei;">.test_03{
	height:calc(300px-30px);    //返回 270px	                                                                                                                                                                                           width:~'calc(300px-30px)';  //返回 300px-30px
}</span>

11. !important关键字

.test_important{ .border_03()!important;}

小技巧总结:

@_ : 无论选谁都必须带上我

:代表上一层选择器

@arguments : 可变参(代表所有)

~‘’: 避免编译


自己感觉less还是很好用的,方便了css结构的编写,推荐哟。

想了解更多,访问http://lesscss.net

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面只是目标目录 ├─第1章-Shiro权限实战课程介绍 │ 1-1Shiro权限实战课程介绍.mp4 │ 1-2权限控制和初学JavaWeb处理访问权限控制.mp4 │ ├─第2章-大话权限框架核心知识ACL和RBAC │ 2-1权限框架设计之ACL和RBAC讲解.mp4 │ 2-2主流权限框架介绍和技术选型讲解.mp4 │ ├─第3章-ApacheShiro基础概念知识和架构讲解 │ 3-1Shiro核心知识之架构图交互和四大模块讲解.mp4 │ 3-2用户访问Shrio权限控制运行流程和常见概念讲解.mp4 │ ├─第4章-Springboot2.x整合ApacheShiro快速上手实战 │ 4-1SpringBoot2.x整合Shiro.mp4 │ 4-2快速上手之Shiro认证和授权流程实操上集.mp4 │ 4-3Shiro认证和授权流程和常用API梳理下集.mp4 │ ├─第5章-详细讲解ApacheShirorealm实战 │ 5-1Shiro安全数据来源之Realm讲解.mp4 │ 5-2快速上手之Shiro内置IniRealm实操.mp4 │ 5-3快速上手之Shiro内置JdbcRealm实操.mp4 │ 5-4ApacheShiro自定义Readl实战.mp4 │ 5-5深入Shiro源码解读认证授权流程.mp4 │ ├─第6章-Shiro权限认证Web案例知识点讲解 │ 6-1Shiro内置的Filter过滤器讲解.mp4 │ 6-2Shiro的Filter配置路径讲解.mp4 │ 6-3Shiro数据安全之数据加解密.mp4 │ 6-4Shiro权限控制注解和编程方式讲解.mp4 │ 6-5Shiro缓存模块讲解.mp4 │ 6-6ShiroSession模块讲解.mp4 │ ├─第7章-ApacheShiro整合SpringBoot2.x综合案例实战 │ 7-10使用ShiroLogout和加密处理.mp4 │ 7-1Shiro整合SpringBoot2.x案例实战介绍.mp4 │ 7-2基于RBAC权限控制实战之Mysql数据库设计.mp4 │ 7-3SpringBoot2.x项目框架和依赖搭建.mp4 │ 7-4案例实战之权限相关服务接口开发.mp4 │ 7-5案例实战之用户角色权限多对多关联查询SQL.mp4 │ 7-6案例实战自定义CustomRealm实战.mp4 │ 7-7项目实战之ShiroFilterFactoryBean配置实战.mp4 │ 7-8前后端分离自定义SessionManager验证.mp4 │ 7-9API权限拦截验证实战.mp4 │ ├─第8章-权限控制综合案例实战进阶 │ 8-1实战进阶之自定义ShiroFilter过滤器上集.mp4 │ 8-2实战进阶之自定义ShiroFilter过滤器下集.mp4 │ 8-3性能提升之Redis整合CacheManager.mp4 │ 8-4性能提升之Redis整合SessionManager.mp4 │ 8-5ShiroConfig常用bean类配置.mp4 │ ├─第9章-大话分布式应用的鉴权方式 │ 9-1单体应用到分布式应用下的鉴权方式介绍.mp4 │ 9-2Shiro整合SpringBoot下自定义SessionId.mp4 │ ├─第10章-Shiro课程总结 │ 10-1Apacheshiro从入门到高级实战课程总结.mp4 │ 10-2高级工程师到架构师-解决问题思路+学习方法.mp4 │ └─课件资料.zip
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值