前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上看提示是找不到.sass-cache文件夹下面的一个文件夹(父级目录名称中带有特殊字符很容易重现),然后几经纠结发现可以不开启或关闭sass的缓存功能.也就是修改config.rb的配置节点即可,如下图所示: 1.如果cache设置为true,请设置cahce_path的路径(目录层级尽量少).…

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

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

来源 http://snugug.github.io/RWD-with-Sass-Compass/#/ 1 安装 COMPASS 扩展 安装 方式 gem 'extension', '~>X.Y.Z' 命令行安装 require '{extension}' @import '{extension}'; sass 文件导入   扩展1 http://breakpoint-sass.com/ 扩展2 http://singularity.gs/ 3 盒子模型 @import 'compass'; /…

demo 源码 地址 https://github.com/qqqzhch/webfans compass  的表格提供了集中常见样式 表格边框 outer-table-borders($width, $color)  控制外边边框的尺寸和颜色 inner-table-borders($width, $color) 控制里面边框的尺寸和颜色 例如 .table1{ table { @include inner-table-borders(1px, #7a98c6); @include outer…

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

最基本的api 是对比色,对与我这种菜鸟来说,没有什么比在一个背景色下 用什么颜色的文字坑蛋疼的事情了,这个工具可以帮助大家很好解决这个问题 api 地址 http://compass-style.org/reference/compass/utilities/color/contrast/ 要是真的能实现任何一个背景色 都可以选出来一个对比色 那就好了, 不过compass 并没有实现这个功能,而是先定义了一个淡色和深色,然后根据你传入的颜色判断,是给你返回深色好呢,还是返回淡色好呢 ,这个a…

demo 源码 地址 https://github.com/qqqzhch/webfans 什么是雪碧图? CSS雪碧 即CSS Sprites,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分. compass 中为我们提供了简洁的工具和方法生成雪碧图 API 在这里 http://compass-style.org/reference/compass/utilities/sprites/ 雪碧图 只须…

demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化css,可以将写程序的各种理论融入其中,打造NB的产品 首先 安装 ruby http://rubyinstaller.org/downloads/ 注意 建议安装ruby1.93 这个版本 最新版的ruby不靠谱 我在sass和Sencha Touch里面遭遇过倒霉的问题 安装了ruby 还要添加ru…

自从发现可编程的css语法 Sass和基于Sass的css库compass 一个给我的感觉像c# 另外一个给我的感觉像.NET Framework,一切都为了提升开发效率和降低开发大型web的门槛. 当web开发趋势迈进WebApi+Js 时代,compass和Sass 会不会成为web开发的标配?这个得实际开发检验下. 预处理 当web站点变的越来越复杂. 先是html 复杂了---->动态编程语言解决方案 js复杂了--->jq和dojo 等解决方案 css现在也变的复杂了,但是css本身…

最后个人感觉 Compass是 css世界的.NET 很久以前看到 Compass 误以为是css编译器,因为总是在看到如何安装Scss的文章里面看到的 知道最近不小心进入 Compass官网溜达,才发现 The CSS3 module provides cross-browser mixins for CSS properties introduced in CSS3, for example border-radius and text-shadow. What rendering engi…

由于项目需要我们使用到sass来编译css文件.本人在win7下开发 由于国内安装sass遇到了一些困难,后来不得不网查询,后来终于解决了,这里介绍一下 1.要安装sass环境必须要先安装rubyInstaller 网址:http://rubyinstaller.org/downloads/ 可以选择最新的 下载直接安装. 2.晚上很多资料说直接只能 gem install sass 报错,反正就是感觉链接不上过完的网站. 3.没有办法只能继续晚上搜索,后来找到一个,用国内的淘宝网站安装 gem…

1.初始化项目 compass create test(项目名称),会在当前目录下创建test子目录,test的子目录下有config.gb文件,sass和stylesheets文件夹. 2.编写sass代码 3.编译sass 编译的几种命令: compass compile:将sass子目录中的scss文件,编译成css文件,保存在stylesheets子目录中. compass compile --output-style compressed:压缩文件并删除注释 compass compi…

本文转载自: 使用compass自动合并css雪碧图(css sprite)…

1. compass compile path/to/project//编译scss compass watch path/to/project//自动监视文件变化 2.mixin @include @extend functions mixin其实就相当于函数, 而且mixin支持参数和带有默认值的参数,使用时只需@include name_mixin即可 @extend可以用来继承,extend不可以用来继承一个选择器序列 %error来代替 .error来书写一个仅用来继承的样式块 在sa…

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

SASS是Syntactically Awesome Stylesheete Sass的缩写,它是css的一个开发工具,提供了很多便利和简单的语法,让css看起来更像是一门语言,这种特性也被称为“css预编译”.它的主要设计思想是让我们可以按照编程的思路编写自己的样式,然后通过“编译器”生成我们所需要的css文件. 当然,SASS只是css预编译工具中的一种,类似的工具还有Less.stylus等,SASS起初语法采用缩进排列形式,但对于设计师来说既不直观还容易出现错误.在吸取了Less的一些特…

/*1.打开项目根目录下的 config.rb 文件 2.搜索 line_comments 关键词,默认应该是 # line_comments = false 3.去掉前面的 #,保存 config.rb 4.重新执行 compass compile*/ /*请注意空格 $i:$i-1 和 $i: $i -1 与 $i:$i - 1 三个结果不同 */ /*定义变量 并使用!default*/ $fontSize: 13px; $fontSize: 18px !default; /*嵌套Ul*/…

导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,Sass则是其中的佼佼者. 什么是Sass Sass是最成熟.稳定.强大.专业的CSS扩展语言(官方解释).直白点,Sass就是一个非常好用的CSS预处理器,为css引入部分编程语言的特性. Sass在现阶段,有两种编码的语法,一个是兼容CSS语法的Scss格式文件,一个是Haml.Ruby类似语法的…

1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myproject中新建一个images文件夹,将需要转换的图片放入images新建的share文件中 并在scss文件中写入: @import "compass/utilities/sprites"; @import "share/*.png"; @include all-…

1. 先搭建环境,下载node.js,rubyinstaller,安装, 安装rubyinstaller时,要选上include system path,这样就会自动将node.js执行添加到windows系统环境变量,免去手动创建烦恼.node.js就点下一步安装就行了 2. win+R cmd 再运行  gem install bootstrap-sass 3.创建一个项目 cd 进入到你所在的项目存放目录,命令行窗口运行 compass creat XXXXX(项目名称)这样就创建了一个项…

最近开始学习并且使用,发现使用它写起css来真的是各种爽 安装sass,compass sass是依赖于ruby的,必须先安装Ruby,点击下载 下载完ruby之后,使用命令行安装sass        gem install sass 使用命令,sass-v    compass-v   查看是否安装成功 出现上图情况则为安装成功 sass的使用及优点 sass官网: http://www.w3cplus.com/sassguide/ api文档   http://sass-lang.com/…

1.安装Ruby 安装sass 和compass 需要 Ruby 的环境,还区分xp 和win7-8 下版本区别 ruby 官网中文 ruby 官网英文 注意: xp: 下载 [xp不能下载包含64位的版本,我是下载32位安装成功,但调用gem 命令直接报错,不建议使用 包含有64 区分的版本. Ruby 1.9.3-p551 win7-8 : 2.0以上或者跟xp的一样都可以. Ruby 2.1.5 Ruby 2.1.5 (x64) Ruby 2.0.0-p598 Ruby 2.0.0-p59…

1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为*.png时,它会假定将这个目录下的所有.png图片制作成一张雪碧图 你也可以通过一定的规则让它按照自己需要的图片以及排版来生成相应的雪碧图,设置如下: 第一个框框里面的设置是把所有color文件夹下的图片合成一张大图,同事会编译出对应的css文件. 第二个框框里面的设置是把color文件夹下的图片…

Compass是一个强大的Sass框架,他的设计目标是顺畅.搞笑地装扮互联网,使用它的人可以写出可维护性更高的样式表. Compass由三个主要部分组成:混混合器和实用工具类库,能够集成到应用开发环境中的开发系统,以及一个用于构建框架各扩展的平台.…

转自:http://www.w3cplus.com/preprocessor/beginner/getting-started-with-sass-and-compass.html 如果你的朋友.同事或网友有跟你说过Sass或者Compass,或者两者,那太棒了.现在怎么办?在这篇初学者指南中,我首先带领大家使用Sass和Compass.我将告诉大家如何完成安装和创建一个测试项目.怎么使用Sass编译CSS,甚至还会告诉大家有关于Sass中的"mixin". 安装Sass和Compas…

由于最近没什么时间好好写博文,我把用sass做雪碧图的关键点贴出来方便自己记忆: config.rb注释 # Set this to the root of your project when deployed: #配置服务器路径 http_path = "http//:www.baidu.com/" #配置css sass images javascripts路径 css_dir = "public/stylesheets" sass_dir = "pu…

注:配合查看:Sass 为什么使用Sass和Compass? 1.减少重复工作,加快开发进度 2.使用变量,便于记忆,变量使用$符号开头 3.自动转换RGBA颜色值 .color { color: $green; color: rgba($green, .9); } Sass会进行自动转换 4.Compass带有大量混合宏,可以忘记浏览器前缀,节省大量时间 .rounded { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-bo…

compass和sass文章列表:http://182.92.240.72/tag/compass/ compass实战grunt: http://wrox.cn/article/2000491/ http://ju.outofmemory.cn/entry/73492 http://ju.outofmemory.cn/entry/75413 compass-demo/Gruntfile.js: https://github.com/minghe/compass-demo/blob/master…

遇见好的文章,笔者也会转载.但是正所谓好记性不如烂笔头,单纯的拿来主义也不如自己的亲自实践.所以每次需要转载的文章,我都会自己敲一遍,中间加入一些自己的思考. 这篇文章转载自:http://www.hongkiat.com/blog/compass-image-sprite/ 作者Thoriq Firdaus 译者zEx 前端性能优化,一直是前端开发中非常重要的一环,而其中静态资源特别是图片的优化,又占据了很大的比重.图片优化的方法有很多种,其中非常基本而常用的,就是雪碧图. CSS雪碧图就是将…