把Fireshell中的sass模块替换为less编译css

上一篇说了fireshell的简单使用 http://blog.csdn.net/huyoo/article/details/41013989

然后提到要装ruby和sass的gem包, 我不喜欢ruby, 所有我就把它这个项目的sass全部换成了less, 下面是过程.

1. 翻开 package.json看看, 里面的包有

"devDependencies": { "bower": "~1.2.6", "grunt": "~0.4.1", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-sass": "~0.5.0", "grunt-contrib-uglify": "~0.2.0", "grunt-contrib-connect": "~0.3.0", "grunt-contrib-jshint": "~0.4.3", 

看到了 grunt-contrib-sass之后, 我一想, 这帮人肯定有人开发了一个叫做 grunt-contrib-less 的库, 然后我打开 github.com的搜索页面, 输入 grunt-contrib-less, 点击搜索, 哈哈, 立马出现了一个 grunt-contrib-less的结果, https://github.com/gruntjs/grunt-contrib-less 让我对grunt又增添了几分好感.

2. 修改pacakge.json, 添加 grunt-contrib-less 包到依赖列表中.

"devDependencies": { "bower": "~1.2.6", "grunt": "~0.4.1", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-sass": "~0.5.0", "grunt-contrib-less": "~0.11.0", 

再次运行 grunt-dev命令, 结果提示 grunt-contrib-less包貌似没装, 看来手动之后, 不自动下载依赖包了. 那就自己干吧.

把 grunt-contrib-less 安装到本目录下:

fireshell> npm install grunt-contrib-less 

一会功夫就装好了.

3. 修改 Gruntfile.js

因为我不用sass, 因为我没装ruby, 所以这里就把所有的sass的地方都替换为less的东西, 如果less没有对应的, 就删掉sass

主要是task和watch列表里

task添加:

    /**     * Compile Less CSS files     * https://github.com/gruntjs/grunt-contrib-less     * Compiles all Less CSS files and appends project banner     */    less: {      dev: {        options: {        },        files: {          '<%= project.assets %>/css/style.unprefixed.css': '<%= project.css %>'        }      },      dist: {        options: {        },        files: {          '<%= project.assets %>/css/style.unprefixed.css': '<%= project.css %>'        }      }    },

watch添加:

<pre name="code" class="javascript">watch: {      concat: {        files: '<%= project.src %>/js/{,*/}*.js',        tasks: ['concat:dev', 'jshint']      },      

      //这里是添加的部分      less: {        files: '<%= project.src %>/less/{,*/}*.less',        tasks: ['less:dev', 'cssmin:dev', 'autoprefixer:dev']      },

在 grunt的task里注册less的任务

/**   * Default task   * Run `grunt` on the command line   */  grunt.registerTask('default', [    'less:dev', 原来是 'sass:dev'

4. 复制src/sass为src/less, 然后把所有的*.scss扩展名全部改为*.less

5. 开始把所有的原来是sass格式的, 都改为less格式的

6. 使用grunt-dev命令运行查看, 有什么错误都会提示出哪个文件不是正确的less格式而不能编译.

7. 全部改成了less, 并且编译通过了, 再运行 grunt-dev

Running "less:dev" (less) taskFile app/assets/css/style.unprefixed.css created: 0 B → 2.18 kBRunning "bower:dev" (bower) taskRunning "autoprefixer:dev" (autoprefixer) taskFile app/assets/css/style.min.css created.Running "cssmin:dev" (cssmin) taskFile app/assets/css/style.min.css created: 2.18 kB → 1.53 kBRunning "jshint:files" (jshint) task>> 2 files lint free.Running "concat:dev" (concat) taskFile "app/assets/js/scripts.min.js" created.Running "connect:livereload" (connect) taskStarted connect web server on localhost:9000.Running "open:server" (open) taskRunning "watch" taskWaiting...

8 grunt-dev会自动打开 http://localhost:9000/ 看到如下界面:

 

注意, ie8默认是看不到svg图像的.

列几篇我将sass改为less的过程中, 找到的几个有用的资料

http://stackoverflow.com/questions/14910667/how-to-use-if-statements-in-less
http://stackoverflow.com/questions/16777677/less-css-if-variable-is-true-guard
http://designshack.net/articles/css/10-less-css-examples-you-should-steal-for-your-projects/

主要的问题是: sass的if语句比less的when判断好用一些, 更加符合程序员常见的流程控制.

另外一个就是less的mixin也是很好用的, 比sass的不差.

9 最后一个问题, 代码呢?

这个修改版的fireshell, 所有的代码我都放在了 https://github.com/encorehu/fireshell 

欢迎来fork