SASS开发环境搭建(webstorm做编辑器)
来源:互联网 发布:照片换服装软件下载 编辑:程序博客网 时间:2024/06/06 14:51
sass只是了解过,却没有实际操作。下午空余一部分时间,搭个SASS环境扫扫盲吧。遇到的问题还真是不少。
sass安装:
根据实际操作的过程,总结以下步骤:(限window系统)
1、下载RubyInstaller,运行安装(只管点击next即可)。
2、在开始程序中找到Start Command Prompt with Ruby,如下图
点击后出现命令窗口:
命令行中输入:
gem insall sass
不放心可以输入如下命令看下sass的版本号。
sass -v
至此sass安装成功。
配置webstorm中sass:
在webstorm中settings中搜索file watchers工具,在此工具中添加一个scss的watcher,按照下图设置各项。点击ok
这样webstorm中sass配置好了。
建个scss文件试试如下图,写个简单的sass代码
会自动生成对应的css文件。如下图:
电脑上安装的webstorm当生成文件的路径默认的时,会需要手动同步目标文件才能看到最新的修改。(不知道是自己设置的问题还是什么,有了解的伙伴可以多多交流哟)。当然如果是按照默认的路径会在.scss文件下实时产生修改过的.css文件。
ps:项目所在的路径中请不要出现中文,不然sass在编译是会出现编码错误呀。
环境搭好了,学习sass的路才刚刚开始。
1 0
- SASS开发环境搭建(webstorm做编辑器)
- SASS(SCSS)开发环境搭建(webstorm做编辑器)
- SASS开发环境搭建(webstorm做编辑器)
- SASS开发环境搭建(webstorm做编辑器)
- vue开发环境搭建(IED:webstorm)
- vue开发环境搭建(WebStorm)
- vue开发环境搭建(WebStorm)
- sass环境搭建以及webstorm中的scss配置
- Angular2开发环境搭建@WebStorm
- webstorm开发vue环境搭建
- Webstorm配置SASS编译环境
- Less、Sass环境配置(Webstorm和Sublime两种)
- Meteor 开发环境的搭建--webStorm安装
- Linner和WebStorm前端开发环境搭建
- Atom和Webstorm开发环境搭建
- react+webpack+webstorm开发环境搭建
- 搭建Amazeui+react+webpack+webstorm开发环境
- 搭建Amazeui+react+webpack+webstorm开发环境
- IOS 开发中的一些实用公共方法
- php中使用redis------list列表
- Android 自定义view一,Path篇
- LibCurl HTTP部分详细介绍
- Dynamics CRM 产品视图列上自带按钮的隐藏
- SASS开发环境搭建(webstorm做编辑器)
- 动态规划——数塔问题
- caffe预测、特征可视化python接口调用(caffe python接口调用示例)
- asp.net 页面传输数据
- Kodi ——6 Controls (20)6.20 EPGGrid Control
- Layouts
- Study Git《批量删除文件夹和文件》
- ios开发中使用工厂模式创建ui控件(swift)
- ov5640摄像头驱动的开发过程