`
yutiansky
  • 浏览: 200790 次
  • 性别: Icon_minigender_1
  • 来自: 本溪
社区版块
存档分类
最新评论

Compass/Sass编译ExtJS4.0

 
阅读更多

◆環境

 Ruby - 1.9.3

 Compass - 0.11.7

 Sass - 3.1.1

 

◆手順

 ・Rubyをインストール

  ⇒http://rubyforge.org/frs/download.php/75465/rubyinstaller-1.9.3-p0.exe


  ⇒インストールする時、PATHに設定する。


 

 

 ・Compassをインストール

  ⇒コマンドラインで gem を利用し、compassをインストール

gem install --http-proxy http://proxy.fxis.co.jp:8080 compass

 

 

 

  ⇒バージョンを確認する。

 

C:\Users\dnc>compass -v

Compass 0.11.7 (Antares)
Copyright (c) 2008-2012 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
 
C:\Users\dnc>sass -v

Sass 3.1.12 (Brainy Betty)

 

 

  ⇒Sass v 3.1.12をアンインストールし、Sass v 3.1.1をインストールする。(ExtJS4.0は、Sass v 3.1.1をサポートするので)

 

 

 

C:\Users\dnc>gem uninstall sass -v 3.1.12

You have requested to uninstall the gem:
        sass-3.1.12
compass-0.11.7 depends on [sass (~> 3.1)]
If you remove this gems, one or more dependencies will not be met.
Continue with Uninstall? [Yn]  y

Remove executables:
        sass, sass-convert, scss

in addition to the gem? [Yn]  y

Removing sass
Removing sass-convert
Removing scss
Successfully uninstalled sass-3.1.12
 

 

C:\Users\dnc>gem install --http-proxy http://proxy.fxis.co.jp:8080 sass -v 3.1.1

Fetching: sass-3.1.1.gem (100%)
Successfully installed sass-3.1.1
1 gem installed
Installing ri documentation for sass-3.1.1...
Installing RDoc documentation for sass-3.1.1...

C:\Users\dnc>sass -v

Sass 3.1.1 (Brainy Betty)
 

 ・ExtJSをビルド

  ⇒http://cdn.sencha.io/ext-4.0.7-gpl.zip


 

  ⇒「$ExtJS展開先フォルダ/resources/sass」フォルダで、「compass compile」コマンドを実行し、ビルドする。

  ⇒ビルドの結果は、「$ExtJS展開先フォルダ/resources/css」フォルダにある。


 

 

//END

 

  • 大小: 83.9 KB
  • 大小: 66.4 KB
  • 大小: 68.4 KB
  • 大小: 131 KB
  • 大小: 73.2 KB
分享到:
评论

相关推荐

    extjs 开发工具

    - Sencha Cmd是EXTJS的主要命令行工具,用于自动化EXTJS项目构建过程,包括创建应用、管理依赖、编译SASS样式、压缩JavaScript代码等。 - 版本4.0.2.67是Sencha Cmd的一个早期版本,它支持EXTJS的早期版本,帮助...

    EXTJS主题自定义

    EXTJS 4.2引入了一个主题化系统,这个系统基于SASS(Syntactically Awesome Style Sheets)和COMPASS,这两个都是CSS预处理器。SASS允许在样式表中使用变量、嵌套规则、混合(mixins)等功能,使主题定制变得更加...

    ExtJS自定义主题(theme)样式详解

    theme主题ExtJs4引入了全新的主题系统,采用Sass和Compass技术,提供了标准的主题模板,通过对主题模板的简单定制就可以创造出丰富多彩的各种主题。Sass和Compass概述SassSass样式表语言是CSS的一个扩展,为CSS提供...

    extstyle_脚本实例_

    4. **编译和测试**:使用Compass的编译功能,将SASS文件转换为CSS,并应用到EXTJS应用中。之后,可以在浏览器中查看效果,进行调整和优化。 5. **打包和部署**:完成样式定制后,需要将其打包成CSS文件,与EXTJS的...

    extjs改变字体大小和换肤

    4. **编译主题**:使用 SASS 编译器(如 Compass 或 Node-Sass)将 SASS 文件编译为 CSS,然后将其应用到你的 HTML 页面中。 5. **动态换肤**:如果你需要在运行时改变皮肤,可以利用 ExtJS 的 `Ext.util.CSS` 类。...

    利剑Extjs5.0

    - **第三方工具集成**:内置Compass、Sass和Ant等工具,增强开发能力。 ##### 2. 安装与配置 - **Java 环境**:Sencha Cmd 需要 Java 1.7 或更高版本的支持。可以从Oracle官网下载并安装合适版本的Java。 - **...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...

Global site tag (gtag.js) - Google Analytics