前端学习系列 -- Less学习（一）

本系列为各个前端相关知识重新深度学习，有需要的小伙伴可关注该专栏，后续会持续更新不同类型的前端相关知识总结

前言

正如Less官网所展示的那句话 它是 CSS，只是多了一点东西,Less作为css的语言扩展，只是对css语言做了一些方便的补充，能让开发者更易于开发和使用。对于我个人而言，less具有层级的写法能减少重复选择器的书写，方便阅读，就像看html框架结构那样，更方便地读懂css结构。

安装

nodejs安装

（1）全局安装使用 npm 安装

npm install less -g

(2) 局部安装

css 复制代码

npm i less --save-dev

如上所示，只需要简单地操作就能在我们的项目中愉快地使用less了

lessc

就如同javac能够将.java文件编译为.class文件一样，我们可以使用lessc命令将.less文件编译为.css文件，这样就能够被浏览器直接识别。

例：我们新建一个test.less文件，简单写几个样式

css 复制代码

.main{
   padding:4px;
   height:100px;
   .content{
       margin:8px;
   }
}

可以在命令行中使用lessc命令编译

lessc test.less test.css

会发现同目录下生成了test.css 文件，文件内容如下：

css 复制代码

.main {
  padding: 4px;
  height: 100px;
}
.main .content {
  margin: 8px;
}

浏览器中使用

除了使用nodejs等第三方工具预编译外，我们可以简单地直接在浏览器中使用less

首先在head中引用less样式表

bash 复制代码

<link rel="stylesheet/less" type="text/css" href="styles.less" />

然后在script中添加less.js

xml 复制代码

<script src="less.js" type="text/javascript"></script>

还可以通过编程方式设置选项，方法是将它们设置在脚本标记之前的 less 对象上 - 这会影响所有初始链接标签和 less 的编程使用

xml 复制代码

<script>
  less = {
    env: "development",
    async: false,
    fileAsync: false,
    poll: 1000,
    functions: {},
    dumpLineNumbers: "comments",
    relativeUrls: false,
    rootpath: ":/a.com/"
  };
</script>
<script src="less.js"></script>

Less.js 支持所有现代浏览器（最新版本的 Chrome、Firefox、Safari 和 Edge）,但是依然建议在服务器端编译 Less。

使用语法

变量

less使用@来标识变量，如下所示：

less 复制代码

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

通过编译可以得到如下结果：

css 复制代码

#header {
  width: 10px;
  height: 20px;
}

在开发中使用变量能够将样式表中很多重复的值统一配置，如规范中的padding、color、border等属性的值，能够方便地让开发者统一值，以及方便统一修改，更易于使用。在一键换肤、主题切换等使用场景非常适用。除上述案例中的表示属性值，变量还可用于多个场景：（1）选择器

less 复制代码

@my-selector: banner;

.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

(2) URL

less 复制代码

@images: "../img";

body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

(3) 导入语句

less 复制代码

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less";

(4) 属性

less 复制代码

@property: color;

.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

(5) 属性作为变量（新）

你可以使用 $prop 语法轻松地将属性视为变量

css 复制代码

.widget {
  color: #efefef;
  background-color: $color;
}
 //编译后
.widget {
  color: #efefef;
  background-color: #efefef;
}

混入

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

当我定义了一个样式，如下：

css 复制代码

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果我们在其他class下也需要使用同样的属性，那么可以使用混入，如下所示：

css 复制代码

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

//编译后
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

更多用法：（1）带括号的混入如果你想创建一个 mixin 但你不希望那个 mixin 出现在你的 CSS 输出中，可以在mixin定义之后加上括号，如下所示：

css 复制代码

.my-mixin {
  color: black;
}
.my-other-mixin() {
  background: white;
}
.class {
  .my-mixin();
  .my-other-mixin();
}

//编译后
.my-mixin {
  color: black;
}
.class {
  color: black;
  background: white;
}

（2）!important 关键字在 mixin 调用后使用 !important 关键字将其继承的所有属性标记为 !important，如下所示：

less 复制代码

.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

//编译后
.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

（3）参数混合可以将参数传递给Mixins，就如同使用js函数那样简单

less 复制代码

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

(4) @arguments 变量

less 复制代码

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}
.big-block {
  .box-shadow(2px, 5px);
}

//编译后
.big-block {
  -webkit-box-shadow: 2px 5px 1px #000;
     -moz-box-shadow: 2px 5px 1px #000;
          box-shadow: 2px 5px 1px #000;
}

嵌套

（1）基本使用

css 复制代码

a {
  color: blue;
  &:hover {
    color: green;
  }
}

//编译后
a {
  color: blue;
}
a:hover {
  color: green;
}

（2）生成重复类名

css 复制代码

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }

  &-custom {
    background-image: url("custom.png");
  }
}

//输出
.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");
}

（3）多个 &

css 复制代码

.link {
  & + & {
    color: red;
  }

  & & {
    color: green;
  }

  && {
    color: blue;
  }

  &, &ish {
    color: cyan;
  }
}

//输出
.link + .link {
  color: red;
}
.link .link {
  color: green;
}
.link.link {
  color: blue;
}
.link, .linkish {
  color: cyan;
}

（4）更改选择器顺序将选择器添加到继承的（父）选择器之前可能很有用。这可以通过将 & 放在当前选择器之后来完成，如下所示：

css 复制代码

.header {
  .menu {
    border-radius: 5px;
    .no-borderradius & {
      background-image: url('images/button-background.png');
    }
  }
}

//输出
.header .menu {
  border-radius: 5px;
}
.no-borderradius .header .menu {
  background-image: url('images/button-background.png');
}

操作

算术运算 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能，数学运算会考虑单位并在加、减或比较之前转换数字。结果在最左边有明确说明的单位类型。如果转换不可能或没有意义，则忽略单位。不可能转换的例子：px 到 cm 或 rad 到 %。

less 复制代码

@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

转义

转义允许你使用任意字符串作为属性或变量值。~"anything" 或 ~'anything' 中的任何内容都按原样使用，除了插值之外没有任何变化,如下所示：

less 复制代码

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

//编译结果
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

从 Less 3.5 开始，你可以简单地写

less 复制代码

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

总结

以上是less的基本使用方法，除此之外，还有函数、命名空间、作用域等相关高级用法将在下一篇文章中继续概述，欢迎小伙伴们点赞加关注,持续发布更有趣的文章。