zoukankan      html  css  js  c++  java
  • less的使用

    一、安装less到全局使用

    用NPM工具包安装

    npm install less -g

     二、新建package.json空文件,内附一对空的大括号,然后安装到项目开发

    npm i less --save-dev

    该命令会安装最新的lessc官方版本到你的项目文件夹,同时会把它添加到你项目package.json文件的devDependencies

    三、写 css 有多种方式,最简单的做法是打开记事本,一行一行的直接手写。嗯,我就这么写了好多年。当然编辑器不一定用记事本,可以用 notpad++ 或 vim、或 dreamweaver、或其他……

    什么是 less ?

    如果你写的 css 足够多,就会发现有些地方是重复的。比如你希望页面头部宽度 width 是960px,中间也是 960px,页脚也是 960px,你知道它们是一样的,但不得不重复……如果你是程序员,肯定希望在 css 的语法中,要是有一个变量该多好!比如,我定义一个宽度的变量 @960px,然后在所有需要设置页面宽度的地方,都填上 @width,既省了时间,也避免了错误,还方便以后一次修改,全部生效。

    less 就是这样一个 css 的增强语法系统。其实所有语法加起来,应该挺简单的,前提是你熟悉 css。如果你对 css 很陌生,那还是先熟悉 css 再说。

    less 的官方网址是:http://lesscss.org,还有一个翻译成中文的网站:http://www.lesscss.net, 内容基本一样(我们这里不感谢党,也不感谢领导,而是感谢做这个网站的朋友)。这个网站就一个页面,一个很长很长的页面,你从头往下看,看完了,也就学完了。

    当你用 less 这种增强型的语法写完 css 之后,需要将一堆变量转成实际的 css 代码,因为浏览器并不支持 less(要是浏览器能够默认支持该多好!)。这种将 less 代码转成 css 的过程,我们叫做“编译”。编译工具很多,下面我们谈在 windows 下最简单的做法(我尝试了很多种工具,下面这种是最简单的)。

    使用 WinLess 编译

    1、到 http://winless.org 下载工具 WinLess,然后点击安装。

    2、建立一个文件夹,比如 MyLessTest,并在其中建立子文件夹 less 和 css

        MyLessTest
            --less
            --css

    3、打开 WinLess,如下图,点击 Add folder 按钮,将刚才建立的 MyLessTest 添加进去(注意:不是添加 less 文件夹,而是它的上层目录 MyLessTest,方便将结果输出到 less 的同级目录 css)

    4、WinLess 右侧会出现所有的 less 文件(如果没有出现,请点击“Refresh”按钮进行刷新),以及输出的路径(output file)。

    5、选中需要编译的文件,比如 “bootstrap.less”(注意:请不要全选,在这里,其他一些文件只是被 bootstrap.less 引用而已),点击 “Compile” 按钮开始编译。然后,请打开 less 的同级目录 css 查看结果。

    到此为止,编译过程全部完成。

    在线编译

    因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到。比如 http://tool.oschina.net/less  一般都有两个框,左侧输入less,右侧呈现编译的 css,方便在线学习和测试。

  • 相关阅读:
    模拟队列
    代理模式及java简易实现
    归并排序模板(Java)
    快排Java模板
    durid配置jdbc报错 com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Could not create connection to database server
    File类
    数据库范式、多表查询,事务
    valuestack(值栈) 和 actioncontext(上下文)
    Action
    Cookie 和Session
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7803186.html
Copyright © 2011-2022 走看看