文档章节

在webstorm下使用compass 和 sass

ziluopao
 ziluopao
发布于 2016/05/28 13:10
字数 1090
阅读 211
收藏 2

一直想玩sass,但发现这玩意似乎在linux下使用的,而我这样的只是侧重前端的人玩linux做啥,最好是所见即所得,省时间精力!后来百度了下网上,几乎很多方法都是错的,后来通过这些方法的启发,竟然研究成功了,所以写下方法备注一下。

之前为了进阶css,狠抓了一下sass(现在叫scss,编程风格和css类似)和它的框架compass,由于本人对命令行的恐惧,因此总想将其弄到IDE中。

先安装ruby,sass,compass。

先在这里下载ruby 我下载的是最新版的ruby

Ruby安装包下载地址:http://rubyinstaller.org/downloads/下载对应系统版本的安装包;

2、双击rubyinstaller-2.2.3-x64.exe开始安装,如下图所示安装;

3、检查是否安装成功win+r输入cmd回车打开终端输入ruby -v;

Gem的使用方法

安装完Ruby实际上已经安装好了gem,通过win+r输入cmd回车打开终端。

查看已经安装的gem软件

 

gem list

下面安装sass

gem install sass

 

按回车键确认,等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害,如果你没有安装成功,那么请参考下面的淘宝的RubyGems镜像安装sass,如果成功则忽略。

如果要安装beta版本的,可以在命令行中输入

gem install sass --pre

你还可以从sass的Git repository来安装,git的命令行为

git clone git://github.com/nex3/sass.git
cd sass
rake install

升级sass版本的命令行为

gem update sass

查看sass版本的命令行为

sass -v

你也可以运行帮助命令行来查看你需要的命令

sass -h

淘宝RubyGems镜像安装 sass

由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源,先移除默认的https://rubygems.org源,然后添加淘宝的源https://ruby.taobao.org/,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass了,关于常用gem source命令可参看:常用的gem source

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https,请将淘宝源更换成:gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

 安装compass

gem install compass

Compass使用方法

1、创建项目 首先通过命令行进入你要创建项目的文件夹。cd\回到根目录 cd ** 进入某个文件夹。

 

compass create myproject

 

2、配置config.rg 主要是对压缩比例。

#压缩比例output_style = (environment == :development) ? :expanded : :compresse

 

3、实时编译sass Compass实时监控Sass目录的文件变化,只要保存文件立即将对应文件编译成css文件

 

compass watch

webstrom2016设置

可能有人会问为啥装的是sass,而下面选择的却是scss呢,这是因为

SCSS是最新版的SASS后缀

.启动WebStorm,打开已有项目,创建一个scss文件。

    这是在右上角会显示Add Watcher按钮,点击它,在弹出的对话框中,将Program的路径设为Ruby中scss.bat的路径。

也可以修改css的输出路径等等。

另外也可以设置全局的监听

  • 如果你想用SCSS,并且Ruby是安装在默认路径下,那么”File Type:“和”Program:“那里的设置就和我一样;

  • 如果是用SASS,那么你在新建时应该选择SASS的类型,”Program:“也应该选”sass.bat“。

 

    主要步骤已经完成,现在在我们修改scss文件的时候,webstorm会为我们自动生成对应的css文件,别忘记在html中引入这个css文件。

 

    测试修改ionic的主题颜色,在之前创建的scss文件中添加以下内容并运行。

  1. $positive: #00FF00;  
  2.   
  3. @import "../lib/ionic/scss/ionic";  

 

    就会发现之前使用蓝色positive的内容全部变成了绿色。

上面设置好后,在scss文件中随便写点东西看能生成不,对了,它可是自动生成css文件哦。

当然正确写完后,里面还有一个map文件

可以参考这里http://www.sass.hk/install-sass.html

© 著作权归作者所有

ziluopao

ziluopao

粉丝 10
博文 358
码字总数 201406
作品 0
武汉
私信 提问
加载中

评论(2)

ziluopao
ziluopao 博主

引用来自“红薯”的评论

图片裂了

多谢提醒
红薯
红薯
图片裂了
Webstorm功能详解及插件推荐

Web前端开发神器——Webstorm不用多介绍,强大的智能提示只是它的一个功能特性,它还具有许多有用的特性,比如版本控制、本地历史、即时模板等。Webstorm还内置了对 SASS、NodeJS、CoffeeScr...

达斯雷马
2016/12/27
8.3K
0
WebStorm 2017.2.2 发布,JavaScript 编辑器

WebStorm 2017.2.2 发布了。WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具。 主要更新内容: 在使用 webpack 时支持在 SCSS 和 Less 中进行输入 (WEB-23707 and WEB-25321) ...

达尔文
2017/08/16
1K
5
大家觉得WebStorm如何,分析分析····

不知道大家觉得WebStorm 怎么样,我个人还比较喜欢这个IDE···· 感觉WebStorm就是为前端而生,专门为 JS 开发做了很多优化,有许多令前端工程师眼前一亮的地方,图片宽高提示、 标签重构与...

愤怒的outman
2013/07/04
745
2
WebStorm 5 发布,JavaScript 集成开发工具

WebStorm 5 发布了,WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具。 该版本新特性和改进包括: 1. 支持 JSDoc注解 2. JavaScript 编辑器的各种改进 3. 支持 Jade 模板 4. 支...

oschina
2012/09/07
6.3K
11
WebStorm 7 发布,集成 Web 开发工具

WebStorm 7 发布,提供对最新的 TypeScript 0.9 的支持,包括泛型和枚举。改进对 CoffeeScript 和 Dart 的支持;新的 Less CSS 和 Sass 的结构化视图。详细介绍请看这里。 WebStorm 是 JetB...

打杂程序猿
2013/09/29
4.7K
6

没有更多内容

加载失败,请刷新页面

加载更多

redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
昨天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
昨天
24
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
昨天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部