sublime Text3下sass环境配置(windows) た 入场券 2022-05-24 04:50 254阅读 0赞 ## 一、安装Ruby环境 ## 1. **Sass**依赖于ruby环境,所以装sass之前先确认装了ruby。可以到 Ruby 的[官网][Link 1]下载对应需要的 Ruby 版本。 2. 此处根据我的电脑配置,我下载的是![70][] 3. 安装注意: 安装过程中,请注意,勾选 **Add Ruby executables to your PATH **选项,可以保证在系统中添加好环境变量,防止之后在编译软件中发生找不到ruby环境的错误。另,安装地址无特殊要求。 ![70 1][] 4. 安装成功,输入`ruby -v`,可以看到: ![70 2][] ## 二、安装Sass ## 1. 通过终端命令安装 Sass。 * 打开电脑的ruby命令终端,输入下面的命令: `gem install sass` * 提醒一下,在使用 Mac 的同学,可能需要在上面的命令前加上”sudo”,才能正常安装:`sudo gem install sass` * 上面的方法一般是能安装成功的,但是墙的厉害,我为了简单使用的上面的方法 * 淘宝镜像安装法:(ruby终端下输入命令) > $ gem sources –remove [https://rubygems.org/][https_rubygems.org] > $ gem sources -a [https://ruby.taobao.org/][https_ruby.taobao.org] 【如果你系统不支持https,请将淘宝源更换成:gem sources -a [http://gems.ruby-china.org][http_gems.ruby-china.org]】 > gemsources−lgemsources−l gem install sass * 成功后如图: * ![70 3][] ## 三、SASS文件转换为CSS文件的方法: ## 如:在D盘建立一个demo文件夹,文件夹下有一个demo.scss文件(scss,sass都行。sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。scss对代码的要求没那么高。)用下面的方法可以将sass或者scss转换为css文件。 (1)首先找到d盘下的demo文件夹,打开cmd通过d:能够定位到d盘目录下,然后通过cd ..能够定位到d盘根目录下,再通过cd demo定位到demo文件夹下 C:\Users\mayn>d: D:\Ruby25-x64\bin>cd .. D:\Ruby25-x64>cd .. D:>cd demo (2)然后将sass或者scss转换为css文件 # # D:\demo>sass --watch demo.scss:style.css ![70 4][] sass --watch代表一直监听着style.scss 只要在编辑器上更新了scss就会自动更新style.css 。 实际运用 首先新建一个demo文件夹,包括index.html和一个demo.scss ![70 5][] ![70 6][] ## 然后将sass或者scss转换为css文件 ## **D:\\demo>sass --watch demo.scss:style.css** 注意:修改demo.scss文件时,必须处于被watch监听状态下,否则不会将样式改变同步到style.css中 可以看到,原先的目录下,多出了几个文件 ![70 7][] 再查看index.html效果图,可以看到 ![70 8][] ## 四、常用sublime插件 ## * package control * emmet * autofilename * autoprefixer ## 五、相关资料 ## * [w3cplus][] * [前端网ruby安装][ruby] * [Sass教程][Sass] # 六、Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件 # ### 原文:[http://www.w3ci.com//soft/716.html][http_www.w3ci.com_soft_716.html] ### ### [LESS][] [https://packagecontrol.io/packages/LESS][https_packagecontrol.io_packages_LESS] ### 功能:LESS高亮插件 [下载][Link 2] 简介:用LESS的同学都知道,sublime没有支持less的语法高亮,所以这个插件可以帮上我们 使用:打开.less文件或者设置为less格式 [![less][]][less] # [为sublime text 添加SASS语法高亮][sublime text _SASS] # 以前写CSS时,都是直接写样式,没有任何的第三方工具,后面发现越是面向大网站,越难管理,上次参加完携程UED大会后,发现SASS对于前端团队多人协作和站点代码维护上很有帮助,很多同学都开始用了,我还是在原地踏步,我也不能OUT呀,于是开始学习,平时比较喜欢sublime编辑器,而sublime默认是不带sass语法高亮的,今天记录一下,sublime下如何安装sass语法高亮。 1.下载 sublime SCSS语法高亮包 “[点击下载][Link 3]” 2.将下载下来的文件包解压。 3.打开sublime安装目录下的Data → Packages目录 4.将包放入打开的目录,重启sublime,搞定。 ![1-15021515193LR.jpg][]![1-150215151952336.jpg][]![1-15021515200DC.jpg][]![1-15021515202NY.jpg][]![1-150215152043M1.jpg][]![1-1502151521012N.jpg][] **D:\\demo>sass --watch demo.css:style.css** [Link 1]: http://rubyinstaller.org/ [70]: /images/20220524/79afd1023cb44b1b95abd6f56aa90f3c.png [70 1]: /images/20220524/74eb484aceee4f1d8b15688e5dc5a6b1.png [70 2]: /images/20220524/2fc79bec830d423a8495000648065883.png [https_rubygems.org]: https://rubygems.org/ [https_ruby.taobao.org]: https://ruby.taobao.org/ [http_gems.ruby-china.org]: http://gems.ruby-china.org/ [70 3]: /images/20220524/2626501c18a341d485d2f0b81c0d956f.png [70 4]: /images/20220524/957cfe307c144d659700ae8d98b3d3d9.png [70 5]: /images/20220524/da6a1851c68c41fb8e8494d7aa16773b.png [70 6]: /images/20220524/fe786c6e5c5a48c59725bd76fca32555.png [70 7]: /images/20220524/45756114eb76433593575a99c5c61e08.png [70 8]: /images/20220524/cd39a7ba52d64a9d8b4c126d330a619d.png [w3cplus]: http://www.w3cplus.com/sassguide/install.html [ruby]: http://www.qdfuns.com/notes.php?mod=view&u=23274&id=69c0e9124f28fad3af21ec0a3c259af0 [Sass]: http://www.ruanyifeng.com/blog/2012/06/sass.html [http_www.w3ci.com_soft_716.html]: http://www.w3ci.com//soft/716.html [LESS]: https://sublime.wbond.net/packages/LESS [https_packagecontrol.io_packages_LESS]: https://packagecontrol.io/packages/LESS [Link 2]: https://github.com/danro/LESS-sublime/zipball/master [less]: /images/20220524/c1007d7406e846faa7cf40e3f01872a7.png [sublime text _SASS]: http://www.cnblogs.com/xupeiyu/p/3825651.html [Link 3]: https://github.com/kuroir/SCSS.tmbundle/zipball/SublimeText2 [1-15021515193LR.jpg]: http://www.w3ci.com/uploads/150215/1-15021515193LR.jpg [1-150215151952336.jpg]: http://www.w3ci.com/uploads/150215/1-150215151952336.jpg [1-15021515200DC.jpg]: http://www.w3ci.com/uploads/150215/1-15021515200DC.jpg [1-15021515202NY.jpg]: http://www.w3ci.com/uploads/150215/1-15021515202NY.jpg [1-150215152043M1.jpg]: http://www.w3ci.com/uploads/150215/1-150215152043M1.jpg [1-1502151521012N.jpg]: /images/20220524/0ab43bbebed04ab0bc281448407b73f3.png
还没有评论,来说两句吧...