Brackets + Sass 学习心得

大家知道Brackets是一个可以实时浏览html页面修改效果的工具，对于前段开发人员应该不会陌生，有了它，布局页面再也不是什么困难了， 目前为止已经更新到1.6了。 下载最新版可以到官方网： http://brackets.io

sass 大家应该也有所了解，它是一个预编译样式的脚本，可以通过sass编译器编译成相应的css代码。详细的关于sass语法请参考官方网： http://sass-lang.com/guide

 

brackets也有支持它的插件， 目前我在用的是：https://github.com/jasonsanjose/brackets-sass， 通常你可以在插件管理器里安装 brackets-sass

如果你不能上网，也就不能通过brackets的插件安装里找到

我们可以下载到最新的zip版本， 通常可以在 https://github.com/jasonsanjose/brackets-sass/releases 这里下载.zip 文件名为jasonsanjose.brackets-sass.X.X.X-XXX.zip

然后拖到   就可以了。

这时就可以再Brackets项目里增加*.scss文件了， 默认下所有的scss文件都会生成相应的css文件，我们可以通过增加 .brackets.json文件区控制sass的编译结果

/*
Resulting file tree will appear as follows:
+ bower_components/
|--- bourbon/app/assets/stylesheets/_bourbon.scss
+ css/
|--- app.css
|--- app.css.map
+ scss/
|--- app.scss
*/

/* REMOVE comments from json file before using this template */
{
    /* disable compiling other files that aren't the "main" file */
    "sass.enabled": false,
    "path": {        
        "scss/app.scss": { /*这个路劲很变态，是相对根目录的地址，必须大小写一致*/
            "sass.enabled": true,
            "sass.options": {
                "outputDir": "../css/", /*css生成地址*/
                "includePaths": [],
                "sourceComments": true,
                "outputStyle": "nested" /*嵌套： nested 压缩值为： compressed */
            }
        }
    }
}

 

把生成的样式文件应用的html文件里，点击 就看可以立即看到效果了。

非常棒哦！！！

 

附插件： https://github.com/konstantinkobs/brackets-SASShints 它可以自动完成变量读取

Brackets支持远程网站调试

例如我有一个IIS站点，访问端口是：http://localhost:8080/，Brackets支持打开这个根目录，前提是设置项目设置