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的插件安装里找到

aaarticlea/png;base64,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" alt="" width="327" height="227" />

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

然后拖到 aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAABICAIAAAAMFRboAAAPbklEQVR4nO3dQWgbVx4G8IEe5F6MoWAcqGm2uJDgS4x7SHSS91LhElByUS4VgkUQCIbAXIx0MAiXoBKwoAZdTHWKfNkhFCxysdcFgbLrwxixxakoTHRYeJZtWbZkW7ET++3hqeOxNJoZSSONNPp+vIM9lt48pW705b3/e+IoUEopff+ebm420d69s3rEAAAAoIezegDW2N6mq6t0YYG6XHRsjHJc621oiLpc1OWifj9dWKAvXlSTULFo9YsEAAAYeAMUdN6/p7EYffJEJdncvl0NK3JeUTa///qnymYkIblc1OOhCwv0zRtEHwAAgG7jiN2trx8EAifj45/k8OFwXLndFZ4vx2JFQSi0f4tUal8QCoJQiESOeb7M82WPp+J0njscVzW5Z2Lio9d7Fo0ebW3ttX9fAACAgVUxgOd5Lm1Ty8u/P3q0+8UXF3LI+Oabkx9++N/y8u/dHMZvv/17efn3UOjPR492v/rqTBl6bt368P33e6HQn6ur290cEgAAwIDged5uMzqZTD4YLCnnb5zO80jkOJPJWz00QgjJZvOJxOHc3Mn09IUy9AwPX87MfAgGS4JQyOV2rR4mAACAHdgq6MTjRY+nIkeH6emL3sk3qnK5XRZ6nM7zmhWu0dFLp/M8EDgJh0uCUMhme/dVAAAA9Cw7BJ1E4tDnOx0evpSnRny+01Rq3+pxNW1t7SAcLrHinvqiZofjyuk89/lO2axPLwc4AACAHtGXQWdt7SASOfb5Ticnb6z+uN2VWKxom3Wfra09QSjwfNnrPVONPmxVzus94/myIBT6MdsBAAB0lE7Q6ZGdQXKyqalrYUs8MzMfIpHjQVjckaOPz3equqWLLdh5PBWeLycShyj3AQCAAacVdBKJQ46j4XCpmwMihGQy+UTikOfLbnelZs6G4+j4+Ce2MzyROMTyTSaTF4RCMFjSiD5s4mdm5gPPl1nFD+Z+AABgQGgFnWj0iOMoz5e7MI719Wp5inK3lHzwDEs2qMk1Qo4+rMa5PikqIyMr+uH5cjxexPQPAADYj8VBJ5Xan5s7qQk309MXgcBJNHpkylF+QP5KP+wwQ7db/STDRtM/glDokRVMAACAZmkFnWCw1KGgk83mI5HjiYmP8purfISM6fcCDYJQYKuEbOWrfjpNNQaxxiqBWGP1QF1uiF8AAKBLK+jwfNn0oJNIHCqPuhkf/xQMlvCO1VPYx1mEwyWeL8/MfGCxRt6935ttcvJCTmBy/JJnpFCTBAAwsPSDTjBoQjGyIBR8vtPR0eqbpcNx5fWera0dtN8zdFk2m5fnVOQP9qpv7DQg7cYWyHQbW2tTbUamoOTGzmCUt6QhXgMADAL9oBONHrXce02+Yf/yHpCt4NBlbO89a9HokZyT2ClEynVSubEzGAOBk3jcPscvAQA0SyJFiRRFQnWb1SNthZlBZ23tIBYrsvWOmveVycmLcBhLVGAxNh0ViRwHAiofu8EKxdbXMdEIAINlRyLijpQUiW5bFqmFbUWkwg6VpOZenVbQ8flOa4KOJEnptJhOp+UrP/+c8vv/mJ7eq9/FMzl54XZXwuHSL7/8K5lMJpNJ+VnJv+AKrnTnCvvVJXVSqf1I5Njtrih/gVE6BgADQiLFHYmERDq7Io2F0iP8hl5LW9jGQunZFWlFbC7raAUdr/esJuiIYjXl5HK70eiRctpmePiSnXYTjxfxb2LoQel0WjXryBKJw0DgRPlb7XSeR6NHWNUCALuSSFHckWZXpLuhjQfL5MGKTvu7pe3BMvlbKD27Igk7TSyi6QedROJQvpJK7ScSh17vmbwHx+k8D4cx2w/9QRS1go5sbe1A+TGxqJ0HALsSCU2KZCyUnlomd1+Suy+l3m7kwbI0FkqviKYGHflsm1RqXzl/06efEA5gXCxWdLuvT0OYnr5opzYfAKDXsKAzwqetTjBNZJ0RPr1sVtBh1Zpy0Mnldh89OnI6z7FtCgZKJpMPBkvyVva5uROrRwQAYA4WdIb6KehIHQw6hBBlsSdA3zG4dNWIIBQcjiuH4wqfJgsA9oCgc85xVLn3BEEH+lr7v8DszIVAAJM6AGAHCDq1QWdjI93owQC9r/2gk8vtjo5eYlIHAOwBQac26AD0tTaXrhg2qRMOm/DRKAAA1kLQsXPQmZqasnoIHceFiqpf1zym0Y9A1fr6AcdRt7ti9UAAANplVtChlFJK+zXoKIuRd3Z2DPY7dZPxAbXJ+O16J+i0nDN0n6gbdDqdcuo7l6+wW8tNe5w9JZfbdTiuxsc/WT0QAIB2tRZ0qILdgo7xEgdljOhy1jGod4bU2lu7kYxiJOi0cGvjtIOOkevmMmXpihAyOXnBcRSHLABAv2sh6CgDjZxv+jXo1BwYSFoNOuRm1mFf1FypD0NG5oTqH6B6F9Wnazyg/qLBMWv0oNoJUx9HVOc5lBcbzYVozI6oZo6aPsnN/FTfoeoIVR+mcVPVH3Un6Ji1bbD+fw0AgH7UbNBpFGhqrtdP+ehetDLoKD8Cwviuq/oEUBMRVB9Zn1dUu9K4nepdVBOJajzSGI/uY4z0rPpa6sOK6vX6L3QzTVMzOqqxSXeE2gHFrkEnHC6hHhkAbKCFoKMbgDS+rv+i/qIFQae1M++1g47us5oKOrpRSXs8xEDo0ehNu2eNTmQaeUXj7V9j6arloNPoR0b6VB1Pr9XomLV0JQgFjqNe75kpvQEAWKVDQUc3AGk/sntBx+c77U7Q0ViBUn18/XN179JU0NEeT6PHNLqXKUGHKJKB6k/Jzeig3bPurTW+NTHoNHqZ9ePsNQg6AGAP3Qw6d+sWqmidbgedYLDEcTQYvJ6fb2rXVc23Tc2OaMQI3Rvp3kX1vtpxRLe3FoYkay06dGLpqtGPjPTZaLQt9FM/zl6DoAMA9tCJGh3deRplCbPB+3Yq6MRixZrT7k3ZdWUw6BjpXHveSPVr3RGqhh7juU3jpy0HnUYhptNBp6lQ0mgprdnnGqn10f5WA5auAACU2t91pRp06r9WTT/W1+iwv809nuuD0ZoKOo1mZYwsA+muDakiddFEY1pIO4rVj0djDBovX+OFywy+/auWsyjDkOrSlcZSl8at6/tvarTN9qN8uu4L0f1Wg1nFyAg6AGAP7Z+jUx9Zah7QwsXuBZ1MJs9xdHLyQr7Stc+6MhgRjPcAQBB0AABuGvSPgCCEjI9/suRgNI3plhZ6AGDMWrqKx4scR32+U1N6AwCwCoJOdYd5PN7t+lDtpSuDPZg+KgAmGj3iOMrzZasHAgDQFgSd6l/ocj2y8V1XADY2N3fCcTQW64MNYgAAGhB0qmU68ucXmlXiAGAJs5au3O4Kx9H19QNTegMAsAqCDiF/fX7h1tYeQdCBPmfWL/DExEeOo7ncrim9AQBYhQWdkQEPOmyWnq1epdNd2nUF0AnJ5Eb7nWSzeY6jExMf2+8KAMBaLOiMhfop6IyF0ivmBp1MJu9wXDkcV5lMt/deAZhLkqT2O2GFa9hbDgA2IJGiuCM9Xpbu8huWJxhjKUd8/IoIO6YGHUJIIHDCcdTtrp4cmE6nk8lkMpmUa5M3NnAFV3r8igkRh5mZ+WDJVkQAANNJpLgjkUWRPl6WxkLpET49pNlGLG1jofTjV2RFpE39o9VQ0Mlm86woAf+KhQGXzeYdjqvh4UsU6ACAbexIRNyRkiLRbcsitbCtiFTYaS7lEINBhxCytbXHDg90uyv4Kx4GVjhcwlGBAGAzEilKpCgSqtusHmkrjAYdosg64+OfwuFSKrXf0ZEB9KDR0UtsLAcA6CNNBB1CSCaTZyeIsDY+/snnO43Hi5jjgUHAPvlBLlYDAIDe11zQYVKp/bm5E3a+DmsOx5XXe4byTLA39jufSBxaPRAAADCqlaAjy2bz0eiRx1NxOK5Y4hkdvfT5TvFOADaTy+2yz32bnLyweiwAANCEtoKOjCUep/NcnuMZHr70es9iMaxqgR2wlDM6eonSNACA/mJO0JFlMvlI5JgdNCI3t7sSiRyzD5EA6DuJxCGrSMOZmQAAfcfkoCPLZvOxWNHjqQwPX8qJZ3LygufL2LECfSSX22WHSAlCweqxAABA0zoVdJQSicNA4IRtTZe3awUCJ3jngN7H82UclQkA0L+6EXRkqdR+MFhSbtcaHr70eCqxWDGbxaIA9JytrT12DjIWrQAA+pEkSV0NOrKtrb1I5FhZvMxxdHr6Ihgsra1hYQt6Bas2i0SOrR4IAAC0QhRFnuc5Uz7SuTWslMfrPWMHzsrN6Tzn+bIgFDDTA1bBfnIAgL4mSdLLly9DoRD36pVgYdaRra8fBIOlmZkP8qk8yipmp/M8EDjh+XI8XhSEgiAUsI0LOoeV5oyOXuLXDACgH0mS9OqVwPN8KBTieJ5fXHwpimIvxB1mff0gHC55PBWn81y5b6tRY0lI2dzuCs+XlS0YLLGExBqqLqARlnKGhy+xQxAAoO9IkiSK4uLiS5ZyFhcXuVAoxPP8s2fPnj179o9e9fDhj7OzP3377T+npn79+uv/3Lr1x61bf4yMEN0MpNs+//yI9fbll/+dmvqVte++W5qd/Yk1q186dNXU1K8cRz/77OLhwx+tHgsAADSN5RmWcqpBh9rC5qZKi8fpwsKN5vFQl6vaWkhFt29fP93lutFzPH5930rF6j8OaMnCAuU4OjRE37yxeigAAGASmwSddmxv1waj589vBJrW5oqGhqpP93huhCHEoB707l31P/TICN3ctHo0AABgHgSd5rx/f2PSSDmp4/dXk829ezoZaGyMulz0+XO6tEQ3NykhVr+qAVYs0vn56n+Xe/fo9rbVAwIAAFMh6HSQnIqWlq4nim7fbjj94/fThQW6uUnfvbN66AOAEPriBR0bq07kLC1ZPSAAAOgABB1rvH1L37y5ngcaGlJJP/fv0ydP6MICff2abm7SYtHqQdvF27fU77/+M/f7MakGAGBbCDq9olikm5s0FqPz89Tlqs40NFr2crno/PyNIui3b61+AT1ve5vOz9M7d6p/kiMj9OlTTJ4BANgcgk5Pk0uk2X4x+U1atymLqZ8/vy4kWl29LjAahGxULNLXr6nffyM43rlD43FUhQMADAQEnf5Tqdwo/ZGLoBsVABlvynhUk5BqQpKy9Ro2Meb31+bC+/fp0hKmcAAABguCjm0pN4gpjxRSBqNG5UGmtJpjhxodQdToOCIjreaEpPrXcu8e9fvp6ioqnAAABhSCDtwgnyqkeuji06cNs0vnAlNT7f796sFFOLIIAAAopf8Hvc/sWUsTcJMAAAAASUVORK5CYII=" alt="" />  就可以了。

这时就可以再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文件里，点击aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAABUCAIAAABGG1PbAAAESUlEQVRoge3aPWjbQBQA4AODMWTx0JJChxRBoYQGgiHgEigOhdJAIEEYErS0cBmCNbSgQlsEzdCDUDDNUEEzqBgCGkXocGSpMF6SsVs9dHC3QCkECiGQ5XV49kWRbEWJfpzhHhqMrOg+vbuT7y5HINXo9aDdhsPDNO9JUrzX5iYQ0j82N1O7bWpE9JXLUKvBygp0u9DtQrsd9/jxI2Oi8ImSut3zjMY87tyBjQ3Y20uJqA2iXl9XlA4hUCyeLC6+E+dXV58rSmdy8mfM49atX8L67BmcnqZErFZ3SqVjQqBUOvb7rheq2mi1YHYWCIGVlTSIlcouPrSidOr19YQ+DAA4Pu4rt7aSEVW1QQgUCmcLCx9TwQkiAPR6UC5DqQS9XgLi48efCIEHD/ZT9AkiAGxvn1f3NYnV6g4hMDPjZkQEgHv3gBDodpMR79//nh0RE/n2bTKionSyIx4dASEwO3uDiQD9rp2ImLy76LpumuYo4osXiYkR3YUxZts2pTTCxxhzHCcii/1xyfWIc3NfI4i6bnie53ke59yfJP8FrutyzgPPECil1UpAxPfi0LZIKeWce77wp5NSalkWntd1I/C3aRKXll7jr4uqNgLFuK7rhQLTaZqm+JYxFn68QClbWwmImqbhACeQSMuyw75wWJY9tIUESqnVkhFVtTEx8YcQqFZ3sADGGApct5+zQI0Pvh3ZyfxFnJ5CqQTlcrLB2NOn77G6K5XdjY03gwxZ/pZn2xfyGu4io4jtNhACa2uJh7T49sHj7t1/Dx8ezM9/Xl197i/Yn85wFxlFfPUKCIFWKzFR07TFxXePHv2+ffuvsBYKZ1NTB/5xGqZzaBcZRcRhRK+XBtE0TV3XNU2r19fn5z8rSqdQOEPrxMSfSmU3/oBX3H9vDwiBWg0g+dxlaNTr69XqjpiOFIsn09Pfwq+nCCL+OuNUKxOiiOXll/6kTk7+nJlxFxY+PnnyYXn5Zfj6w0PY34e1tf4YByNbIoaqNqanvxWLJ1easIr5bh5EEUtLr+fmvk5NHeDEVGRXNFxcJvjyBY6OzsvKlXhpDC1LEiVREiVREiVREiVREuMTGWOcc855YDKFs+zw+TEQxXyUcx7n/BiI/ol9nPP5EbF+4yzoiFyGazxb4pV8o2o8W+JVfRiSKImSKInXJAYWjOOEbQcX5bMlphKSKImSKImSKImSKIkXInorzPiJum5wzqP/Uz5OIvo8z4upzJuIPkGMo8yVSCnF/Uy48wm5rutGt8tciYNE6pqm4RwFP9+gLPojPI26KURKabPZFMRms3np2ydXoljLE0TvsiXa/IiMMdy75rougpAYPj8GomEYjuOEEf62KKCO4xjGJZsDUybirkn0BTovtkjflbrvygvKbIlCg03QsuzwW0bXddw9OKpR5kHUBh1ZLIlgbRqGIVZUIrp2HkRKKW6eFQnDCsUPIrVDN9iOIv4HCMVH+5/7Xk8AAAAASUVORK5CYII=" alt="" /> 就看可以立即看到效果了。

非常棒哦！！！

附插件： https://github.com/konstantinkobs/brackets-SASShints 它可以自动完成变量读取
aaarticlea/png;base64,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" alt="" />

Brackets支持远程网站调试

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