【Less】给 CSS 加点料

2024-02-21 17:17:16

【Less】给 CSS 加点料

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

说明

相比Sass的高调宣言，Less就比较低调了，看下面官网的介绍

官网地址：Less中文网

什么是 Less

已经知道了什么是Sass的情况下，相信对什么是Less应该也会比较的清晰了，它也是CSS的武器，让CSS更加强大。（感觉最近说话有点朴素了哈）

官方回答：Less （Leaner Style Sheets 的缩写）是一门向后兼容的 CSS 扩展语言。

总结：既然官方都怎么简洁低调了，就不用太多花里胡哨的了

安装Less

可以使用 npm来安装 Less。

npm install -g less

在浏览器中也可以使用

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

Less变量

变量这种东西当然是第一个来讲的。Less 变量使用 @ 符号。

语法

@variablename: value;

示例

@base-font: Helvetica, sans-serif;
@my-color: red;
@my-font-size: 18px;

body {
  font-family: @base-font;
  font-size: @my-color;
  color: @y-font-size;
}

转换为CSS代码

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

其实就是把变量的使用直接放入对应的值内。

变量的作用域

Sass的变量其实是有作用域的，Sass 变量的作用域只能在当前的层级上有效果，如果当前找不到，就像父节点上寻找

@myColor: red;

h1 {
  @myColor: green;   // 只在 h1 里头有用，局部作用域
  color: @myColor;  // green
}
p {
  color: @myColor;  // red
}

Less的嵌套规则

这个是方便我们书写的好东西，也是最显而易见的新增。

嵌套

嵌套还是直接看代码来的痛快

less代码

nav {
  ul {
    margin: 0;
    padding: 20px;
  }
  li {
    color: #FFFFFF;
  }
}

css代码

nav ul {
  margin: 0;
  padding: 20px;
}
nav li {
  color: #FFFFFF;
}

有点像HTML的形式了

@规则嵌套和冒泡

@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。

@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

// less
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

// css
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

导入文件@import

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉。

现在就不要问为什么要使用导入文件的方式了，问就是方便！就是真香！方便面：真香？？？

语法

@import filename; //less可省略
@import "filename.css";

混合Mixins

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法

示例

.important-text {
  color: red;
  font-size: 24px;
  font-weight: bold;
}

咋一看，这不就是一个普通的class样式吗

使用混合

.text {
  .important-text();
}

less的使用混合，那是相当的随意，非常好用！

映射Maps

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

比如在做一个主题色的时候，就可以很好的选择Less的映射。

示例

// less
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

// css
.button {
  color: blue;
  border: 1px solid green;
}

写在最后的话

写了Sass之后写了less，发现了很多共通的，也有许多差一点，感觉知识又浏览了一遍。使用Less呢，如果你的应用需要使用多种主题，可以考虑使用less。

感谢

万能的网络

以及勤劳的自己，个人博客，GitHub测试，GitHub

公众号-归子莫，小程序-小归博客

码农公寓