Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

Less的编译处理

作为一门CSS预处理语言,它并不像CSS一样能直接使用,而是需要编译后使用,如何编译呢,下面分node 和浏览器端两种情况解释。

浏览器端:

浏览器端使用less,只需要做如下两步:

1.引如Less

使用link标签引入less,需要注意的是 rel="stylesheet/less"

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

2.引入less解析用的js文件

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

3.声明解析,要在引入 less.js前进行声明。

<script>

   less = {

    env: "development",

    async: false,

    fileAsync: false,

    poll: 1000, functions: {},

    dumpLineNumbers: "comments",

    relativeUrls: false, rootpath: ":/a.com/"

  };

</script>

完事,就这么简单,但是 由于编译解析less需要消耗一定的性能,且渲染也会有延迟,所有推荐使用node或其他第三方工具进行编译后使用。

需要注意的是 js文件必须要在less文件后引入。

less.js 下载地址在这里

node端

1. 使用npm安装less

$ npm install -g less

2.编译输出

使用命令行调用less编译器进行编译

$ lessc styles.less

这会输出到stdout编写CSS。将CSS结果保存到所选择使用的文件中

$ lessc styles.less styles.css

输出后你可以使用编译的style.css 啦。

less的使用方法

1.注释

   less 的注释分为两种:  /*  注释内容 */  和  //  注释内容   。

/* */  为块注释  可以注释一行或多行,

//    为行注释,只能注释一行,而且这种注释在编译处理时会被编译掉。

2.变量

  less中很方便的一个功能就是定义变量,当css多处用到同一个值的时候,如果不用变量,那么改动它需要改动100处,而使用变量的话,只需要修改变量的值便可以全局修改了,是不是很方便呢。

和PHP类似 变量都是以@开头,无论是定义还是使用,使用如下  :

// 定义变量
@cell_width:100px; //在使用的时候就可以这样使用 .cell{
  width:@cell_width;
}

3.混合

和css差别并不大,同样使用 选择器 后 带大括号 的形式,牛逼的是大括号里还可以写  选择器 +大括号 的形式,

在不考虑渲染优化的情况下可以无限套下去,但是考虑到浏览器渲染任务繁重,往往最多只套4层。

.body{
  width:100%;
.section{
    border:1px solid #000;
  }
}

/*
解析后的效果是下面这样的
*/
.body{
  width:100%;
}
.body .section{
    border:1px solid #000;
  }

除了套用,还可以引用:


.section{
    border:1px solid #000;
  }
.body{
  width:100%;
.section;
} /* 解析后的效果是下面这样的 */ 

.body{
  width:100%;
  border:1px solid #000;
} 

除了以上的,还能使用传参,哈哈哈

.border_radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.cell{
width: 100%;
//可以不传参数,默认用5px
.border_radius(10px)
}

可以说是非常灵活了,随便套随便引。

了解了以上的这些,就可以在实战中使用Less进行项目开发啦!

(完)

CSS预处理语言-less 的使用的更多相关文章

  1. css预处理语言--让你的css编写更加简单方便

    CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...

  2. CSS预处理语言

    CSS预处理语言 Less,Sass,Stylus 安装 Less yarn add less 运行命令 ./node_modules/.bin/lessc 嵌套规则 Less.Sass嵌套规则一样 ...

  3. Less:Less(CSS预处理语言)

    ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...

  4. CSS 预处理语言之 less 篇

    less 前言 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 安装 客户端使用 // 引入 ...

  5. css预处理语言的模块化实践

    编写css是前端工作中,一项普通而又频繁的劳动,由于css并不是一门语言,所以在程序设计上显得有些简陋.对于小型项目来说,css的量还不至于庞大,问题没有凸显,而如果要开发和持续维护一个较为大型的项目 ...

  6. LESS,强大的CSS预处理语言

    虽然写的css不多,但是我已经切身感觉到了书写css的恶心...抛开最令人烦的浏览器兼容问题不说,这个语言本身就有不少问题. 最简单的,比如多个地方是同一个颜色的,如果可以写在一个样式里还没什么,但是 ...

  7. CSS预处理语言——less与sass的使用

    我们一般所使用的Less跟Sass一般是将其编译成我们所熟悉的CSS再导入使用,当然不经编译,直接在浏览器使用 我是习惯用Koala来进行编译,简单智能方便,Hbuilder也自带编译功能,不过要手动 ...

  8. CSS 预处理语言之 Scss 篇

    简介 1. Sass 和 Scss Sass 和 Scss 其实是同一种东西,我们平时都称之为 Sass:Scss 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强 ...

  9. css预处理scss环境配置

    css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...

随机推荐

  1. pandaboard es 制作SD启动卡OMAP4460

    1. 本次使用的是chipsee的板子,带屏幕的,先把资料传到Ubuntu的共享目录下 2. 进入共享目录 /mnt/hgfs/ubuntu_share/pandboard_es_linux# 3. ...

  2. 我们一起学习WCF 第一篇初识WCF(附源码供对照学习)

    前言:去年由于工作需要我学习了wcf的相关知识,初期对wcf的作用以及为何用怎么样都是一知半解,也许现在也不是非常的清晰.但是通过项目对wcf的运用在脑海里面也算有了初步的模型.今天我就把我从开始wc ...

  3. dotweb now released to Version 1.5

    dotweb released to Version 1.5!!https://github.com/devfeel/dotweb What's new? 重要:go版本适配升级为1.9+ New f ...

  4. Ubuntu系统python3版本设置问题

    参照:https://blog.csdn.net/wangguchao/article/details/82151372

  5. POJ-3122(二分算法)

    //题意:这是一个分蛋糕的游戏, t个测试数据,输入n, f n代表的是n块蛋糕,蛋糕的高为1, f代表的是f个人朋友,然后输入每份蛋糕的半径 // 将n块蛋糕分成 f+1 份 每一份都是完成的一块蛋 ...

  6. NO--09今天遇到的一点小问题之axios全局注册

    今天用 Vue 写项目的时候,用到 axios ,因为 axios 不能用 Vue.use() ,所以在每个 .vue 文件中使用 axios 时就需要 import , .vue 文件少的话还好说, ...

  7. 局域网安全-MAC Flood/Spoof

    原文发表于:2010-09-22 转载至cu于:2012-07-21 很早之前就看过秦柯讲的局域网安全的视频.但是看了之后在实际工作当中很少用到(指我个人的工作环境中,惭愧啊…),时间长了,好多技术细 ...

  8. spark的运行方式——转载

    本文转载自:      spark的运行方式 本文主要讲述运行spark程序的几种方式,包括:本地测试.提交到集群运行.交互式运行 等. 在以下几种执行spark程序的方式中,都请注意master的设 ...

  9. 常用的不易记忆的css自定义代码

    在制作页面时,经常会遇到需要自定义一些标签的默认行为(如:input的占位符等),但这些默认的设置的css一般比较难记住,所以有必要自己做一下记录.下面是我经常用到的一些重设默认行为的css. 1.占 ...

  10. Is It A Tree?(并查集)

    Description A tree is a well-known data structure that is either empty (null, void, nothing) or is a ...