ruby安装及webStorm配置SCSS
sass安装:
步骤:(window系统)
1、下载RubyInstaller(v2.4.3),运行安装,基本直接next安装,不过有个add to PATH的选项一定要勾选,这样就不用配置环境变量。
2、在开始程序中找到Start Command Prompt with Ruby,如下图
v
3、打开后命令行输入:
1 gem install sass
这时候可能会出现安装不成功的情况或者安装很慢(慢的想打人),因为国内伟大的GFW原因连接不上导致无法安装
所以就需要替换国内淘宝提供的镜像,依次输入如下代码:
1 gem sources --remove https://rubygems.org 删除原来的资源库位置
2 gem sources -a https://ruby.taobao.org/ 添加新的资源库位置
3 gem sources -u 更新资源库
4 gem sources -l 查看当前资源库
除了淘宝的镜像外再提供几个常用的gem源地址:
http://rubygems.org/ http://gems.github.com http://gems.rubyforge.org http://ruby.taobao.org
出现下面红框中文字后表示成功,这时可以输入如下代码查看版本:
sass -v
webStorm配置 :
File-->Settings-->Tools-->File Watchers,点击右侧加号()添加SCSS
输出参数(Arguments):
--sourcemap
表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map
文件。 webstorm是默认开启sourcemap的,所以可以不填写
--style
表示解析后的css是什么格式,如:--style
compressed (我一般用这个)
有四种取值分别为:nested
,expanded
,compact
,compressed
// nested
#main {
color: #fff;
background-color: #000; }
#main p {
width: 10em; } .huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline; } // expanded
#main {
color: #fff;
background-color: #000;
}
#main p {
width: 10em;
} .huge {
font-size: 10em;
font-weight: bold;
text-decoration: underline;
} // compact
#main { color: #fff; background-color: #000; }
#main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compressed
#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
ruby安装及webStorm配置SCSS的更多相关文章
- webstorm 配置scss的问题
第一种方法(ruby方法) 先安装ruby,在windows/system32目录下 1.先查询源是什么 gem sources 2.移除原有的源头 gem sources -r http://xxx ...
- webstorm配置scss的小结
1)安装ruby 2)安装sass 3)配置webstorm 打开webstrom ->file->setting->Tools->file watcher 添加scss pr ...
- webstorm配置scss环境
1.下载 Ruby (安装过程中记得勾选添加到环境变量,安装结束最后可能会弹出一个cmd弹框,可以忽略) 2. cmd安装sass gem install sass 3. cmd检查是否安装 sas ...
- mac下用ruby安装sass && webstorm下给scss文件添加watch
1.安装rvm 先安装 [Xcode](http://developer.apple.com/xcode/) 开发工具,它将帮你安装好 Unix 环境需要的开发包 sudo curl -L https ...
- webstorm配置scss自动编译路径
webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录. 本文使用的webstorm为8.0版本 scss安装:http://www.w3cplus.com/sas ...
- Ruby 安装和gem配置
在linux或mac等*unix系统下可以使用rvm来进行ruby的配置和管理. 安装方法 (需要curl) curl -L get.rvm.io | bash -s stable rvm官方网站: ...
- git安装以及webstorm配置git
下载及安装请移步 https://www.cnblogs.com/specter45/p/github.html 用webstorm上传代码时,首先要先下载git,网址一搜就可以搜到,然后开始配置 ...
- Webstorm配置CSS/SCSS自动补全兼容前缀autoprefixer插件
关于Autoprefixer Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及 ...
- Ruby安装Scss
Ruby安装Scss 引言 已经许久不写HTML了,今天有点以前的东西要改.但是刚装的Windows10,已经没有以前的Web开发环境了.只好重新安装. 结果Webstorm装好后配置Scss出现错误 ...
随机推荐
- HTML5实现输入密码(六个格子)
我的思路:用六个li充当六个格子,同时将input框隐藏,点击承载六个格子的容器时,使焦点聚焦在input上,可以输入.通过监听input框输入的长度,控制格子内小黑点是否显示,同时用正则替换非数字. ...
- <Android 基础(二十五)> View Animation
简介 视图动画,主要包括位移,透明度,旋转和缩放,View本身的属性并没有发生变化,只是在这个视图上添加一些渐变的效果,所以总体而言,视图动画只能实现一些简单的动画效果,属性动画功能更强大. 使用 r ...
- 风云2号云图Mosaic Dataset处理
# ---------------------------------------------------------------------------# -*- coding: utf-8 -*- ...
- Flutter自定义标题栏之处理状态栏高度
App在很多情况下由于各种需求需要自定义标题栏,而在能够构建Android和IOS应用的Flutter中,如果不在Scaffold中使用AppBar会发现默认是沉浸式. 猜想:我们使用自定义标题栏好像 ...
- 我的blog第一天
今天是2017年6月13号,一个很平凡的日子,但是对我来说意义非凡.这是我开通博客的第一天,这是我写的第一篇文章. 先自我介绍一下,本人邢卜,河北石家庄人,生于89年6月,说到这我马上就要过生日了!嘿 ...
- 浅谈 java 反射机制
一:Java反射概念 Java反射是Java被视为动态(或准动态)语言的一个关键性质.这个机制允许程序在运行时透过Reflection APIs取得任何一个已知名称的class的内部信息,包括其mod ...
- Hibernate 集成 Ehcache 开启二级缓存
一.将 Ehcache.xml 放到 classpath 下 <?xml version="1.0" encoding="UTF-8"?> < ...
- 【gp数据库】查询系统表看模式下所有表的分布键信息
Greenplum是关系型的分布式数据库,需要存储的数据库在进入数据库时,将先进行数据分布的处理工作,讲一个表的数据平均分不到每个节点上,并为每个表指定一个分发列(distribute Column) ...
- MySQL案例09:Last_IO_Error: Got fatal error 1236 from master when reading data from binary log
刚处理完“挖矿”事件,在做最后一个MySQL NBU备份的时候,发现从库有问题,好奇的是怎么主从状态异常没有告警呢?先不管这么多了,处理了这个问题再完善告警内容. 一.错误信息 从库show slav ...
- [UI] 精美UI界面欣赏[1]
精美UI界面欣赏[1]