# less（less is more, Than css）

标签（空格分隔）：实习笔记

---

可以加入变量和运算。
less有多种编译环境，桌面的编译工具：koala编译。node.js库编译。浏览器编译。把less文件编译成css。
**less注释**
>在less中，有两种注释，<pre>/**/和//，前者在编译时会被保留，后者不被编译</pre>

**变量**

>在less里定义变量，用@符号定义，然后就可以用变量了
<pre>
如

@test：300px;

.box{
width:@test;
height:@test;
background-color:#CCC;
}
</pre>

**混合**
>写 css 遇到可以重用的东西，重用样式，在less里的处理方法如下
<pre>
@test：300px;

.box{
width:@test;
height:@test;
background-color:#CCC;

.border;
}

.box2{
.box;
margin-left:100x;
}
//带参数的混合的运用
.test_hunhe{
.border_02(30px);
}

//带默认值的参数，默认为10，但是有特殊的时候可以在border_03（这里带值）
.test_hunhe_03{
border_03();
}
.border{
border:solid 5px pink;
｝

//带参数的混合
border_02(@border_width){
border:solid #CCC @border_width;
}

//混合，带默认参数
.border_03(@border_width:10px){
border:solid green @border_width;
}
//混合例子
.border_radius(@radius:5px){
-webkit-border-radius:@radius;
}
.radius_test{
width:100px;
height:40px;
background-color:green;

.border_radius();
}
//不希望使用默认值
.radius_test2{
width:100px;
height:40px;
background-color:green;

.border_radius(10px);
}
</pre>
**匹配模式**
>相当于 js 中的 if，但不完全是，满足条件才能匹配
<pre>
//用 css 画三角
.sanjiao{
width:0;
height:0;
overflow:hidden;

border-width:10px;
border-color:red transparent red transparent;
border-style:solid;
}

//匹配模式
.triangle(top,@w:5px;@c:#CC){
border-width:@w;
border-color:transparent transparent @c transparent ;
border-style:dashed dashed solid dashed;
}
.triangle(right,@w:5px;@c:#CC){
border-width:@w;
border-color:transparent transparent transparent @c;
border-style:dashed dashed dashed solid;
}
.triangle(bottom,@w:5px;@c:#CC){
border-width:@w;
border-color: @c transparent transparent transparent ;
border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px;@c:#CC){
border-width:@w;
border-color:transparent @c transparent transparent ;
border-style:dashed solid dashed dashed;
}
//无论匹配谁都必须带上的，比如选了.triangle(top）；可以这样写
.triangle(@_,@w:5px;@c:#CCC){
width:0px;
height:0px;
overflow:hidden;
}
.sanjiao{
.triangle(top);
}

//匹配模式的定位
.pos(r){
position:relative;
}
.pos(a){
position:absolute;
}
.pos(f){
position:fixed;
}
.pipei{
width:200px;
height:200px;
background-color:green;
pos(a);
</pre>
**运算**
>less中是可以有运算的
<pre>
@test_01:300px;
.box_02{
width:test_01+20*5;
}
</pre>
**嵌套规则**
>当我们写列表性的东西时，可以这样写。但是要尽量少去匹配元素。
<pre>
.list{
width:600px;
margin:0;
padding:0;
list-style:none;

li{
height:30px;
line-height:30px;
background-color:pink;
margin-bootom:5px;

a{
float:left;
//代表他的上一层选择器
&：hover{
color:red;
}
}
}
}
</pre>
**@srguments变量**
<pre>
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments
}
//arguments用例
.test_arguments{
.border_arg();
}
</pre>
**避免编译**
>有的时候我们会写一些 less 不认识的文字，如滤镜，所以需要避免编译。imporent
<pre>
//避免编译
test_03{
width:~'calc(300px-30px)';
}

//important
.test_important{
border_radius()!important;
}
</pre>

# less（less is more, Than css）相关推荐

前端面试题整理——（第一弹 HTML和CSS）
文章目录前端面试题整理--(第一弹 HTML和CSS) 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什 ...
2023高薪前端面试题（一、前端基础——css）
• 说一下 css 盒模型盒模型分为IE盒模型和W3C标准盒模型.盒子的宽度和高度的计算方式由box-sizing属性控制. box-sizing属性值 content-box:默认值,conten ...
前端入门（加载特效，css）
哈哈效果你们就这么看看吧,实在不会截取 gif ,将就将就,或者复制粘贴代码去看看吧(最好还是去看看效果) 这个效果简单说就是有一个带有一半黑边框的圆用 ease-out (最后以慢速度结尾)进行旋转 ...
前端大作业-期末课程设计-小米有品网站制作（PC端界面+HTML5+CSS）
仿照小米有品官网制作的pc端界面,只用了HTML5和CSS,没有使用JS HTML5部分共计700多行代码,CSS部分共计1400多行,合计2100多行小米有品官网链接: https://www.x ...
html做出来的网页参考,完整的网页创建手册（DHTML，HTML，CSS）参考手册CHM格式...
通过以下链接访问参考资料,以帮助您创建引人入胜的网页. 动态HTML(DHTML)对象模型参考 DHTML对象 DHTML属性 DHTML方法 DHTML事件 DHTML集合 HTML参考 HTML元 ...
python网络数据采集第三版_（数据科学学习手札31）基于Python的网络数据采集（初级篇）...
一.简介在实际的业务中,我们手头的数据往往难以满足需求,这时我们就需要利用互联网上的资源来获取更多的补充数据,但是很多情况下,有价值的数据往往是没有提供源文件的直接下载渠道的(即所谓的API),这时 ...
前端入门（雷云特效，css）
(推荐个别人写的css特效网站CSS3的奇思妙想,感觉有好多蛮好玩的功能,这个特效是在里面偏下面一点的位置) (最好还是看一下动画的演示效果,直接复制粘贴就行了) 实现原理其实很简单,三个部分,云层, ...
用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 < ...
水平导航菜单（DIV+CSS）
水平导航菜单(DIV+CSS) 完全用DIV+CSS做的菜单,相比传统用图片做的打开速度更快.预览最终效果>> #nav{height: 44px;width: 425px;backgro ...

# less（less is more, Than css）

# less（less is more, Than css）相关推荐

最新文章

热门文章