zoukankan      html  css  js  c++  java
  • less的安装使用和入门实践

    1、简介

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

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

    具体语言特性详见:http://www.bootcss.com/p/lesscss/

    2、LESS的安装

    less安装分为两种:客户端和服务器端

    a、客户端安装

    在官网下载一个JavaScript 脚本文件“less.js”,然后在需要引入LESS源文件的html的<head>中加入如下的代码

    <link rel="stylesheet/less" type="text/css" href="/styles.less">
    <script src="/less.js" type="text/javascript"></script>
    View Code

    这里要注意,在引入“.less”文件时,“link”的“rel”属性要设置为“stylesheet/less”。

    还要注意:less源文件一定要在“less.js”引入之前引入,这样才能保证LESS源文件正确编译解析。

    b、服务器端安装

    利用node的包管理器(npm)安装LESS

    1、首先到Node JS的官网下载一个适合Windows 系统的安装文件

    2、打开.msi文件,运行

    3、检查path环境变量是否配置了Node.js,点击开始=》运行=》输入cmd=》输入命令“path”,输出结果如下

    4、启动Node Js的command 控制面板直接输入命令:

    $ npm install less

    找到你要编译的less文件目录,编译less文件,输入如下命令:

    $ lessc color.less > color.css

    这时候就在文件夹下生成了 .css文件。

    c、除了上面的命令转译LESS源文件之外,还有一个第三方开发的工具,比较常用的是WinLess工具,简单易用

    下载地址:http://winless.org/

    点击Add folder,添加要编译的less文件目录,右侧加载less文件,如果没有加载好,点击右侧窗口的Refresh,刷新目录结构。

    选中要编译的less文件,compile 完成编译,如果less文件有错误,编译会失败报错,成功编译会在文件下生成相应的.css文件。

  • 相关阅读:
    云路五年 未来正来
    免费公测:RDS只读实例
    【Open Search产品评测】-- 淘点点:基于OpenSearch,轻松实现一整套O2O类搜索解决方案
    阿里云启动“云合计划” 培育中国“微软”级企业
    【Open Search产品评测】- 来往,7天轻松定制属于自己的搜索引擎
    水塘抽样算法
    如何调度考生的座位
    如何去除有序数组的重复元素
    二分查找高效判定子序列
    如何k个一组反转链表
  • 原文地址:https://www.cnblogs.com/olivianate/p/5354695.html
Copyright © 2011-2022 走看看