Less CSS简单归纳

前言

最近使用angualr开发一个应用，但是因为这个应用样式风格经常性的改动，在设计之初和同事讨论采用皮肤方式进行设计，便于对应用UI管理.那么我选择了Less进行样式编写。我的同事因为是一个纯后端，所以它对Less不怎么了解，问我Less是什么？为啥要用Less?所以我今天就记录一下，让更多想了解Less同学能够通过我的表述获得一些收获。

什么是Less？

LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。

为什么用Less?

Less支持创建更简洁，跨浏览器友好的CSS更快更容易。
Less是用JavaScript设计的，并且创建在 live 中使用，其编译速度比其他CSS预处理器更快。
Less保持你的代码以模块化的方式，这是非常重要的，通过使其可读性和容易改变。
可以通过使用LESS 变量来实现更快的维护。

备注：Less 2009年被设计，第一版是用Ruby编写的，后来被JavaScript代替。

Less CSS对CSS的扩展，使得其可以创建更加简洁友好、可重用性高的样式，那么接下来就手摸手的告诉你怎么使用less让你的应用样式管理更加的高效。

Less 的使用好处在于它的那些特性，可以解决像CSS没法达到的编写效果。

通常我们使用CSS编写样式时，都是id选择器，类选择器，但是每次都需要定位某个元素时前面写一大坨的父级选择器。如下所示：

.top .nav-bar .collspec a{
    color: red;
}

// 字体颜色
.top .nav-bar .collspec span{
    color: #fff;
}

// 图标颜色
.top .nav-bar .collspec i{
    color: blue;
}

.......

上面写法随着样式文件的增大，以及元素嵌套层级越来越深时变得越来越难维护。我们来看看less 怎么写。

.top{
    .nav-bar{
            .collspec{
                  a{
                        color:red;
                    }
                    span{
                      color:#fff;
                    }
                    i{
                        color:blue;
                    }
            }
    }
}

less的写法是不是更贴近元素嵌套的方式，这样维护起来是不是比传统的方式要好的多。这个特性就是less的嵌套。less嵌套是less的一个语法糖，编译后生成的css文件依然是我们传统的写法，但用了less我们就只关心维护less文件就可以了，编译打包后的css文件我们可以不用关心了，这是不是很棒。less编译器把less文件转成css文件，这样让我们从传统css中解脱出来了。

案例分析

A公司有一个应用爱泡泡b,这个爱泡泡b因为功能的更新迭代，想要更换应用的皮肤，这个需求在现实中是非常常见的需求。

通常一个成熟的应用，如果换皮肤通常是不会去改变布局，因为用户已经习惯了这个布局风格后，
如果贸然修改布局对于用户来说可能存在风险，那既然布局不该变，那么换皮肤就成为了改变页面中
元素样式的工作。

最简单的方式就是重新写一套样式替换原来的样式，那么这里就出现几个问题：修改成本大，样式重用性低。那如果我们在一开始设计时就让样式是动态的那么是不是就不存在这些问题，而我们换皮肤就变成关注那些动态值的改变就可以了。这就是less变量的作用。

less变量使用案例：

// 建议所有项目自定义样式放在该文件夹下
@green-style:#2ECD99;
// 白色背景定义
@white-back:#fff;
// 白色定义
@white:#fff;
// 灰色定义
@gray: #ddd;
// 左侧菜单栏宽度
@sider-bar-width: 200px;
// 左侧菜单背景色
@sider-bar-back-color: #2A3E4C;
// top导航高度
@top-nav-height: 64px;

// top导航栏背景色
.header{
  background-color: @white-back;
}

// 设置左侧背景色
.aside {
  position: fixed;
  top: 0;
  bottom: 0;
  margin-top: @top-nav-height;
  width: @sider-bar-width;
  background-color: @sider-bar-back-color;
  transition: width 0.2s cubic-bezier(0.25, 0, 0.15, 1), translate 0.2s cubic-bezier(0.25, 0, 0.15, 1);
  z-index: 14;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

// 设置菜单字体颜色
.d-block .ng-star-inserted{
  color: #878787 !important;
}

// 未选中菜单样式
.ad-nav__item .ng-star-inserted span{
  color: @white;
}

// 选中菜单项样式
.ad-nav__selected {
  border: 0px;
  background-color: @sider-bar-back-color;
}
// 选中字体颜色
.ad-nav__selected .ng-star-inserted span{
  color: @green-style !important;
}

// 刷新按钮样式
.button-refresh{
  background: @green-style;
  border-color: @green-style;
  font-size: 18px;
}

// 表格菜单里操作按钮
i.i-button-block {
  color: @green-style;
}

// 表格行样式 奇数项中区分黑白
.ant-table-body  tr:nth-child(4n-1) {background-color: @white;}
.ant-table-body  tr:nth-child(4n+1)  {background-color: @gray;}

// 搜索组件样式
.sf-btns .ant-form-item-control button[type='submit'] {
  background-color: @green-style;
  border-color: @green-style;
}

//表格pagination样式
.ant-pagination-item-active:focus, .ant-pagination-item-active:hover {
  border-color: @green-style;
}

// 选中样式
.ant-pagination-item-active {
  border-color: @green-style;
  font-weight: 500;
}

// 选中字体样式
.ant-pagination-item:focus a, .ant-pagination-item:hover a, .ant-pagination-item-active a {
  color: @green-style;
}

// 获取焦点样式
.ant-pagination-item:focus, .ant-pagination-item:hover {
  transition: all .3s;
  border-color: @green-style;
}

// 前一页，后一页样式
.ant-pagination-prev:focus .ant-pagination-item-link,
.ant-pagination-next:focus .ant-pagination-item-link,
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
  border-color: @green-style;
  color: @green-style;
}

这样如果要改变风格就只需要修改变量的值即可，如果你说布局数值也要改变，那么你就把字体大小，容器大小都做成变量，在调整时进行对应修改即可，同时你可以把这些变量单独管理在一个文件通过引入的方式在全局使用，这样你需要关注的文件就缩小到更小的范围了。是不是更加方便与项目维护呢？

我这里只是简单的说明一下他的好处，它的好用特性远不止这些，有兴趣的朋友可以进入官网查看详细的文档，我就不再这里过多的写那些语法内容了。希望对你有帮助。