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