{Less} is more, than Css

最新推荐文章于 2020-08-15 00:23:13 发布

好好生活_

最新推荐文章于 2020-08-15 00:23:13 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：【项目学习】 # Lenovo 文章标签： Less CSS 语言特性

本文链接：https://blog.csdn.net/hu_zhiting/article/details/51224939

【项目学习】同时被 2 个专栏收录

48 篇文章

订阅专栏

Lenovo

6 篇文章

订阅专栏

【项目概要】

来公司的第一周，除第一天安装环境，了解需求外，四天的时间都是在写一个静态页面。之前写静态页面，都是直接用的CSS去对样式进行设置，而在公司的这个项目中，用的是CSS预处理器的一种，Less. 本篇博客就来学习一下Less.

【Less学习】

一.什么是Less

LESS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

二.Less语言特性

1.变量：

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

Less源码：

@color: #4D926F;
                    #header {
                            color: @color;
                    }
h2 {
    color: @color;
}

编译后的CSS：

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

2.混合：

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

Less源码：

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
 
#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

编译后的CSS：

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

3.嵌套：

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

Less源码：

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

编译后的CSS：

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

4.函数和运算:

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

Less源码：

@the-border: 1px;
@base-color: #111;
@red:        #842210;
 
#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
}

编译后的CSS：

#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

【项目实战】

一.安装与监听：

1. Install less

   npm install -g less

2. Install less-watch-compiler

   npm install -g less-watch-compiler

3. Watch less's change and compile it to css

   less-watch-compiler

注：执行1,2命令，最好是在管理员的权限下。执行3命令，是在Less文件的目录下。

二.配置less文件与css文件间的关系

{
    "allowedExtensions":[".less"],
    "minified": false,
    "defaults": {
        "watchFolder": "style/less",
        "outputFolder": "style/css"
    }
}

三.在页面中添加CSS文件的引用

<link href="../style/css/navi.css" rel="stylesheet" type="text/css"/>

四.导航部分页面代码

<!-- 导航标题栏-胡志婷-2016年4月19日15:26:51 -->
  <div class="navi" >
 
    <img class="logo" src="../style/images/Lenovo-logo_03.png"/>
    <div class="title">Lenovo Maker</div>
 
    <img class="more" src="../style/images/icon汉堡包_06.png" onclick="divShow()" />
 
  </div>

五.所对应的Less源码

@font-color-white: FFFFFF;
@font-size-thirty: 30px;
@margin-left-body: 16px;
 
.navi {
    height: 88px;
    background-color: 303030;
        .logo{
            margin-top: 10px;
            margin-left: @margin-left-body;
        }
        .title {
            font-size: @font-size-thirty;
            color: @font-color-white;
            margin-left: 450px;
            width: 220px;
            height: 25px;
            margin-top: -55px;
        }
        .more{
            margin-right: @margin-left-body;
            float: right;
            position: relative;
            margin-top: -20px;
            margin-left: 750px;
        }
    }

六.编译后的CSS：

.navi {
  height: 88px;
  background-color: 303030;
}
.navi .logo {
  margin-top: 10px;
  margin-left: 16px;
}
.navi .title {
  font-size: 30px;
  color: FFFFFF;
  margin-left: 450px;
  width: 220px;
  height: 25px;
  margin-top: -55px;
}
.navi .more {
  margin-right: 16px;
  float: right;
  position: relative;
  margin-top: -20px;
  margin-left: 750px;
}