css – 使用源地图编译LESS文件

除了CSS文件之外,如何编译LESS文件输出源映射文件(.css.map)?有没有办法在命令行(NodeJS的lessc)和任何基于GUI的程序上这样做?

解决方法

更新:最短的答案

文档已更新!随着新功能的推出,LESS有时候文档落后,所以如果你正在寻找出色的功能,你仍然可以更好地运行lessc(请参阅更长的答案),并检查帮助文本中弹出的内容.

http://lesscss.org/usage/

简短答案

您正在从命令行中查找以下任意数量的选项:

--source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
--source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
--source-map-basepath=X  Sets sourcemap base path,defaults to current working directory.
--source-map-less-inline puts the less files into the map instead of referencing them
--source-map-map-inline  puts the map (and any less files) into the output css file
--source-map-url=URL     the complete url and filename put in the less file

当我写这个我不知道任何生成地图的GUI选项(源地图只在最近几个月添加到LESS) – 抱歉没有任何更好的消息.我相信他们会在明年更新时增加支持.

更长的答案

如果从命令行运行lessc没有任何参数,它将给你所有的选项. (根据我的经验,这比他们的文档更新,所以至少让你指向正确的方向.)包含所有最新的地图内容.

用于dev的最简单的组合是–source-map-less-inline –source-map-map-inline,因为这将为您的源地图嵌入到输出css中.

如果你想添加一个单独的地图文件,你可以使用–source-map,从my.less将输出my.css和my.css.map

作为参考:当我运行我的副本(v 1.6.1在这一刻)我得到

usage: lessc [option option=parameter ...] <source> [destination]

If source is set to `-' (dash or hyphen-minus),input is read from stdin.
options:
  -h,--help               Print help (this message) and exit.
  --include-path=PATHS     Set include paths. Separated by `:'. Use `;' on Windows.
  -M,--depends            Output a makefile import dependency list to stdout
  --no-color               disable colorized output.
  --no-ie-compat           disable IE compatibility checks.
  --no-js                  disable JavaScript in less files
  -l,--lint               Syntax check only (lint).
  -s,--silent             Suppress output of error messages.
  --strict-imports         Force evaluation of imports.
  --insecure               Allow imports from insecure https hosts.
  -v,--version            Print version number and exit.
  -x,--compress           Compress output by removing some whitespaces.
  --clean-css              Compress output using clean-css
  --clean-option=opt:val   Pass an option to clean css,using CLI arguments from
                           https://github.com/GoalSmashers/clean-css e.g.
                           --clean-option=--selectors-merge-mode:ie8
                           and to switch on advanced use --clean-option=--advanced
  --source-map[=FILENAME]  Outputs a v3 sourcemap to the filename (or output filename.map)
  --source-map-rootpath=X  adds this path onto the sourcemap filename and less file paths
  --source-map-basepath=X  Sets sourcemap base path,defaults to current working directory.
  --source-map-less-inline puts the less files into the map instead of referencing them
  --source-map-map-inline  puts the map (and any less files) into the output css file
  --source-map-url=URL     the complete url and filename put in the less file
  -rp,--rootpath=URL      Set rootpath for url rewriting in relative imports and urls.
                           Works with or without the relative-urls option.
  -ru,--relative-urls     re-write relative urls to the base less file.
  -sm=on|off               Turn on or off strict math,where in strict mode,math
  --strict-math=on|off     requires brackets. This option may default to on and then
                           be removed in the future.
  -su=on|off               Allow mixed units,e.g. 1px+1em or 1px*1px which have units
  --strict-units=on|off    that cannot be represented.
  --global-var='VAR=VALUE' Defines a variable that can be referenced by the file.
  --modify-var='VAR=VALUE' Modifies a variable already declared in the file.

-------------------------- Deprecated ----------------
  -O0,-O1,-O2            Set the parser's optimization level. The lower
                           the number,the less nodes it will create in the
                           tree. This Could matter for debugging,or if you
                           want to access the individual nodes in the tree.
  --line-numbers=TYPE      Outputs filename and line numbers.
                           TYPE can be either 'comments',which will output
                           the debug info within comments,'mediaquery'
                           that will output the information within a fake
                           media query which is compatible with the SASS
                           format,and 'all' which will do both.
  --verbose                Be verbose.

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效