元英 發表於 2021-6-27 11:01:00

【Web前端HTML5&CSS3】18-less简介

<blockquote>
<p>笔记来源：尚硅谷 Web 前端 HTML5&amp;CSS3 初学者零基础入门全套完整版</p>
</blockquote>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>less 简介<ul><li>1、安装插件</li><li>2、编写 less</li><li>3、less 语法<ul><li>less 注释</li><li>父子关系嵌套</li><li>变量</li><li>其他</li></ul></li><li>4、混合函数<ul><li>其他</li></ul></li><li>5、补充</li></ul></li></ul></div><p></p>
<h1 id="less-简介">less 简介</h1>
<p><code>less</code>是一门<code>css</code>的预处理语言</p>
<ul>
<li><code>less</code>是一个 css 的增强版，通过<code>less</code>可以编写更少的代码实现更强大的样式</li>
<li>在<code>less</code>中添加了许多的新特性：像对变量的支持、对<code>mixin</code>的支持...</li>
<li><code>less</code>的语法大体上和<code>css</code>语法一致，但是<code>less</code>中增添了许多对<code>css</code>的扩展，所以浏览器无法直接执行<code>less</code>代码，要执行必须向将<code>less</code>转换为<code>css</code>，然后再由浏览器执行</li>
</ul>
<h2 id="1安装插件">1、安装插件</h2>
<p>在<code>vscode</code>中搜索<code>less</code>，点击<code>安装</code></p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/7649e0d4d1ad3f9179fecb8642287ad0.png" alt="image-20210626203546217" loading="lazy"></p>
<h2 id="2编写-less">2、编写 less</h2>
<p><strong>html 代码</strong></p>
<p>使用快捷方式创建<code>html</code>代码</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/f992f8225262f1355df4628586602a87.png" alt="image-20210626204018016" loading="lazy"></p>
<p><code>回车</code>生成<code>html</code>代码</p>
<pre><code class="language-html">&lt;div class="box1"&gt;&lt;/div&gt;
&lt;div class="box2"&gt;&lt;/div&gt;
&lt;div class="box3"&gt;&lt;/div&gt;
</code></pre>
<p><strong>less 代码</strong></p>
<p>创建<code>style.less</code>文件，编写<code>less</code>代码</p>
<pre><code class="language-less">body {
--height: calc(200px / 2);
--width: 100px;
div {
    height: var(--height);
    width: var(--width);
}
.box1 {
    background-color: #bfa;
}
.box2 {
    background-color: red;
}
.box3 {
    background-color: yellow;
}
}
</code></pre>
<p><code>Easy LESS</code>插件会帮助我们在<code>style.less</code>所在目录下面生成一个相同名称的<code>css</code>文件</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/201068ea2c14019210172db470a04934.png" alt="image-20210626204312658" loading="lazy"></p>
<p>查看生成的<code>style.css</code>代码</p>
<pre><code class="language-css">body {
--height: calc(200px / 2);
--width: 100px;
}
body div {
height: var(--height);
width: var(--width);
}
body .box1 {
background-color: #bfa;
}
body .box2 {
background-color: red;
}
body .box3 {
background-color: yellow;
}
</code></pre>
<p>我们直接在 HTML 中引入生成的<code>style.css</code></p>
<pre><code class="language-html">&lt;link rel="stylesheet" href="/css/style.css" /&gt;
</code></pre>
<p>运行代码，查看效果</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/97f40a1f8f76041202ac4ef693ad5b36.png" alt="image-20210626204502781" loading="lazy"></p>
<h2 id="3less-语法">3、less 语法</h2>
<h3 id="less-注释">less 注释</h3>
<p><code>less</code>中的单行注释，注释中的内容不会被解析到<code>css</code>中</p>
<p><code>css</code>中的注释，内容会被解析到<code>css</code>文件中</p>
<pre><code class="language-less">// `less`中的单行注释，注释中的内容不会被解析到`css`中

/*
`css`中的注释，内容会被解析到`css`文件中
*/
</code></pre>
<h3 id="父子关系嵌套">父子关系嵌套</h3>
<p>在<code>less</code>中，父子关系可以直接嵌套</p>
<pre><code class="language-less">// `less`中的单行注释，注释中的内容不会被解析到`css`中

/*
`css`中的注释，内容会被解析到`css`文件中
*/
body {
--height: calc(200px / 2);
--width: 100px;
div {
    height: var(--height);
    width: var(--width);
}
.box1 {
    background-color: #bfa;
    .box2 {
      background-color: red;
      .box3 {
      background-color: yellow;
      }
      &gt; .box4 {
      background-color: green;
      }
    }
}
}
</code></pre>
<p>对应的<code>css</code></p>
<pre><code class="language-css">/*
`css`中的注释，内容会被解析到`css`文件中
*/
body {
--height: calc(200px / 2);
--width: 100px;
}
body div {
height: var(--height);
width: var(--width);
}
body .box1 {
background-color: #bfa;
}
body .box1 .box2 {
background-color: red;
}
body .box1 .box2 .box3 {
background-color: yellow;
}
body .box1 .box2 &gt; .box4 {
background-color: green;
}
</code></pre>
<h3 id="变量">变量</h3>
<p>变量，在变量中可以存储一个任意的值</p>
<p>并且我们可以在需要时，任意的修改变量中的值</p>
<p>变量的语法：<code>@变量名</code></p>
<ul>
<li>直接使用使用变量时，则以<code>@变量名</code>的形式使用即可</li>
<li>作为类名、属性名或者一部分值使用时，必须以<code>@{变量名}</code>的形式使用</li>
<li>可以在变量声明前就使用变量（可以但不建议）</li>
</ul>
<pre><code class="language-less">@b1:box1;
@b2:box2;
@b3:box3;
@size:200px;
@bc:background-color;
@bi:background-image;
@color:red;
@path:image/a/b/c;

.@{b1}{
width: @size;
height: $width;
@{bc}: @color;
@{bi}: url("@{path}/1.png");
}

.@{b2}{
width: @size;
height: $width;
@{bc}: @color;
@{bi}: url("@{path}/2.png");
}

.@{b3}{
width: @size;
height: $width;
@{bc}: @color;
@{bi}: url("@{path}/3.png");
}
</code></pre>
<p>生成的<code>css</code>代码</p>
<pre><code class="language-css">.box1 {
width: 200px;
height: 200px;
background-color: red;
background-image: url("image / a / b / c/1.png");
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
background-image: url("image / a / b / c/2.png");
}
.box3 {
width: 200px;
height: 200px;
background-color: red;
background-image: url("image / a / b / c/3.png");
}
</code></pre>
<p><mark>注意：在<code>url</code>中使用<code>less</code>语法需要用引号包裹</mark></p>
<h3 id="其他">其他</h3>
<pre><code class="language-less">.p1 {
width: @size;
height: $width;
&amp;-wrapper {
    background-color: peru;
}
// &amp;:hover{
//   background-color: blue;
// }
:hover {
    background-color: blue;
}
}
.p2:extend(.p1) {
color: @color;
}
.p3 {
.p1();
}
.p4() {
width: @size;
height: $width;
}
.p5 {
// .p4();
.p4;
}
</code></pre>
<p>生成的<code>css</code>代码</p>
<pre><code class="language-css">.p1,
.p2 {
width: 200px;
height: 200px;
}
.p1-wrapper {
background-color: peru;
}
.p1 :hover {
background-color: blue;
}
.p2 {
color: red;
}
.p3 {
width: 200px;
height: 200px;
}
.p5 {
width: 200px;
height: 200px;
}
</code></pre>
<ul>
<li><code>&amp;</code> 拼接</li>
<li>伪元素</li>
<li><code>:extend()</code> 对当前选择器扩展指定选择器的样式（选择器分组）</li>
<li><code>.p1()</code> 直接对指定的样式进行引用，这里就相当于将<code>p1</code>的样式在这里进行了复制（<code>mixin</code> 混合）</li>
<li>使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个<code>mixins</code>混合函数</li>
</ul>
<h2 id="4混合函数">4、混合函数</h2>
<p>在混合函数中可以直接设置变量，并且可以指定默认值</p>
<pre><code class="language-less">.test(@w:200px, @h:100px, @bc:red) {
width: @w;
height: @h;
background-color: @bc;
}

.p6 {
// .test(200px, 100px, red); // 对应参数位传值
// .test(@h:200px,@w:100px,@bc:red); // 写明对应属性，可变换顺序
// .test();
.test(300px);
}
</code></pre>
<p>生成的<code>css</code>代码</p>
<pre><code class="language-css">.p6 {
width: 300px;
height: 100px;
background-color: red;
}
</code></pre>
<h3 id="其他-1">其他</h3>
<ul>
<li>
<p><code>average</code>混合函数</p>
<pre><code class="language-less">.h1 {
color: average(red, yellow);
}
</code></pre>
<p>生成的<code>css</code>代码</p>
<pre><code class="language-css">.h1 {
color: #ff8000;
}
</code></pre>
</li>
<li>
<p><code>darken</code>混合函数</p>
<pre><code class="language-less">body {
background-color: darken(#bfa, 50%);
}
</code></pre>
<p>生成的<code>css</code>代码</p>
<pre><code class="language-css">body {
background-color: #22aa00;
}
</code></pre>
</li>
</ul>
<h2 id="5补充">5、补充</h2>
<p>创建<code>all.less</code>文件，将我们之前编写的<code>less</code>文件通过<code>@import</code>引入进来</p>
<p>可以通过<code>import</code>来将其他的<code>less</code>引入到当前的<code>less</code>中</p>
<pre><code class="language-less">@import "style.less";
@import "syntax.less";
</code></pre>
<p>查看生成的<code>all.css</code>代码，会发现其他的内容囊括了两个<code>less</code>文件的内容</p>
<p>所以，我们可以利用<code>@import</code>来对<code>less</code>文件进行整合，然后引入生成的<code>css</code>文件使用即可</p>
<p>这样，每次修改的时候直接对某个模块的<code>less</code>文件进行修改，就会非常简单</p>
<p>如果我们观察过之前<code>fontawesome</code>源码文件，会发现其中也有<code>less</code>代码文件</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/71b255aafaccb595fc0341c50f6a3fa0.png" alt="image-20210626222450991" loading="lazy"></p>
<p>不同的<code>less</code>文件里都有其自己的<code>职责</code>，如</p>
<ul>
<li><code>_animated.less</code>中专门存放动画的混合函数</li>
<li><code>_variables.less</code>中专门存放定义的变量</li>
<li>...</li>
</ul>
<p>但是也有个问题，通过<code>F12</code>调试时显示的也是<code>css</code>中对应的行号</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/dcc8dac7e284d8f1f296455dd302d7a6.png" alt="image-20210626223208492" loading="lazy"></p>
<p>如果我们要改，需要找一下，太麻烦了，能不能直接显示<code>less</code>中行号呢？这样我们直接定位到对应<code>less</code>中直接进行修改，维护起来也会比较方便</p>
<p>我们需要在<code>Easy LESS</code>插件中修改<code>settings.json</code>文件，在其中添加如下配置</p>
<pre><code class="language-json">"less.compile": {
    "compress": true, // true =&gt; remove surplus whitespace
    "sourceMap": true, // true =&gt; generate source maps (.css.map files)
    "out": true // false =&gt; DON'T output .css files (overridable per-file, see below)
}
</code></pre>
<p>修改完毕后，会发现多生成出来一个<code>all.css.map</code>文件，说明配置生效</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/288677124cd646d938430db12c32efbe.png" alt="image-20210626224441979" loading="lazy"></p>
<p>再刷新下页面，通过<code>F12</code>会发现变成了<code>less</code>文件对应的行号</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/781253b1659517f6dcf08697930b8e6d.png" alt="image-20210626223858712" loading="lazy"></p>
<p>我们来逐一解释下配置的<code>less.compile</code>项中每一个属性的含义</p>
<ul>
<li><code>compress</code> 生成的<code>css</code>文件代码会被压缩（作用相当于我们之前安装的<code>JS &amp; CSS Minifier (Minify)</code>插件的效果）</li>
<li><code>sourceMap</code> 生成<code>.css.map</code>文件，通过<code>F12</code>可以查看了<code>less</code>文件对应行号</li>
<li><code>out</code> 生成对应<code>css</code>文件（当然是需要了）</li>
</ul><br><br>
来源：https://www.cnblogs.com/vectorx/p/14940122.html
頁: [1]
查看完整版本: 【Web前端HTML5&CSS3】18-less简介