PHPStorm 安装 SASS、SCSS + Compass
许久没更新博客啦,这两天研究了下 SASS 和 LESS ,最终选了 SASS,因为相对比较成熟些吧,试了很多坑之后,终于成功了,下面上步骤:
1. 安装 PHPStorm 的 SASS 插件
好像是自带了该插件的,如果没有的话,就打开 setting -> plugins 自己安装一个吧,就不多说了
2. 安装 Ruby
Windows 版本下载地址:
http://rubyinstaller.org/downloads/
Linux or Mac 地址:
http://ruby.taobao.org/mirrors/ruby/
我用的是 windows 版最新的 2.2.1 版本
配置好系统环境,将ruby 的bin目录绝对路径添加到 path 环境变量中,windows版安装的时候可以勾选自动添加
可参考这片博文:
http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html
3. 安装 SASS 和 Compass
因为天艹局域网的关系,你可能需要重新设置下更新源地址:
命令行下执行:
gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
可以参考下这篇文章:
http://devework.com/sass-compass.html
下面执行安装啦:
gem install sass
gem install compass
4. 新建 Compass + SASS 项目
创建一个项目根目录,cd 进入后,执行:
compass create your_project_name
会生成三个文件夹和一个 config.rb 文件
在 sass 目录下存放我们自己的样式代码,编译后会自动生成到 stylesheets 目录下,当然你也可以自定义生成地址
5. 配置 Compass 编译环境
打开 setting -> Language & Framework 下面有个 Compass
勾选 Enable 后 设置你自己安装的 ruby comopass.bat 路径 和 当前项目的 config.rb 文件路径
6. 配置 SASS 环境
打开 setting -> Tools -> FileWatchers
点击右侧绿色的加号 添加一个 compass scss 项目,配置如下
应该使用默认的配置就可以的了。
working directory 就是你 刚才用 compass create 的项目目录(我这里只是文件夹名字是 less 不要误解了啊)
7. 开始写代码了
@import "compass/reset";
@import "compass"; $fc: #FFF;
$fs: 16px; body { background-color: #555; } #panel {
color: $fc;
font-size: $fs;
.title {
padding: 1em;
background-color: #888;
color: $fc;
}
.item {
float: left;
width: 49%;
min-height: 3em;
padding: 1em;
margin: 1.5%;
border: solid 1px $fc;
box-sizing: border-box;
background-color: #999;
@include box-shadow(1px 2px 3px #000);
}
}
一个简单的测试代码,每次更改后,会自动编译,但不会自动生成 css 文件的,你可以在命令行下进行生成
命令如下:
compass compile
或者强制编译更新
compass compile --force
然后你再看看 stylesheets 下面就多出一个对应名称的 css 文件
这个代码会有很大一堆我就不上代码了,包含了 reset 的样式和你自己的样式 还有注释都保留了的,因为这是开发环境,
如果是正式环境,需要进行压缩
下面来改下配置,进入正式环境,将生成的代码压缩成一行
打开项目根目录下的 config.rb 文件
添加两行代码:
environment = :development
output_style = (environment == :production) ? :compressed : :expanded
当 environment 为 :production 时生成的 css 文件将会是压缩成一行的样子了。
好了 全部完成,现在开始快速开发你自己的 css 吧
如果你只需要用 SCSS 的话,在第6步你可以新建 SCSS 配置,下面是配置截图
下面贴一些其他参考的文章地址:
http://www.ruanyifeng.com/blog/2012/11/compass.html
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
http://compass-style.org/install/
PHPStorm 安装 SASS、SCSS + Compass的更多相关文章
- opensuse13.2安装 sass和compass
首先要先安装ruby 和 gem如果使用sudo zypper install ruby 安装后 当安装sass时会报错 /System/Library/Frameworks/Ruby.framewo ...
- win7下安装Sass和compass
由于项目需要我们使用到sass来编译css文件.本人在win7下开发 由于国内安装sass遇到了一些困难,后来不得不网查询,后来终于解决了,这里介绍一下 1.要安装sass环境必须要先安装rubyIn ...
- window7 安装sass和compass
官网有详细的介绍,但是安装时候还是出现了一些小问题. 首先下载Rudy,然后根据提示勾选加入环境变量,由于第一次使用,我就选择了" msys2 base installlation" ...
- Windows下安装sass和compass失败的解决办法
sass依赖Ruby,所以,首先得先安装个Ruby sass的安装步骤: 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译 ...
- ruby安装sass和compass步骤
依赖ruby,所以需要安装Ruby 如何安装Ruby呢?在windows下通过RubyInstaller来安装,安装过程中需要选择第二项 1.ruby -v 2.gem install sass (如 ...
- vue2.0以上版本安装sass(scss)
一.首先说明sass和scss的区别. 1.异同:1)简言之可以理解scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力.语法形式上有些许不同,最主要的就是sass是靠缩进表 ...
- vue项目安装sass/scss
vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...
- PHPStrom使用SASS,SCSS和Compass
以前尝试 SASS 的时候写了一篇安装方法,大部分操作还是相同,下面补充一些内容主要是填坑,实在太TMD坑爹了. 参考这篇文章: http://blog.csdn.net/zhouzme/articl ...
- window 安装 sass compass 记录
1.安装Ruby 安装sass 和compass 需要 Ruby 的环境,还区分xp 和win7-8 下版本区别 ruby 官网中文 ruby 官网英文 注意: xp: 下载 [xp不能下载包含64位 ...
随机推荐
- smartcn与IKanalyzer
开源中文分词框架分词效果对比smartcn与IKanalyzer 项目背景: 某银行呼叫中心工单数据挖掘和分析项目,旨在利用文本计算实现热点聚焦和舆情分析. 一.引言: 中文分词一直是自然语言处理的一 ...
- Memcached安装配置最大使用内存
Memcached安装配置最大使用内存 项目做了很多,虽然用memcached的项目也有很多.但是没有太关注安装memcached细节问题 最近做了一个项目,把很多东西都放到memcached缓存中, ...
- MSSQL数据库迁移到Oracle
MSSQL数据库迁移到Oracle 最近要把一个MSSQL数据库迁移到Oracle上面,打算借助PowerDesigner这个软件来实现;今天简单研究一下这个软件的运用;把一步简单的操作步骤记录下来: ...
- DeviceIoControl方式 sys和exe通信
常识: IRP:I/O Request Package 即输入输出请求包 exe和sys通信时,exe会发出I/O请求.操作系统会将I/O请求转化为相应的IRP数据, 不同类型传递到不同的d ...
- iOS手动管理内存
虽然iOS已经有了ARC帮你自动管理内存,但在有些项目中必须采用手动的方式,而且在懂得手动管理内存的情况下会是自己的代码更加完善 众所周知,基于手动管理内存的情况下必然涉及到 relese reta ...
- linux学习心得之vim/Cvim篇
linux学习心得之vim/Cvim篇 在linux 下,vim 时一种最常见的编辑器,很多linux的发行版就自带了.我的是CentOS 6.3. 基本上Vim共分为3种模式,分别是一般模式,编辑模 ...
- 10169 - Urn-ball Probabilities !
描述:有两个罐子,一个罐子里有一个红球,另一个罐子里有一个红球和一个白球,每次从两个罐子里各取一个球,然后在向每个罐子里各加一个白球,一次取到两个红球时就结束取球,求n次取球中至少一次为取球为红球的概 ...
- Android屏幕相关设置
锁屏设置: 1. 初始值 : <integer name="def_screen_off_timeout">60000</integer> 2. 数据库/d ...
- KL25的AD采集操作
飞思卡尔的KL25单片机AD做的是很不错的,SAR型能做到16位.不过数据手册就写得不怎么样了,简直可以说是坑爹,很难看懂.有的描述让人难以理解,你指望在别的地方对不理解的地方会有其他角度的描述,结果 ...
- 微信--高效解决token及授权用户openid的持久化处理办法
摘要 关于微信开发的话题,例子确实已经有不少,但大部分都是人云亦云,很多小细节或者需要注意的地方却大多没有讲清楚,这令很多刚开始开发的人感觉大很迷茫.而我今天要说的话题,主要着眼于两个方面. 一:如 ...