Less的使用

时间：2023-03-08 19:54:34

Less为css预处理器

首先先去下载一个koala编译器软件，然后运行打开

新建一个项目目录，在css文件夹中新建一个后缀为less的文件，然后拉入koala软件中，然后运行

，你的css文件夹中就会多出一个css文件

Less的使用

然后就可以编写less文件了，编写过程中可以在css文件里查看详细信息。

以下是less文件的知识点

@charset "utf-8";
/*会被编译*/
//不会被编译
@test_width:500px;
@test_height:500px;
body{
background-color: #ccc;
}
/*混合*/
.box{
width:@test_width;
height: @test_height;
background-color:yellow;
.border;
}
.border{
border:5px solid pink;
}
.box2{
.box;
margin-top:50px;
}
/*混合-可带参数*/
.border_02(@border_width){
border:solid #000 @border_width;
}
.test_hunhe{
.border_02(30px);
}
/*混合-默认带参数*/
.border_03(@border_width:40px){
border:solid #000 @border_width;
}
.test_hunhe2{
.border_03(20px);
}
/*混合的例子*/
.border_radius(@raidus:5px){
-webkit-border-radius: @raidus;
-moz-border-radius: @raidus;
border-radius: @raidus;
}
.radius_test{
width: 100px;
height: 40px;
background-color:green;
.border_radius(10px);
}
//普通写法
/*.sanjiao{
width: 0;
height: 0;
overflow: hidden;
border-width: 10px;
border-color:transparent transparent transparent red;
border-style:dashed dashed dashed solid; //dashed解决ie有背景的问题
}*/
/*匹配模式*/
//边框实现三角形
.triangle(left,@w:50px,@c:#f00){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
.triangle(right,@w:50px,@c:#f00){
border-width: @w;
border-color: transparent @c transparent transparent ;
border-style: dashed solid dashed dashed ;
}
.triangle(top,@w:50px,@c:#f00){
border-width: @w;
border-color:@c transparent transparent transparent ;
border-style: solid dashed dashed dashed;
}
.triangle(bottom,@w:50px,@c:#f00){
border-width: @w;
border-color: transparent transparent @c transparent ;
border-style: dashed dashed solid dashed ;
}
.triangle(@_,@w:50px,@c:#f00){
width: 0;
height: 0;
overflow: hidden;
}
.sanjiao{
.triangle(right);
}
/*匹配模式-定位例子*/
.pos(r){
position: relative;
}
.pos(f){
position:fixed;
}
.pos(a){
position:absolute;
}
.pos(s){
position:statice;
}
.pipei{
width: 50px;
height: 50px;
left: 0;
top: 0;
background-color: #0f0;
.pos(f);
}
/*运算*/
@test_01:300px;
.box_02{
width:(@test_01 - 20)*5;
}
/*嵌套*/
.list{
width: 600px;
margin: 30px auto;
padding: 0;
list-style: none;
li{
height: 30px;
line-height: 30px;
background-color: pink;
margin-bottom: 5px;
padding: 0 10px;
}
a{
float:left;
//& 代表他的上一层选择器
&:hover{
color:#FF0000;
}
}
span{
float:right;
}

}
/*@arguments*/
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg(40px);
}
/*避免编译*/
.test_03{
width:~'calc(300px - 30px)';
}

//!important
.test_arguments{
.border_arg(40px) !important;
}

花了几个小时终于搞定了，还有待实践；

随机推荐

  1. ToolsCodeTemplate使用

    最近学习使用CodeSmith代码生成器 CodeSmith 是一种语法类似于asp.net的基于模板的代码生成器,程序可以自定义模板,从而减少重复编码的劳动量,提高效率. 作用:CodeSmith ...

  2. C#开发微信门户及应用(34)--微信裂变红包

    在上篇随笔<C#开发微信门户及应用(33)--微信现金红包的封装及使用>介绍了普通现金红包的封装和使用,这种红包只能单独一次发给一个人,用户获取了红包就完成了,如果我们让用户收到红包后,可 ...

  3. 从Google工程师到创业CTO，他的8项理念也许可以帮到你

    Lan Langworth是前Google软件工程师.O'Reily作者,现在他是Artillery的co-founder/CTO,致力于把游戏机质量的游戏带进网页浏览器.下文是他从Google离职到 ...

  4. [译]Godot系列教程五 - 制作Godot编辑器插件

    制作插件 下文仅针对2.1版本. 关于插件 插件是为编辑器扩展出更多有用工具的重要方式.它可以完全用GDScript和标准场景开发,甚至都不需重新加载编辑器就可生效.不像模块,你无需创建C++代码.也 ...

  5. HTTPS和HTTP的概念和区别

    HTPPS和HTTP的概念 HTTPS(全称:Hypertext Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP ...

  6. ssh改https为ssh

    第一:设置Git的user name和email: 第二:然后生成key 这里会生成两个文件 id_rsa 和 id_rsa.pub 第三:登录你的GITHUB账号 看下图 第四:测试下是否成功 第五 ...

  7. ClassNotFoundException超限

    错误日志图 被这弱智的错误吭了半个小时,项目本来好好的,然后因为改版加了很多东西,所以就超限了,一开始总是报下面那图的错,搞的我总以为是retrofit的错,但是好好的框架而且没改过,怎么可能会出错呢 ...

  8. 阶段一：为View设置阴影和弹出动画（天气应用）

    “阶段一”是指我第一次系统地学习Android开发.这主要是对我的学习过程作个记录. 上一篇阶段一:通过网络请求,获得并解析JSON数据(天气应用)完成了应用的核心功能,接下来就要对它进行优化.今天我 ...

  9. webpack-dev-server轻量级js高速打包、热部署服务器

    webpack是一个打包web项目的工具 ,可以实现css,js,less,cass,html的混淆加密,minify,结合webpack-dev-server热部署,非常方便前端页面和Nodejs的 ...

  10. json的理解及读取

    一: JSON 语法是 JavaScript 对象表示语法的子集,其语法规则如下: 数据在键值对中 数据由逗号分隔 花括号保存对象:{} 方括号保存数组:[] 如:[{"name" ...

相关文章