LESS CSS使用方法 , CSS也能跟JS同样玩

时间 2019-11-29

标签 css 使用方法同样栏目 CSS 繁體版

原文原文链接

本文转自 http://blog.csdn.net/xuyonghong1122/article/details/51986472css

在使用CSS的时候,总会有这个想法

这个属性值总是重复写好烦

这个属性值我在前面那个CSS文件中写过,好想直接拿过来用

CSS能不能像其余程序性语言同样用一个变量来代替须要重复利用的内容呢

鉴于以上的想法并不是我一人会想到,只要是作过前端的确定都会思考过这个问题,无奈CSS基本能够说没有语法可依循,因而有了LESS框架html

什么是CSS?

做为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 须要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤为对于非前端开发工程师来说，每每会由于缺乏 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，形成这些困难的很大缘由源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（做用域）等概念前端

什么是LESS ?

它在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，而且下降了 CSS 的维护成本，就像它的名称所说的那样，LESS 可让咱们用更少的代码作更多的事情。node

LESS的原理

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义本身的样式规则，这些规则最终会经过解析器，编译生成对应的 CSS 文件。LESS 并无裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。android

环境配置

以webStorm为例,在开始使用LESS以前你必需要安装如下环境
node.js
node.js命令行输入“npm install -g less”安装less；
打开webstorm，File→Settings→Tools→File Watchers,点击右侧绿色“+”号
固然还有一种办法使用LESS就是直接使用HBuilder编辑器,自带LESS插件web

开始使用

本例以HBuilder编写,在咱们写LESS文件的时候会自动帮咱们生成CSS文件npm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <link href="css/index.css" rel="stylesheet" />
    <body>
        <div class="index-home">
            <span>This is index</span>
        </div>
    </body>
</html>

咱们的CSS文件会自动生成,不用作任何修改,咱们只须要修改咱们的LESS文件便可框架

上LESS!!!!

@index-color:red;
.index-home{
    box-sizing: content-box;
    background-color: @index-color;  
}

　　写完以后咱们去看一下index.css生成的代码 less

是的背景色变成了红色,咱们看一下运行效果
webstorm

是的,就是这么好使,若是你觉得本文结束了,那就错了,这只能知足当前页面引用当前LESS文件中的变量,如何引用其余变量呢?
LESS文件中是能够引用其余LESS文件的,玩过Java的都知道,引用一个类会用到什么关键字,没错,import,你们准备上车!!!!

如今我想在index.less文件中去引用一个基类LESS文件,该如何书写呢
首先写base-less.less
```
 @base-font-color:white; 
```
　　

在base-less文件中写一个base-font-color:white来控制文本颜色为白色
在index.less中引用,以下

很简单明了,引用结束咱们看一下效果是怎么样的

看到这里,有人会问,能不能直接引用LESS文件啊?固然能够啊

咱们能够直接在客户端使用 .less（LESS 源文件），只须要从 http://lesscss.org下载 less.js 文件，而后在咱们须要引入 LESS 源文件的 HTML 中加入以下代码：

LESS 源文件的引入方式与标准 CSS 文件引入方式同样：
```
<link rel="stylesheet/less" type="text/css" href="index.less">

<link rel="stylesheet/less" type="text/css" href="index.less">
```
　　其实LESS是有本身的生命周期的,哦,很差意思,是做用域…
简单的讲就是局部变量仍是全局变量的概念，查找变量的顺序是先在局部定义中找，若是找不到，则查找上级定义，直至全局。
简单明了,代码示例:

 @width : 20px; 
 .index{ 
   @width : 30px; 
   .centerDiv{ 
       width : @width;// 此处应该取最近定义的变量 width 的值 30px 
              } 
 } 
 .leftDiv { 
     width : @width; // 此处应该取最上面定义的变量 width 的值 20px 
 }

终于到最后了,最后也是LESS最厉害的做用之一了,你能够把LESS当成JS来玩

```
@import "base-less.less";
@index-color: red;
.index-home {
    box-sizing: content-box;
    background-color: @index-color;
    color: @base-font-color;
    .marginTop(100px); 
}
.marginTop(@distance) {
    margin-top: @distance; 
}
```
　　

能够直接调用”函数”来完成一些属性的赋值,看下效果如何

看到这里,基本介绍就结束了,LESS确实很方便,另外若是你是一名Android开发者,这我的你必定的关注一下,他的博客都是干货———-他就是NoHttp的做者:严振杰博客地址