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文件。

  • 相关阅读:
    Win7下安装iMac系统
    Windows平台cocos2d-x 3.0 android开发环境
    iOS Dev (50)用代码实现图片加圆角
    内部消息 微软中国云计算 内測Azure免费账号 赶紧申请 错过不再有
    android锁屏软件制作
    CF1019E Raining season
    各数据库系统独有函数
    其他函数
    日期时间函数
    字符串函数
  • 原文地址:https://www.cnblogs.com/olivianate/p/5354695.html
Copyright © 2011-2022 走看看