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位 ...
随机推荐
- c#二进制、十进制、16进制之间的转换
//十进制转二进制 Console.WriteLine(Convert.ToString(69, 2)); //十进制转八进制 Console.WriteLine(Convert.ToString(6 ...
- 【GitHub】在Mac上配置/使用Github
以前一直听说过Github,但是自己一直不会用.最近不是太忙,于是想捣鼓捣鼓Github,没想到用了将近3个小时,才在Mac上配置成功. 首先简单介绍一下Git和Github 集中化的版本控制系统( ...
- String和StringBuilder的使用
如果有理解错误的地方希望有朋友能指出,谢谢! String是特殊的引用类型的,更像值类型,StringBuilder的是规规矩矩引用类型的. 首先看这样的对比图,Equals()方法是判断两个 ...
- DataSet,DataTable,XML格式互转
//// <summary> /// 将DataTable对象转换成XML字符串 /// </summary> /// <param name="dt" ...
- Oracle中如何删除某个用户下的所有数据的方法
win+R打开cmd 使用dba身份登录: sqlplus sys/sys@orcl as sysdba; 然后使用dba身份删除某个用户: drop user apptdm_9y cascade;
- Direct2D
Direct2D Direct2D教程III——几何(Geometry)对象 摘要: 目前博客园中成系列的Direct2D的教程有1.万一的 Direct2D 系列,用的是Delphi 20092.z ...
- 新手教程:wordpress博客安装图文教导
每一个建立博客的新朋友,当准备好域名和主机后,不知道怎么安装博客,我刚建立昆明SEO的时候,也费了很多时间,终于搭建成功,下面是我一步一步实战得来的总结. 第一步:域名解析,根据域名注册商不同,解析操 ...
- Entity Framework:如果允许模型处于非法状态,在某些场景下,记得清空DbContext
Entity Framework:如果允许模型处于非法状态,在某些场景下,记得清空DbContext 背景 之前写过两篇文章介绍模型的合法性: DDD:关于模型的合法性,Entity.IsValid( ...
- offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX
offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度 ...
- network重启失败原因
/etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE='eth0' eth0后面千万不能加空格之类的