menu
書いてる野郎
orebike@gmail.com
つまりサーバサイドでコンパイルする
Node.js はなんらかの方法でインストールされてる前提
$ npm install --save-dev less
確認
$ npx lessc --version lessc 3.8.1 (Less Compiler) [JavaScript]
CSS の圧縮ツールも入れる
$ npm install less-plugin-clean-css
less のコンパイラに自動ベンダープレフィックス付与機能は無いので実用的にはこれもいれておく
$ npm install less-plugin-autoprefix
$ npx lessc hogehoge.less hogehoge.css
圧縮込み
$ npx lessc --clean-css="-s1" hogehoge.less hogehoge.css
ベンダープレフィックス付与込み
$ npx lessc --clean-css="-s1" --autoprefix="defaults" hogehoge.less hogehoge.css
この defaults というのはその時の状況に合わせてうまくやってくれるというやつ。
hoge/piyo/less ディレクトリ以下の less ファイルを、その配下のディレクトリ構造を保ったままで
aaa/bbb/ccc/ddd/css ディレクトリ以下にコンパイルして出力する
for lessfile in $(find ./hoge/piyo/less -name "*.less"); do cssfile=$(echo $lessfile | sed 's/hoge\/piyo\/less\/\(.*\)\.less$/aaa\/bbb\/ccc\/ddd\/css\/\1.css/i') echo "$lessfile to $cssfile"; rm -f $cssfile; npx lessc $lessfile $cssfile; done;
options:
-h, --help Prints help (this message) and exit.
--include-path=PATHS Sets include paths. Separated by `:'. `;' also supported on windows.
-M, --depends Outputs a makefile import dependency list to stdout.
--no-color Disables colorized output.
--ie-compat Enables IE8 compatibility checks.
--js Enables inline JavaScript in less files
-l, --lint Syntax check only (lint).
-s, --silent Suppresses output of error messages.
--strict-imports Forces evaluation of imports.
--insecure Allows imports from insecure https hosts.
-v, --version Prints version number and exit.
--verbose Be verbose.
--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-include-source Puts the less files into the map instead of referencing them.
--source-map-inline Puts the map (and any less files) as a base64 data uri into the output css file.
--source-map-url=URL Sets a custom URL to map file, for sourceMappingURL comment
in generated CSS file.
-rp, --rootpath=URL Sets rootpath for url rewriting in relative imports and urls
Works with or without the relative-urls option.
-ru=, --rewrite-urls= Rewrites URLs to make them relative to the base less file.
all|local|off 'all' rewrites all URLs, 'local' just those starting with a '.'
-m=, --math=
always Less will eagerly perform math operations always.
parens-division Math performed except for division (/) operator
parens | strict Math only performed inside parentheses
strict-legacy Parens required in very strict terms (legacy --strict-math)
-su=on|off Allows 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.
--url-args='QUERYSTRING' Adds params into url tokens (e.g. 42, cb=42 or 'a=1&b=2')
--plugin=PLUGIN=OPTIONS Loads a plugin. You can also omit the --plugin= if the plugin begins
less-plugin. E.g. the clean css plugin is called less-plugin-clean-css
once installed (npm install less-plugin-clean-css), use either with
--plugin=less-plugin-clean-css or just --clean-css
specify options afterwards e.g. --plugin=less-plugin-clean-css="advanced"
or --clean-css="advanced"
-------------------------- Deprecated ----------------
-sm=on|off Legacy parens-only math. Use --math
--strict-math=on|off
--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.
-x, --compress Compresses output by removing some whitespaces.
We recommend you use a dedicated minifer like less-plugin-clean-css