Text3插件与Sass编译全攻略

返回上一篇文章“基于Text的sass之语法和应用”之中, 我们学到跟sass有关的一些语法以及应用, 发觉Sass的写法实际上是CSS与综合体 , ^_^倘使你具备一些基础, 学习起来相对还是比较轻松的。OK, 今天我们接着来学习Text3的一些常用插件以及SASS的编译玩法。text3常用插件Text3的插件相当数量有不少, 重点是打算去分享在开展开发项目期间经常会用到、常常要涉及的一些插件。1、有的, 它那种是自身带着的, 然而在text里呀它却得去安装才行。在进行编程这个过程当当中, 我们常常会有需要用到命令行窗口的时候。插件它能够让在Text 3那里去打开cmd命令窗口, 其快捷键设置是CtrlShiftT, 当然啦就算如此你倘若不想通过快捷键操作, 也能够在与之对应的那个文件此里面去鼠标右键点击来选择实现相关的动作, 比如说呀在当你想要在某个指定的根目录那儿去运行命令, 那么你就能够在左边的导航栏这里点击右键来做这样的操作, 如此这般一来呢就根本不必每一次运行的时候非得去查找文件它所在的目录。你也可以在打开的文件中区域点击右键调出运行窗口。2、有个插件, 它特别实用, 是开发的时候必须要有的神器。然而呢话说回来, 它仅仅是对右键菜单起到增强的作用。在没安装这个插件之前, 我们去右键点击左边的菜单, 那时会发现只有命名、删除等几个选项。等安装完成之后, 就会发现多出来了好多的编辑功能, 就如同下面所展示的图片那样:3、YUIYUI 实际上是一款挺好的插件, 它能够自动对 css 和 JS 进行压缩, 而且与此同时生成.min 的压缩文件, 然而却不清楚为何在 Text3 上不被支持了, 在 Text2 好像是可行的, 大家能够试一试。4、CSSCSS具备格式化CSS代码的能力, 能够实现压缩、美化、净化以及标准化之间的相互转换。而且众多CSS压缩软件会将css hack过滤掉, 然而CSS不会, 它比较好用。用法只要在打开的CSS文件上鼠标右键弹出菜单如图一共有7种方法大家可以一一尝试看下效果。5、jsJS 可以格式化js代码标准化。用法只要在打开的JS文件上鼠标右键弹出菜单如图6、这是一款代码格式化插件, 它能够让多行代码里的等号达成对齐效果, 还能够将多行代码调整至同一个缩进级别, 该插件的默认快捷键是ctrlalta, 在Mac OS系统上对应的快捷键则是cmdctrla。7、它是一款针对括号、引号、标签的插件, 这款插件具备高亮功能, 它所支持的符号有 、()、{}、、 以及 等, 与Text自带的高亮相比较, 其明显程度要高得多。8、编辑CSS样式之际若要添加自己中意的颜色或者对现有颜色予以更改等等, 难道就得前往PS之处去进行调色吗? 能够促使Text 3内部设置一个调色盘, 将颜色调制妥善之后, 点击OK便会于光标所在位置形成十六进制颜色代码。9、这是一个代码校验插件, 其基于某些条件, 在安装前要确认已经安装过了。它能够帮你找出存在错误或者编写不太规范的代码, 对诸多语言加以支持, 其中涵盖了C/C 、CSS、git 、Haml、html、java 、Lua -J、Perl、PHP 、Ruby以及xml等语言。说明按默认的模式来运行, 于用户输入之际立刻进行即时校验, 要是你期望 Text 能够运行得更为流畅, 那么可以改用 load - only 模式或者 save - only 模式, 在读取及保存之时顺便校验或者仅仅于保存的时候开展校验。将其打开, 找到对应的配置文件, 就是那个菜单, 然后依次进入, 进入到 User 这一项, 在其中加入这样的内容, 即 对应load - save , 或者 对应save - only。10、插件该插件依赖资料库来运行, 利用此库能够精确判别出哪些属性需要何种前缀, 它是基于这样的原理, 故而需要预先实施安装这一操作。使用方法在输入css3属性后冒号前按tab键。实际上, 就我个人而言, 认为当下这个插件, 相较于Emmet【当前st3已然自带】来讲, 并没有多少有价值的用处。原因在于, 此功能已经由emmet涵盖了。之所以分享出来, 是为了让大家知晓一番。11、-text-Git要有的操作存在在于可视化, 其目的是协助去往与Git repo协议之间进行交互, 它具备对诸多命令的支持, 诸如init、push、pull、stash等等, 当然在使用它之前, 需要依照要求去安装Git, 并且完成相应的配置。这个关系蕴含着诸多知识, 只是仅仅在此略微提及一下, 后续将会专门针对 -text -git 去分享一篇论述文。Sass编译在之前上线的那上篇文章当中被提及过的, 内容是sass于text3里面的编译情况, 紧接着会在这里给诸位去详尽介绍目前常用的两种编译插件, 具体的情况乃是如下这般说法。1、Sass buildSass构建是属于手动进行编译类型的, 在安装完毕之后, 要去保存sass源文件这一操作, 随后按下快捷键CtrlB 针对linux系统或者 B 针对OS X系统才能够将Sass编译成为CSS , 并且还会生成一个.map文件。对于此, 实则我内心觉得有点用处不大, 每一次进行保存这一动作的时候都得做这番操作, 难道这样不是会让人感觉很无奈吗。于是便想到了另外一款属于自动编译类型的情况, 接下来继续往下看2、你看, 要是能够达成保存时自动进行编译的操作状态, 是不是就增添不少便利, 然而在此之前, 我们得把自动编译所涉及的文件类型以及文件路径都妥善设置妥当才行, 不然的话, 只要你尝试保存自动编译, 就会随即出现报错的情况。跟着往下讲, 要告知大伙如何实施设置啦, 就好比当下我有着这样的需求, 那便是去设置sass源文件.scss这种格式, 以此达成自动编译的效果, 然后去点击“工具”, 接着再点“编译系统”, 随后点“新编译系统”。如同下面这样来操作:过后会自行创建一个文件, 我们把代码复制一下, 按照你的项目目录去设置相关路径:{ cmd: [ sass, --update, $file:${file_path}/../css/${file_base_name}.css, --stop-on-error, --no-CAChe, , PostCSS, --use, autoprefixer, ${file_path}/../css/${file_base_name}.css, -d, ${file_path}/../css ], selector: source.sass, source.scss, line_regex: Line ([0-9]):, osx: { path: /usr/local/bin:$PATH }, Windows: { Shell: true } }date, $file:${file_path}/../css/${file_base_name}.css, --stop-on-error, --no-CAChe, , PostCSS, --use, autoprefixer, ${file_path}/../css/${file_base_name}.css, -d, ${file_path}/../css ], selector: source.sass, source.scss, line_regex: Line ([0-9]):, osx: { path: /usr/local/bin:$PATH }, Windows: { Shell: true } }通常保存格式是以.-build作为后缀的, 就像我这儿所保存的是scss.-build文件, 在完成之后, 于编译列表之上我们便会看到我们刚刚新建的编译系统scss了, 如下方图示:在项目进行中我们选择scss编译。注意在着手开展项目以前, 得先对scss以及css的目录, 还有路径进行规划, 以此防止于保存自动编译之际, 出现报错的状况。总结关于Text3的插件是存在着实不少数量的, 上述所分享的仅仅是其中一部分而矣, 并且这部分还是本人置于前端开发这一场景里常常会运用的阶段, 基本上已足以满足使用之需求, 在此处是明确建议大家不要进行随意去安装其它之情况出现, 需视具体情况来最终判定之考量, 要是安装的该项插件数量越多的话, 那么Text3就会出现愈发卡顿之状况, 倘若你个人电脑的配置是相当厉害的那种情形的话, 那就能够完全另作考虑之举, 不过, 这只是一种假设, ^_^。反过来讲, Text3是我当下发觉的, 一款最为轻便且好用的编辑器, sass的玩法在其上得到了完美呈现, 对于那些尚未玩过Text3或者并不熟悉的同学而言, 可以去进行一番探索, 要是你拥有更为出色的玩法, 一同学习。