webstorm入门5-sass、scss、less监听编译
2017-06-17 17:34
537 查看
TOC
sass、scssless
更多
在使用 webstorm 编辑器时,你不必写 gulp、grunt 配置文件来监听 css 预处理文件来实时编译,也不必安装其他 watch 插件,webstorm 自带就有了。
打开配置(Tools - File Watchers)就可以见到了,点击“+”号就可以新建监听配置了。
同时,在新建一个 sass、scss、less 文件之后,webstorm 会智能的提示你新建一个 watcher 任务:
sass、scss
编译 sass、scss 文件,你需要先安装 node-sass 模块。
npm install -g node-sass
安装好之后,就可以参考官方文档配置来写配置信息
-w, --watch Watch a directory or file -r, --recursive Recursively watch directories or files -o, --output Output directory -x, --omit-source-map-url Omit source map URL comment from output -i, --indented-syntax Treat data from stdin as sass code (versus scss) -q, --quiet Suppress log output except on error -v, --version Prints version info --output-style CSS output style (nested | expanded | compact | compressed) --indent-type Indent type for output CSS (space | tab) --indent-width Indent width; number of spaces or tabs (maximum value: 10) --linefeed Linefeed style (cr | crlf | lf | lfcr) --source-comments Include debug info in output --source-map Emit source map --source-map-contents Embed include contents in map --source-map-embed Embed sourceMappingUrl as data URI --source-map-root Base path, will be emitted in source-map as is --include-path Path to look for imported files --precision The amount of precision allowed in decimal numbers --importer Path to .js file containing custom importer --functions Path to .js file containing custom functions --help Print usage info
因为 webstorm 自带了 watch,因此不必配置 -w。最简单的配置是这样的:
node-sass source target
编译后的文件结构是这样的:
每个源文件都会对应一个 css 文件,非常便于管理,而且可以折叠起来,这是其他外置工具无法做到的。
less
less 编译方式大同小异。编译 sass、scss 文件,你需要先安装 less 模块。
-h, --help Prints help (this message) and exit. --include-path=PATHS Sets include paths. Separated by `:'. Use `;' on Windows. -M, --depends Outputs a makefile import dependency list to stdout. --no-color Disables colorized output. --no-ie-compat Disables IE compatibility checks. --no-js Disables 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. -x, --compress Compresses output by removing some whitespaces. --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 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, --relative-urls Re-writes relative urls to the base less file. -sm=on|off Turns 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 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"
使用方法也很简单:
less source
更多
在重命名 sass、scss、less 文件时,webstorm 也会这样提示你:相关文章推荐
- 支持新版chrome,用webstorm编译形成css和sourcemap,调试sass和less源文件(转)
- Webstorm实时编译SASS和LESS
- Sass/SCSS(关系,安装,webstorm配置编译,使用,语法)
- koala 编译scss不支持中文 ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法
- LESS/Sass/CoffeeScript图形编译工具推荐 - Koala
- webstorm下搭建编译less环境
- [tool]webstorm 用firewatcher编译less
- 【更新】sass安装(淘宝源安装失败直接下载按照gif动画安装)+webstorm中为scss添加watcher转化为css
- sass、less和stylus的安装使用和入门实践
- 把Fireshell中的sass模块替换为less编译css
- 用webstorm自动编译less产出css和sourcemap
- CSS, Sass, SCSS, Compass, Less,BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?
- webstorm上安装自动编译less文件的插件的步骤
- CSS, Sass, SCSS, Compass, Less,BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?
- webstorm scss编译css配置
- WebStorm 9 自动编译 LESS 产出 CSS 和 source maps
- LESS/Sass/CoffeeScript图形编译工具推荐
- less-webstorm 编译配置
- CSS, Sass, SCSS, Compass, Less,BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?