sass结合compass的使用

Sass依赖Ruby,所以,首先得先安装个Ruby

Sass的安装步骤:

  1.安装Ruby的时候,勾上 Add Ruby executables to your PATH (添加环境变量)

  2.安装好Ruby之后,在开始菜单中找到Ruby,打开“Start Command Prompt With Ruby”

    命令行中输入

    gem install sass

    回车确认之后,等待一段时间。

    由于墙的原因,国内基本都是安装失败,继续3,如果安装成功,直接跳到4

  3.安装失败,采取下面的办法(淘宝镜像)

    命令行依次输入

    gem sources --remove https://rubygems.org/

    gem sources -a https://ruby.taobao.org

    gem sources -l

    确保只有 ruby.taobao.org,接着输入

    gem install sass

    等待一段时间,安装成功。

    ps:可以用sass -v 查看sass是否安装成功

  4.安装compass

    命令行输入

    gem install compass

    等待一段时间,安装成功。

    ps:可以用compass -v 查看compass是否安装成功

  5.使用sass

    项目中sass目录下创建两个文件

    base.scss和config.rb

    config.rb配置如下:

# 引入compass
require ‘compass/import-once/activate‘
# 配置路径
http_path = ‘/‘
css_dir = ‘../styles‘
sass_dir = ‘../sass‘
sourcemap = true
cache = false

    ps:配置信息注意路径

  6.使用compass

    在当前目录下(sass目录),Shift +  鼠标右键,选择 "在此处打开命令窗口(W)"

    输入compass watch

    在项目中styles目录下自动创建了两个文件 base.css 和 base.css.map

    当你修改 base.scss文件并保存的时候,base.css文件也相应地改变了

  以上,over

时间: 2024-07-28 16:31:55

sass结合compass的使用的相关文章

邂逅Sass和Compass之Compass篇

本文主要讲解Compass的内容,众所周知Compass是Sass的工具库,如果对Sass不甚了解的同学可以移步 邂逅Sass和Compass之Sass篇 Sass本身只是一个"CSS预处理器",Compass在它的基础上,封装了一系列的模块和模板,补充了Sass的功能. 1.Compass的安装 和Sass一样,Compass也是用Ruby语言开发的,所以在安装Sass之前必须先安装Ruby,安装Ruby的过程就不再赘述,安装好Ruby后可以直接在命令行输入下面的命令 sudo ge

compass reset和layout [Sass和compass学习笔记]

reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset" layout 有几个常见的布局函数,我觉得挺管用,其他的都是用来写组建非常常用的 Sticky Footer 该模块提供了需要布置你的页脚,它坚持到页面底部的工具. 这个模块主要用于布局页脚,可以让页脚固定在页面的最底部,是一个比较常用的功能,而且有配套的html代码 引用方法 @import

分享15款很实用的 Sass 和 Compass 工具

Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易. 在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScri

[已读]Sass与Compass实战

介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而grunt和FIS貌似都有自己的图片精灵方案(好吧,我都没用过)?所以,这本书也没什么必要看了→ →

揭开Sass和Compass的神秘面纱

可能之前你像我一样,对Sass和Compass毫无所知,好一点儿的可能知道它们是用来作为CSS预处理的.那么,今天请跟我一起学习下Sass和Compass的一些基础知识,包括它们是什么.如何安装.为什么要使用.基础语法等一些基本知识.需要说明的是我也仅仅只是刚刚接触Sass和Compass,一些高级用法等将不再本文的讨论范围之内.接触一周以后发现Sass和Compass的用处非常大,也打算今后在项目中尝试引进并应用起来.希望读完以后,你跟我一样对Sass和Compass给你带来的东西非常开心,也

compass General 常用api学习[Sass和compass学习笔记]

compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix 的源码发现对与高版本的浏览器其实已经可以不用了 ? 1 2 3 4 @mixin clearfix {   overflow: hidden;   @include has-layout; } 用overflow 就可以了

rub、sass和compass的安装

长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境变量: 安装完成后打开命令行,输入 ruby -v 命令,如果能看到版本号说明安装成功了: ========================================= [sass安装] ruby自带一个分叫做RubyGems的系统,用来安装基于ruby的软件.用gem命令我们可以轻松的安装s

opensuse13.2安装 sass和compass

首先要先安装ruby 和 gem如果使用sudo zypper install ruby 安装后 当安装sass时会报错 /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby  extconf.rb  mkmf.rb can't find header files for ruby at  /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/

安装Ruby、Sass与Compass

sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装.安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量. 安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby. 安装完成后需测试安装有没有成功,在命令行中输入:ruby -v 如

【CSS】Windows下安装sass和compass

因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网下载最新版ruby安装包http://rubyinstaller.org/downloads/ 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境: Sass和compass安装: 安装完ruby后,在开始菜单找到刚才我们安装的ruby,打开Start Command Prompt with Ruby