CSS系列——前端进阶之路：初涉Less

时间 2019-11-06

标签 css 系列前端进阶之路栏目 CSS 繁體版

原文原文链接

前言：最近帮一个朋友解决点问题，在查看组件源码的时候涉及到了less语法，这可难倒博主了。没办法，既然用到就要学呗，谁让咱是无所不能的程序猿呢！因此今天来学习下Less，算是笔记，也但愿给初学less的园友提供参考，若是你是前端大神，此文就不必看了哈。算了，扯远了哈，进入正题。javascript

本文原创地址：http://www.cnblogs.com/landeanfen/p/6047031.htmlcss

1、Less介绍

一、官方介绍

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增长了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制做主题、扩充。Less 能够运行在 Node 或浏览器端。html

二、本身理解

Less是一门动态CSS语言，使得CSS样式更加灵活地做用于Html标签。试想若是没有Less，咱们要对样式作一些逻辑计算的时候只能依靠Js去实现，有了Less以后，能够方便地动态给Html标签设置样式。好比一个最多见的需求，在当前浏览器的宽度小于500px的时候，给某一个div设置一个样式，使用less+css3就能很简单的解决问题。固然，这只是其中一个场景，less里面还能进行一些常见的条件和逻辑判断。总的来讲，Less赋予了CSS逻辑运算的能力。前端

除此以外，动态CSS语法还有一个重要的做用就是提升样式代码的可维护性。好比一个最简单的，咱们能够定义一个全局的颜色变量@aaa:#222，系统里面全部的默认颜色用的@aaa来写的，这个时候若是须要修改这个全局颜色，咱们只须要改下@aaa变量的值就行了，其余地方不用作任何修改，这点，做为编程人员应该很容易理解。java

说一千道一万，实践才是王道，下面跟着博主一块儿来看看一些Less最基础的用法吧。css3

三、Less、Sass、Stylus

说到Less，可能又有人不服了，可能有人要说：Less过期了，Sass是趋势，你看bootstrap3用的是less，怎么bootstrap4就改用sass了等等。博主想，它们三者做为Css的预处理技术，确定都有本身的优点吧。今天在这里不想讨论三者的优缺点，先来学习Less吧，想那么多干吗！git

2、Less使用入门

关于Less的入门教程，网上也是一搜一大把，基本都和Less中文网上面差很少。Less既能够运行在Node服务端，也能够运行在浏览器客户端。博主对Node不熟，因此这篇仍是看看其在浏览器端的使用，其实没有关系，无论在哪里使用，其基础的用法都是同样的。github

通常来讲，客户端运行Less分为两种状况：web

第一种方式是直接在html页面引用.less文件，而后借助less.js去编译less文件动态生成css样式而存在于当前页面，这种方式适用于开发模式。
第二种方式是咱们首先写好.less文件的语法，而后借助工具生成对应的.css文件，而后客户端直接引用.css文件便可。好比咱们经常使用的bootstrap.css就是经过工具编译而成，这种方式更适合运行环境。

一、开发模式下使用Less

（1）首先咱们在项目下面新建一个less文件，命名为less.less，里面写入最简单的语法

@base: #f938ab;

div{
    background-color:@base;
    padding:50px;
}

（2）而后在html页面head里面引用该less文件

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

（3）去 less开源地址下载less.js文件，而后引入该文件。

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

或者你若是不想去下载less.js文件，也能够直接使用CDN的方式引用less.js，博主就是这么作的。ajax

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

须要说明的是，less.js的做用就是编译less.less文件，使它成为浏览器能读懂的css样式。

（4）在引用less.js以前，须要一个less变量，声明编译less的环境参数，因此最终全部引用文件以下：

　　<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" />
    <script type="text/javascript">
    less = {
        env: "development",
        async: false,
        fileAsync: false,
        poll: 1000,
        functions: {},
        dumpLineNumbers: "comments",
        relativeUrls: false,
        rootpath: ":/a.com/"
    };
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

这里要强调的是，less变量的声明必需要在less.js的引用以前。

（5）调试运行

咱们直接运行项目，获得以下结果

若是你的调试环境不是Visual Studio，就不会有这个问题！对于上述问题，须要在web.config里面配置以下节点

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".less" mimeType="text/css" />
  </staticContent >
</system.webServer>

而后再次运行，能够看到编译生成的css以下

二、运行模式下使用Less

若是是运行环境，最好是将less.less编译成.css文件，而后直接引用生成的.css文件便可，博主不熟悉Node的环境，这里，博主介绍一款less生成css的工具：Koala。首先去官网下载安装文件，安装运行以后获得以下界面：

而后将less所在的目录拖到界面中间

点击Compile按钮。将会在less.less的同级目录下生成一个less.css文件

而后直接引用这个css文件便可。有了工具是否是很easy~~

3、常见用法示例

初初入门，咱们仍是从最基础的开始吧！

一、从第一个Less变量开始

@base: #f938ab;

div{
    background-color:@base;
    padding:50px;
}

页面html代码：

<body>
    <div>
        第一个Less样式
    </div>
</body>

编译以后的Css样式以下：

效果预览：

以上是一个最基础的Less变量，在.less文件里面定义一个全局的@base变量，那么在该文件里面全部地方都可调用。

须要说明的是（1）Less里面的变量都是以@做为变量的起始标识，变量名由字母、数字、_和-组成；（2）在一个文件里面定义的同名变量存在全局变量和局部变量的区别（后面介绍）；

二、变量计算

@nice-blue: #f938ab;
@light-blue: @nice-blue + #333;

div {
  background-color: @light-blue;
}

编译获得结果：

div {
  background-color: #ff6bde;
}

这说明，在Less里面，变量能够动态计算。

三、变量混合

混合能够将一个定义好的class A轻松的引入到另外一个class B中，从而简单实现class B继承class A中的全部属性。咱们还能够带参数地调用，就像使用函数同样。咱们来看下面的例子：

.rounded-corners (@radius: 15px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#div1 {
    padding:20px;
    width:200px;
    height:100px;
    border:2px solid red;
  .rounded-corners;
}
#div2 {
    padding:20px;
    width:200px;
    height:100px;
    border:2px solid green;
  .rounded-corners(30px);
}

编译后的结果你是否猜到了呢：

#div1 {
  padding: 20px;
  width: 200px;
  height: 100px;
  border: 2px solid red;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
}
#div2 {
  padding: 20px;
  width: 200px;
  height: 100px;
  border: 2px solid green;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
}

原理解析：最上面的 @radius 变量能够理解为一个方法的参数，而后“15px”能够理解为参数的默认值。首先咱们定义一个动态样式 .rounded-corners ，这个样式有一个动态的参数 @radius ，这个参数的默认值是“15px”。咱们调用的时候若是不传参数，那么 @radius 就等于15px，若是咱们传了30px，那么@radius就是咱们传的参数值。若是这样理解是否会好一点呢，是否是有点相似咱们编程里面的“方法”的概念。若是按照面向对象的原理也很好理解，#div1和#div2继承.rounded-corners这个样式，因此能够直接使用，而后若是“子类”(#div2)有不一样于“父类”的属性，能够“重写”，是否是同样同样的。

既然作了测试，咱们仍是来看看测试结果：

    <div id="div1">div1</div>
    <div id="div2">div2</div>

四、嵌套规则

在CSS里面，咱们也常常能够见到标签样式嵌套的写法，那么在Less里面它是怎么实现的呢？咱们来下下面的Less代码

#div1 {
    h1 {
        font-size: 26px;
        font-weight: bold;
    }
    span {
        font-size: 12px;
        a {
            text-decoration: none;
            &:hover {
                border-width: 1px;
            }
        }
    }
}

编译后的CSS：

#div1 h1 {
  font-size: 26px;
  font-weight: bold;
}
#div1 span {
  font-size: 12px;
}
#div1 span a {
  text-decoration: none;
}
#div1 span a:hover {
  border-width: 1px;
}

Less的这种写法好处是显而易见，标签层级结构清晰可见，而且能减小css代码量。但博主猜测确定有人会不习惯这种写法，就是由于这种结构层级深，因此在阅读上面仍是会有人不习惯，无论怎么样，且用且珍惜吧。

五、函数的使用

在Less里面函数的概念仍是比较容易理解的。好比咱们有这么一段定义：

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

而后有这么一句调用

@switch: light;

.class {
  .mixin(@switch, #888);
}

编译获得

.class {
  color: #a2a2a2;
  display: block;
}

以上不难理解，就是一个简单的逻辑判断。

六、条件判断

在上述“函数的使用”里面，咱们看到Less支持“等于”的匹配方式，除此以外，Less里面还支持大于、小于等条件判断的语法，此之所谓“导引混合”。先来看看它的语法：

首先定义几个条件判断的“方法”

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

而后调用该“方法”

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

你猜结果是什么？编译结果以下：

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

原理解析：不知道你有没有猜对结果，反正最开始博主是猜错了的。when的语法不难理解，就是一个条件判断，关键是下面的color从哪里来的。原来在Less里面是一种混合调用的方式，也就是说，若是定义了三个函数mixin，分别对应有三个不一样的条件，那么咱们调用mixin函数的时候若是三个的条件都知足，那么它三个的结果都会获得。这就是为何咱们class1和class2获得如上结果。在Less里面全部的运算符有： >、 >=、 =、 =<、 <，除了这5个运算符，Less还提供了基于值类型进行判断的方法：iscolor()、isnumber()、isstring()、iskeyword()、isurl()等。用法以下：

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

除了上述条件表达式之外，Less还提供了and、not等逻辑表达式。基础用法如：

.mixin (@b) when not (@b > 0) {
       background-color:blue;
 }

七、变量做用域

Less的做用域很好理解，就是咱们常说的全局变量和局部变量的区别，记住Less里面变量名能够重复。

@aaa: red;

#div1 {
  @aaa: green;
  #header {
    color: @aaa; 
  }
}

#div2 {
  color: @aaa;   
}

相信你已经猜到结果了吧。编译以后

#div1 #header {
  color: green;
}
#div2 {
  color: red;
}

八、不得不说的import指令

less里面使用import将外部的less引入到本地less文件里面来。好比A.less里面定义了一个变量@aaa:red，而B.less文件里面也须要使用@aaa这个变量，这个时候怎么办呢？import派上用场了。

A.less内容以下：

@aaa:red;

B.less内容以下：

@import 'A.less';

div{
    color:@aaa;
}

而后再html页面引入B.less文件，编译最终能够获得以下结果

div{
    color:@aaa;
}

有人可能要说，不就是引用其余less文件里面的变量吗，没啥用。但是你想过没有，因为项目里面模块不少，每一个模块都有本身的less文件，若是没有import，怎么去统一调度呢。这点从bootstrap就能够看出来，当咱们下载bootstrap3的源码，你会发现有不少的less文件，放在less文件夹里面，这些less文件分别对应着各个模块的样式。形如

各个模块的样式写完后，会有一个bootstrap.less文件，将其余全部的less文件都import进来，其内容以下：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";

// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";

而后咱们编译bootstrap.less，就能将全部模块的less文件引入进来。

为了证实这点，咱们来测试一把，在A.less里面加入以下内容：

@aaa:red;
@widthtest:200px;

.class2{
    background-color:green;
    border:5px solid red;
}

B.less内容以下：

@import 'A.less';

div{
    color:@aaa;
    width:@widthtest;
    height:50px;
}

而后编译B.less获得的B.css文件内容以下：

.class2 {
  background-color: green;
  border: 5px solid red;
}
div {
  color: #ff0000;
  width: 200px;
  height: 50px;
}

另外，import指令还包含了多种参数类型：

1. @import (reference) "文件路径"; 　将引入的文件做为样式库使用，所以文件中样式不会被直接编译为css样式规则。当前样式文件经过extend和mixins的方式引用样式库的内容。

2. @import (inline) "文件路径"; 　　用于引入与less不兼容的css文件，经过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。

3. @import (less) "文件路径"; 　　默认使用该配置项，表示引入的文件为less文件。

4. @import (css) "文件路径"; 　　表示当前操做为CSS中的@import操做。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件

5. @import (once) "文件路径"; 　　默认使用该配置项，表示对同一个资源仅引入一次。

6. @import (multiple) "文件路径"; 　　表示对同一资源可引入屡次。

九、综合实例

对于上文提到的屏幕变化的时候动态去设置样式的问题，使用less结合css3的@media就能轻松处理，好比有下面一段less代码：

@base: #f938ab;

div{
    background-color:@base;
    padding:50px;
}

.divcolor {
  @media (max-width: 400px) {
    background-color: green;
  }
  @media (min-width: 400px) and (max-width: 800px) {
    background-color: red;
  }
  @media (min-width: 800px) {
    background-color: #f938ab;
  }
}

界面html以下：

<body>
    <div id="div1" class="divcolor">div1</div>
    <div id="div2">div2</div>
</body>

使用这种嵌套的写法就能实现多个条件的预设样式，因此最终编译获得的css以下：

/* line 4, http://localhost:34512/Content/less.less */
div {
  background-color: #f938ab;
  padding: 50px;
}
@media (max-width: 400px) {
  .divcolor {
    background-color: green;
  }
}
@media (min-width: 400px) and (max-width: 800px) {
  .divcolor {
    background-color: red;
  }
}
@media (min-width: 800px) {
  .divcolor {
    background-color: #f938ab;
  }
}

表示当前文档的宽度小于400的时候，背景色为green；大于400小于800时背景色为red；大约800时背景色为#f938ab。来看看是否是这样：

这里只是一个简单的测试，实际应用中确定不可能只是设置一个简单的背景色。对于响应式布局的状况，这种写法很是多。

对于条件判断，less支持嵌套的写法，好比：

@base: #f938ab;

div{
    background-color:@base;
    padding:50px;
}

.class1{
    width:550px;
    margin:10px;
}

.class2{
    width:150px;
    margin:auto;
    display:block;
}

.divcolor {
  @media (max-width: 800px) {
     background-color: green;
     .class1;
     @media (min-width: 400px){
        background-color: red;
        .class2
     }
  }
}

编译获得的css以下：

div {
  background-color: #f938ab;
  padding: 50px;
}

.class1 {
  width: 550px;
  margin: 10px;
}
.class2 {
  width: 150px;
  margin: auto;
  display: block;
}
@media (max-width: 800px) {
  .divcolor {
    background-color: green;
    width: 550px;
    margin: 10px;
  }
}
@media (max-width: 800px) and (min-width: 400px) {
  .divcolor {
    background-color: red;
    width: 150px;
    margin: auto;
    display: block;
  }
}

4、总结

一些基础的用法暂时先介绍这么多，更多高级用法还有待研究再发出。因为博主接触less语法的时间并不长，若是有理解有误之处，还望园友们指出。

若是你以为本文可以帮助你，能够右边随意打赏博主，也能够推荐进行精神鼓励。你的支持是博主继续坚持的不懈动力。

本文原创出处：http://www.cnblogs.com/landeanfen/

欢迎各位转载，可是未经做者本人赞成，转载文章以后必须在文章页面明显位置给出做者和原文链接，不然保留追究法律责任的权利