zoukankan      html  css  js  c++  java
  • SASS、COMPASS 安装指南

    如果你还不知道 SASS 和 COMPASS 是什么,可以参看http://sass-lang.com

    http://compass-style.org,近期可能会更新一篇介绍性的入门教程,但

    是本文只是安装使用教程,不包含介绍信息。



    安装

    安装 Ruby

    SASS 需要运行在 Ruby 下,进入这个页面,下载最新版本的 

    rubyinstaller,一路 Next 完成安装。


    安装 SASS 和 COMPASS

    在开始菜单中找到 “Ruby 1.9.3-p0 -> Start Command Prompt with Ruby”并运行。

    输入以下命令

    gem install compass
    

      该命令会自动下载和安装 COMPASS 及其依赖模块(包括 SASS)。

    使用

    创建一个 COMPASS 项目


    在命令行中切换到你需要创建项目的目录,运行:

    compass create <projectname>
    

      

    这个命令会创建一个包含一系列文件的目录,其中最重要的是配置文件 

    config.rb,其他文件如果你不需要都可以删除。


    在 config.rb 中你可以修改 SASS 和 CSS 的目录及其它一些基础设置。

    实时编译 SASS 

    文件在命令行下切换到项目目录,运行:

    compass watch
    

      COMPASS 将会实时监控 SASS 目录的文件变化,只要你一保存文件,立即

    将相应文件编译为 CSS 文件。


    让 Firebug 里显示 SASS 行号

    既然现在用 SASS 来开发,我们就需要浏览器开发工具中显示样式对应的 

    SASS 行号而不是 CSS 行号了。


    如果你使用 Firebug 可以安装 FireSass 来解决这个问题。

    首先修改 SASS 的配置文件让其在 CSS 文件中输出调试信息,打开项目

    目录下的 config.rb,添加一行并保存

    sass_options = {:debug_info => true}
    

      如果你在 watch,结束掉重新运行配置的修改才会生效。

    然后下载安装 FireSass后就能看到 Sass 行号了。

    $ gem install compass
    以前装的时候从来没遇到过问题,可今天却始终不成功,开始以为是权限问题,加上 sudo 之后仍然不行,总是按下回车之后就没有反应了,就以为是被墙了,挂上 VPN 却依然不行。
    赶快 Google 一把,发现两个问题:

    • gem 确实被墙了,可以使用淘宝的镜像
    • 使用 $ gem install compass -V,可以输入完整的日志,就不至于长时间没有反应的时候,完全不知道发生了什么

    如果仅仅是被墙的话,应该用 VPN 是能安装的,但从日志看,被 302 重定向了好多次,之后就失败了。无奈只好添加了淘宝镜像,终于顺利安装成功。

  • 相关阅读:
    职业的选择
    事务的隔离性理解
    浅谈CSS和JQuery实现鼠标悬浮图片放大效果
    jvm 类加载器
    jvm 类加载
    Spring 启动 Bean加载流程
    优雅的博客园客户端发布Forms版啦。
    Xamarin Forms中WebView的自适应高度
    2017回顾与2018目标
    优雅的博客园Android客户端
  • 原文地址:https://www.cnblogs.com/xupeiyu/p/3616043.html
Copyright © 2011-2022 走看看