webstorm 编译 scss 文件报错

打开webstorm创建空项目，点击“File”菜单选择“Setting”，搜索“watcher”关键字，

点击右边绿色加号，选择“SCSS”文件类型。

输入监视差哪文件类型名称(随便写)，关键第二个选项，一定要选择ruby安装目录bin文件下的scss.bat文件

最后，创配带建.scss文件输入scss css代码，保存后会虚卖码生成后缀.css文件，就可以了。

Sass的安装:

1.安装：SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

gem install sass

然后，就可以使用了。

2：使用：

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。SASS提供两种编译方式，一种是手动编译，一种是监视编译(–watch)，手动编译就是当你撰写好CSS时下指令去做编译，监视编译则芦乱是你指令一个目录，当此目录里面的*.scss档案有改变时（新增、覆写等等），就会自动去做编译的动作。先来讲手动编译方式：

下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名。

sass test.scss test.css

SASS提供四个编译风格的选项：

* nested：嵌套缩进的css代码，它是默认值。

* expanded：没有缩进的、扩展的css代码。

* compact：简洁格式的css代码。

* compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项。

sass –style compressed test.sass test.css

还有一种监视的方式做编译，在命令行中切换到当前sass或者scss文件所在的目录，然后运行

sass –watch scss:css

SASS的官方网站，提供了一个在线转换桥闷器。你可以在那里，试运行下面的各种例子。

Compass的安装:

1.安装：安装ruby之后，输入命令

gem install compass

2.使用：创建一个 COMPASS 项目

在命令行中切换到你需要创建项目的目录，运行：

compass create "projectname"

这个命令会创建一个包含一系列文件的目录，其中最重要的是配置文件 config.rb，其他文件如果你不需要都可以删除。

在 config.rb 中你可以修改 SASS 和 CSS 的目录及其它一些基础设置。

实时编译 SASS 文件

COMPASS 提供的默认方法是：

在命令行下切换到项目目录，运行

compass watch

COMPASS 将会实时监控 SASS 目录的文件变化，只要你一保存文件，立敏哗弯即将相应文件编译为 CSS 文件。

页面布局首先在'tab-message.html'中添加聊天消息的布局<ion-view> <ion-content on-swipe-left="onSwipeLeft()"><!--这里的rj-close-back-drop是自定义指令, 后面会讲是干嘛的--><ion-list rj-close-back-drop> <ion-item class="item-avatar" on-hold="popupMessageOpthins($index)" rj-hold-active ng-repeat="message in messages"><img ng-src="{{message.pic}}"><!--这个就是来了新消息, 头像上的小红数字--><span class="rj-sm-red-icon" ng-show="message.showHints"><p ng-bind="message.noReadMessages"></p></span><h2 ng-bind="message.name"></h2><p class="rj-list-p" ng-bind="message.lastMessage.content"></p><span class="rj-push-right" ng-bind="message.lastMessage.time"></span> </ion-item></ion-list> </ion-content></基族ion-view>大家在试这个的时候, 由于'messages'还未定义, 先不绑定, 用实际的值代替,像搏宏弊这样<img src="img/ben.png"><span class="rj-sm-red-icon"><p>1</p></span><h2>小王</h2><p class="rj-list-p">你在干什么?</p><span class="rj-push-right">12:30</span>这样就能看到效果了自定义样式可以看到上图有点丑, 需要我们自己修改样式, 可以自己添加css文件link进来, 但官方推荐使用sass的方式修改, 关于sass的语法, 可以看 这个 , 看完就差不多可以了.首先在项目目录下,运行命令$ionic setup sass$ionic serve运行以后, 就会对 scss/ionic.app.scss 文件监控, 有修改, 会自动编译该文件, 输出到 css/ionic.app.css所以你每次修改保存scss文件绝兄后, 浏览器会看到实时的效果, 非常方便.打开 scss/ionic.app.scss 文件, 如下/*To customize the look and feel of Ionic, you can override the variablesin ionic's _variables.scss file.For example, you might change some of the default colors:$light: #fff !default$stable: #f8f8f8 !default$positive:#387ef5 !default$calm:#11c1f3 !default$balanced:#33cd5f !default$energized: #ffc900 !default$assertive: #ef473a !default$royal: #886aea !default$dark:#444 !default*/// The path for our ionicons font files, relative to the built CSS in www/css$ionicons-font-path: "../lib/ionic/fonts" !default可以看到官方预定义的颜色几个颜色, 如果要修改预定义的颜色, 直接修改这里就可以了.我们自己的样式, 直接在后面添加. 我们在后面添加$item-avatar-border-radius: 0可以发现头像变成方的了, 那怎么知道修改这个变量呢?打开 www/lib/ionic/scss/ 目录, 可以看到很多scss文件├── _action-sheet.scss├── _animations.scss├── _backdrop.scss├── _badge.scss├── _bar.scss├── _button-bar.scss├── _button.scss├── _checkbox.scss├── _form.scss├── _grid.scss├── ionicons├── ionic.scss├── _items.scss├── _list.scss├── _loading.scss├── _menu.scss├── _mixins.scss├── _modal.scss...这些都是官方的样式文件, 找到 items.scss 文件, 这个就是ion-item相关的样式, 再搜 border-radius 很快就能找到啦具体的细节我就不说啦, 其它的修改都类似, 可以参考 我的代码popup的使用关于$ionicPopup的详细使用, 可以参考 官网首先在 controllers.js 文件中添加一个controller:.controller('messageCtrl', function($scope, $state, $ionicPopup, localStorageService, messageService) {$scope.popup = { isPopup: false, index: 0}$scope.onSwipeLeft = function() { $state.go("tab.friends")}$scope.popupMessageOpthins = function($index) { $scope.popup.index = $index //这里通过$ionicPopup.show()方法创建了一个自定义的popup $scope.popup.optionsPopup = $ionicPopup.show({templateUrl: "templates/popup.html",scope: $scope, }) $scope.popup.isPopup = true}//实现标为已读/未读, 注意$scope.popup.optionsPopup.close()方法//用来关闭d窗, 我竟然找了很久才发现这个接口$scope.markMessage = function() { var index = $scope.popup.index var message = $scope.messages[index] if (message.showHints) {message.showHints = falsemessage.noReadMessages = 0 }else{message.showHints = truemessage.noReadMessages = 1 } $scope.popup.optionsPopup.close() $scope.popup.isPopup = false messageService.updateMessage(message)}这里要注意两点要在routes.js中将该controll传进去需要通过自定义样式, 去掉自带的标题和按钮//routes.js.state('tab.message', {url: '/message',views: {'tab-message': {templateUrl: 'templates/tab-message.html',controller: "messageCtrl"}}})自定义指令细心的人会发现两个问题:d出popup时, 联系人列表没有动画效果d出popup后, 点击popup以外的地方, popup不能消失, 这两个问题, 就通过自定义指令来解决首先在 directives.js 文件中添加 rjCloseBackDrop 指令, 用来解决上面第二个问题.directive('rjCloseBackDrop', [function() { return {scope: false,//共享父scoperestrict: 'A',replace: false,link: function(scope, iElm, iAttrs, controller) { //要在html上添加点击事件, 试了很久- -! var htmlEl = angular.element(document.querySelector('html')) htmlEl.on("click", function(event) {if (event.target.nodeName === "HTML" && scope.popup.optionsPopup && scope.popup.isPopup) { scope.popup.optionsPopup.close() scope.popup.isPopup = false} })} }}])再创建 rjHoldActive 指令, 用来解决第一个问题.directive('rjHoldActive', ['$ionicGesture', '$timeout', function($ionicGesture, $timeout, $ionicBackdrop) {return { scope: false, restrict: 'A', replace: false, link: function(scope, iElm, iAttrs, controller) {$ionicGesture.on("hold", function() { iElm.addClass('active') //300ms后恢复 $timeout(function() {iElm.removeClass('active') }, 300)}, iElm) }} }])最后分别在 ion-list 和 ion-item 上添加指令<ion-list rj-close-back-drop><ion-item class="item-avatar"rj-hold-active ng-repeat="message in messages">

---