许久没更新博客啦,这两天研究了下 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.jetbrains.com/phpstorm/help/working-with-sass-and-scss-in-compass-projects.html#d233223e455

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的更多相关文章

  1. opensuse13.2安装 sass和compass

    首先要先安装ruby 和 gem如果使用sudo zypper install ruby 安装后 当安装sass时会报错 /System/Library/Frameworks/Ruby.framewo ...

  2. win7下安装Sass和compass

    由于项目需要我们使用到sass来编译css文件.本人在win7下开发 由于国内安装sass遇到了一些困难,后来不得不网查询,后来终于解决了,这里介绍一下 1.要安装sass环境必须要先安装rubyIn ...

  3. window7 安装sass和compass

    官网有详细的介绍,但是安装时候还是出现了一些小问题. 首先下载Rudy,然后根据提示勾选加入环境变量,由于第一次使用,我就选择了" msys2 base installlation" ...

  4. Windows下安装sass和compass失败的解决办法

    sass依赖Ruby,所以,首先得先安装个Ruby sass的安装步骤: 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译 ...

  5. ruby安装sass和compass步骤

    依赖ruby,所以需要安装Ruby 如何安装Ruby呢?在windows下通过RubyInstaller来安装,安装过程中需要选择第二项 1.ruby -v 2.gem install sass (如 ...

  6. vue2.0以上版本安装sass(scss)

    一.首先说明sass和scss的区别. 1.异同:1)简言之可以理解scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力.语法形式上有些许不同,最主要的就是sass是靠缩进表 ...

  7. vue项目安装sass/scss

    vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...

  8. PHPStrom使用SASS,SCSS和Compass

    以前尝试 SASS 的时候写了一篇安装方法,大部分操作还是相同,下面补充一些内容主要是填坑,实在太TMD坑爹了. 参考这篇文章: http://blog.csdn.net/zhouzme/articl ...

  9. window 安装 sass compass 记录

    1.安装Ruby 安装sass 和compass 需要 Ruby 的环境,还区分xp 和win7-8 下版本区别 ruby 官网中文 ruby 官网英文 注意: xp: 下载 [xp不能下载包含64位 ...

随机推荐

  1. smartcn与IKanalyzer

    开源中文分词框架分词效果对比smartcn与IKanalyzer 项目背景: 某银行呼叫中心工单数据挖掘和分析项目,旨在利用文本计算实现热点聚焦和舆情分析. 一.引言: 中文分词一直是自然语言处理的一 ...

  2. Memcached安装配置最大使用内存

    Memcached安装配置最大使用内存 项目做了很多,虽然用memcached的项目也有很多.但是没有太关注安装memcached细节问题 最近做了一个项目,把很多东西都放到memcached缓存中, ...

  3. MSSQL数据库迁移到Oracle

    MSSQL数据库迁移到Oracle 最近要把一个MSSQL数据库迁移到Oracle上面,打算借助PowerDesigner这个软件来实现;今天简单研究一下这个软件的运用;把一步简单的操作步骤记录下来: ...

  4. DeviceIoControl方式 sys和exe通信

        常识: IRP:I/O Request Package  即输入输出请求包 exe和sys通信时,exe会发出I/O请求.操作系统会将I/O请求转化为相应的IRP数据, 不同类型传递到不同的d ...

  5. iOS手动管理内存

    虽然iOS已经有了ARC帮你自动管理内存,但在有些项目中必须采用手动的方式,而且在懂得手动管理内存的情况下会是自己的代码更加完善 众所周知,基于手动管理内存的情况下必然涉及到 relese  reta ...

  6. linux学习心得之vim/Cvim篇

    linux学习心得之vim/Cvim篇 在linux 下,vim 时一种最常见的编辑器,很多linux的发行版就自带了.我的是CentOS 6.3. 基本上Vim共分为3种模式,分别是一般模式,编辑模 ...

  7. 10169 - Urn-ball Probabilities !

    描述:有两个罐子,一个罐子里有一个红球,另一个罐子里有一个红球和一个白球,每次从两个罐子里各取一个球,然后在向每个罐子里各加一个白球,一次取到两个红球时就结束取球,求n次取球中至少一次为取球为红球的概 ...

  8. Android屏幕相关设置

    锁屏设置: 1. 初始值 : <integer name="def_screen_off_timeout">60000</integer> 2. 数据库/d ...

  9. KL25的AD采集操作

    飞思卡尔的KL25单片机AD做的是很不错的,SAR型能做到16位.不过数据手册就写得不怎么样了,简直可以说是坑爹,很难看懂.有的描述让人难以理解,你指望在别的地方对不理解的地方会有其他角度的描述,结果 ...

  10. 微信--高效解决token及授权用户openid的持久化处理办法

     摘要 关于微信开发的话题,例子确实已经有不少,但大部分都是人云亦云,很多小细节或者需要注意的地方却大多没有讲清楚,这令很多刚开始开发的人感觉大很迷茫.而我今天要说的话题,主要着眼于两个方面. 一:如 ...