您的位置：首页 > Web前端 > CSS

mac版本webstorm配置compass的两种方法

2017-05-31 18:17 246 查看
最近使用compass，发现网上大部分教程都太老了或者不太清楚，决定自己总结一篇webstorm配置compass

方法一 使用命令行

1、创建compass
compass create
compass create (+项目名称）
【这里多说一句，就是如果是为以有的项目创建compass，就在该项目下使用：compass init 】

eg:
wangjuedeMacBook-Pro:compasstest wangjue$compass createlearn-compass-init
directory learn-compass-init/
directory learn-compass-init/sass/
directory learn-compass-init/stylesheets/
create learn-compass-init/config.rb
create learn-compass-init/sass/screen.scss
create learn-compass-init/sass/print.scss
create learn-compass-init/sass/ie.scss
write learn-compass-init/stylesheets/ie.css
write learn-compass-init/stylesheets/print.css
write learn-compass-init/stylesheets/screen.css

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be
compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
1. To compile on demand:
compass compile [path/to/project]
2. To monitor your project for changes and automatically recompile:
compass watch [path/to/project]

More Resources:
* Website: http://compass-style.org/ * Sass: http://sass-lang.com * Community: http://groups.google.com/group/compass-users/ 
To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>


2、在webstorm中打开该项目，会发现以下结构
webpro
  --- sass-chche  //放缓存文件的不用管它
  --- sass            // 所有的scss文件放在此目录下，由config.rb配置
  ---stylesheets  //所有编译成css文件放在此目录下，由由config.rb配置
  ---confif.rb       //配置文件

配置文件网上随便说搜搜就有很多详解，这里我就不说了

3、一次性编译
compass compile
在sass目录下创建scss文件后，在根目录（项目目录下）使用compass compile就可以将sass文件夹下新创建的scss文件编译成css文件，编译的css文件会放在stylesheets下
这里主要说一个问题，就是你直接使用compass compile XXX.scss 会报错，因为目录不对的原因
Individual stylesheets must be in the sass directory.


因此一定要在compass compile + 编译的文件存放的目录地址，即 compass compile sass/xxx.scss，这样子就可以将编译后的css文件主动放在stylesheets下

4、实时编译
compass watch
这种方法是我比较推荐的，在根目录下使用compass watch 就可以实时将sass下的scss文件编译成scc文件，自动放在stylesheets下

eg
wangjuedeMacBook-Pro:learn-compass-init wangjue$ compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
write stylesheets/tst.css


方法二 使用webstrom集成

创建了compass项目后（即在项目中已经有config.rb文件后），项目路径，文件名都不能有任何中文，有中文就会出错
1、首先在webstrom--preferences--语言和框架--stylesheets--compass配置


2、配置file-watch
配置好步骤1后，此时webstorm就会出现



当然，你可以自己在webstorm-preferences--工具集--filewatch--compass scss里面添加





在filewatch里面只需要配置四个内容
1、 program：里面配置compass路径
2、arguments：项目绝对路径 +$UnixSeparators($FilePath$)$
eg：
compile /Users/wangjue/Documents/compasstest/learn-compass-init $UnixSeparators($FilePath$)$


3、output paths...：项目绝对路径
4、work directory：项目绝对路径

配置好后，就可以实时编译sass文件夹下的scss文件到stylesheets中

以上就是在webstorm中两种配置compass的方法
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css website webstrom
相关文章推荐
新的分享
章节导航