less基础笔记整理

2020/10/7 11:34:04admin0 阅读2 评论

Less 是一门 CSS 预处理语言，通过less编写类似于css的代码，最后编译成正常的css文件，给项目使用。
但是功能上比css更强大，在css的基础上扩展了变量、函数、循环、继承等功能。使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。

语法 [ @变量名：变量值; ]

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

@w:100px;

.box{
width:@w;
}

/编译结果/
.box {
width: 100px;
}

</code></pre>

<h3>更多的变量使用方案</h3>
针对于属性值的，例如：图片引入地址

@imgurl:“…/images”;

.box1{
background: url(‘@{imgurl}/1.jpg’);
}
.box2{
background: url(‘@{imgurl}/2.jpg’);
}
.box3{
background: url(‘@{imgurl}/3.jpg’);
}

/编译结果/
box1 {
background: url(‘…/images/1.jpg’);
}
.box2 {
background: url(‘…/images/2.jpg’);
}
.box3 {
background: url(‘…/images/3.jpg’);
}
作为插入到一部分内容的变量，要包含在`{

</code></pre>

针对选择器的

@box:box_one;

.@{box}{
width: 100px;
}
/编译结果/
box_one {
width: 100px;
}
</code></pre>
<h3>变量使用注意事项</h3>
变量的声明不是必须在使用前
<pre class=“language-less line-numbers”><code class=“language-less”>
div{
width: @w;
}
@w:200px;
/编译结果/
div {
width: 200px;
}

</code></pre>

变量名同作用域下不能重复，否则会被更改掉

@w:200px;
@w:300px;
div{
width: @w;
}
/编译结果/
div {
width: 300px;
}

</code></pre>

作用域，less中，是有作用域的，作用域会影响当前的变量，在什么范围内是有效的，是否会替换

w:300px;
.box1{
@w:200px;
width:@w;
}
.box2{
width:@w;
}
/编译结果/
.box1 {
width: 200px;
}
.box2 {
width: 300px;
}

</code></pre>

<h2>嵌套</h2>
可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
类似于html的结构，通过嵌套，来表现父子级关系，不建议嵌套过多层（包含选择器：不推荐超过三层）

.box{
.nav{
border: 1px solid #000;
}
}/编译结果/
.box .nav {
border: 1px solid #000;
}

</code></pre>

// & —— 父选择器
.clearfix{
&:after{
content: ‘’;
display: block;
clear: both;
}
}
/编译结果/
.clearfix:after {
content: ‘’;
display: block;
clear: both;
}

.box{
.warp &{
width: 200px;
}
}
/编译结果/
.warp .box {
width: 200px;
}

</code></pre>

<h3>无参数混合</h3>

.box{
height: 200px;
background: red;
}
.content{
.box;//也可以是 .box()
}
/编译结果/
.box {
height: 200px;
background: red;
}
.content {
height: 200px;
background: red;
}

</code></pre>

.box(@a,@b){
height: @a;
background: @b;
}
.content{
.box(200px,red);
}
/编译结果/
.content {
height: 200px;
background: #ff0000;
}

</code></pre>

这种方式，对于数值方面更加自由，但是也有缺点，加了()的那个样式，会发现在css中没有出现。而且，如果使用的时候，不传入参数，会编译失败，这时候我们可以设置默认值

<h3>默认值设置</h3>

.box(@a:200px,@b:red){
height: @a;
background: @b;
}
.content{
.box;
}
/编译结果/
.content {
height: 200px;
background: #ff0000;
}

</code></pre>

<h3>arguments</h3>
arguments表示传进来的所有参数

.border(@w:2px,@s:solid,@c:red){
border: @arguments; // 参数按顺序以空格为分隔符链接在一起
}
.box{
.border;
}
/编译结果/
.box {
border: 2px solid #ff0000;
}

</code></pre>

<h2>运算</h2>
Less提供了加(+)，减( - )，乘(*)和除(/)运算，并且可以在任何数字，颜色或变量操作。
<h3>加法</h3>

<pre class=“language-less line-numbers”><code class=“language-less”>
div{
width: 100 + 20px;
}
/编译结果/
div{
width: 120px;
</code></pre>

<pre class=“language-less line-numbers”><code class=“language-less”>
div{
width: 100 - 20px;
}
/编译结果/
div{
width: 80px;
}
</code></pre>

<h3>混合</h3>
<pre class=“language-less line-numbers”><code class=“language-less”>
.box{
width:800px - 50 * 2;
height:800px - 50 * 2;
padding:50px;
}
/编译结果/
.box {
width: 700px;
height: 700px;
padding: 50px;
}
</code></pre>

<ul>
<li>运算符使用注意事项(加减乘除)</li>
<ul>
<li>- 运算符的左右，都保留空格</li>
<li>- 运算的时候，最好包裹在()内</li>
</ul>
<li>font 复合样式容易有问题哦</li>
<li>当运算数值具有单位时，需要注意：</li>
<ul>
<li>- 一个单位：最终结果根据唯一的这个单位</li>
<li>- 两个单位：为第一个单位</li>
</ul>
<li><a href=“http://lesscss.cn/functions” rel=“noopener” target=“_blank”>Math函数</a></li>

</ul>

<h2>继承</h2>
继承是less中的一个伪类，它可以匹配当前继承中的所有样式，如果用混合，操作以下css样式
<pre class=“language-less line-numbers”><code class=“language-less”>
.box{
width: 200px;
height: 200px;
.a{
color: red;
}
}
.box1{
.box;
}
/编译结果/
.box {
width: 200px;
height: 200px;
}
.box .a {
color: red;
}
.box1 {
width: 200px;
height: 200px;
}
.box1 .a {
color: red;
}
</code></pre>
混合中，也同样给<code>.box1 </code>下面的<code> .a</code>添加了样式，但其实我想要的只是<code>.box1</code>

<pre class=“language-less line-numbers”><code class=“language-less”>
.box{
width: 200px;
height: 200px;
.a{
color: red;
}
}
.box1:extend(.box){

}
/编译结果/
.box,
.box1 {
width: 200px;
height: 200px;
}
.box .a {
color: red;
}
</code></pre>

和混合的最终结果是一样的，但是在显示上面是有差别的，这里最终的显示会用群组选择器，另外，继承不能使用参数

<h2>判断</h2>
我可不是你想调用就能调用的混合，有些时候，我也是有条件的，通过<code>when</code>关键词，可以为设定条件调用

<pre class=“language-less line-numbers”><code class=“language-less”>
.box(@w) when(@w>0){
width:@w;
}
.box1{
.box(40px);
}
/编译结果/
.box1 {
width: 40px;
}
</code></pre>
<h3>与</h3>
<code>and</code>可以连接两个条件，并且两个条件都需要满足，才可以添加后续样式

<pre class=“language-less line-numbers”><code class=“language-less”>
.box(@w,@h) when (@w>0) and (@h>0){
width: @w;
height: @h;
}
.box1{
.box(100px,0px);
}
/编译结果/
// 因为高不符合条件，所以并没有添加上样式。
</code></pre>

<h2>或</h2>
<code>,</code>任何一个结果符合条件，就执行后面的代码（或）

<pre class=“language-less line-numbers”><code class=“language-less”>
.box(@w,@h) when (@w>0),(@h>0){
width: @w;
height: @h;
}
.box1{
.box(100px,0px);
}
/编译结果/
.box1 {
width: 100px;
height: 0px;
}

// 同样的值，同样的判断，但是在这里，我们添加上了后续样式

</code></pre>

<h3>非</h3>
<code>not</code>只要不是这个判断条件成立，就可以

<pre class=“language-less line-numbers”><code class=“language-less”>
.box(@w,@h) when not (@w=100){
width: @w;
height: @h;
}
.box1{
.box(100px,120px);
}
/编译结果/
// 因为这里的@w = 100px成立，所以样式没有添加上（排除当前写的这个情况，别的都可以）
</code></pre>

<h2>注释</h2>
less注释的写法分两种
<pre class=“language-less line-numbers”><code class=“language-less”>
// 此写法不会再编译的css文件中体现
/css注释方法，会在编译后体现/
</code></pre>

评论区