Color Stops:在使用CSS3渐变属性生成图片的时候,有时候为了打造更丰富的渐变效果除了声明渐变线上的起始点和终止点的色值,还有声明一些中间点的色值,这些点我们就称之为Color Stops。一个色值加上当前点的位置。当我们省略点位置表示的时候Color Stops helper function 会自动帮我们计算输出这个点的位置。
Colors:用来亮化调整一个色值(用到的极少极少)
Constants:
Cross Browser:如果我们要为compass贡献跨浏览器的CSS新特性插件
Display Helpers:只有一个helper function,值为inline、block
Environment Helpers:获取当前编译的一些环境信息
例:  compass-env();  
返回当前compass的编译环境,函数执行的结果只有两种可能(`development` or `production`)一个是开发环境一个是生产环境。两种compass有些行为是不一样的,例如里面的注释信息可以在config.rb文件里修改:

line_comments = false;

查看编译环境:  @debug compass-env();  

在命令行中强制使用production环境

compass compile -e production --force

-e:用来指定我们的编译环境。
--force:让compass覆盖重写已有文件
可以再config.rb里指定编译环境:

environment = :production或者:development

Font Files:针对字体文件config.rb配置font路径:fonts_dir="fonts";
Image Dimensions:包含两个helpers,用来计算图片的宽和高
Inline Data:将文件转化成base64编码的格式内嵌在我们的CSS文件里
Math:一些数学计算的helper
Selectors:一个是选择器嵌套组合函数,一个是选择器叠加组合函数。
例: append-selector($selector, $to-append) 

一共有两个参数,作用就是将第二个参数叠加组合进第一个,用在选择器位置的。

 #{append-selector("p, div, span", ".bar")}{
color: #ccc;
}

编译为CSS:

 p.bar, div.bar, span.bar {
color: #ccc;
}

Sprites:合图相关的helpers
URLs:

compass模块----Helpers的更多相关文章

  1. compass模块

    Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...

  2. compass模块----Utilities----Sprites精灵图合图

    css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术.使用css雪碧图,能够减少页面的请求数.降低图片占用的字节,以此来达到提升页面访问速度的目的.但是它也有令人诟病的地方,就是 ...

  3. compass模块----Utilities

    引入Utilities: @import "compass/utilities"; 分别引入: @import "compass/utilities/color" ...

  4. Compass的误解与新发现

    最后个人感觉 Compass是 css世界的.NET 很久以前看到 Compass 误以为是css编译器,因为总是在看到如何安装Scss的文章里面看到的 知道最近不小心进入 Compass官网溜达,才 ...

  5. 初始化rails上的compass项目

    compass以外还有一个很实用的scss模块, _media-queries.scss 通过终端下载 curl -O https://raw.github.com/paranoida/sass-me ...

  6. Compass用法

    一.什么是Compass? Compass是Sass的工具库,Compass在SASS的基础上,封装了一系列有用的模块去补充Sass的功能,类似Javascript和jQuery 二.安装 之前已经写 ...

  7. sass与compass实战(读书笔记)

    // compass create myproject // compass compile // compass compile --force 重新编译未改动的 // compass compil ...

  8. Sass与Compress实战:第一章

    1.消除冗余代码的方式: ▶通过变量来复用属性值 例如,一段冗余的CSS代码: h1#brand { color : #1875e7 } #sidebar { background-color : # ...

  9. burp插件开发

    最近这几天在写burp的插件,有一些写burp插件的流程和误区想跟大家分享一下: 第一步,打开burpsuit,打开extender页面,并将burp中自带的api代码导出,方便后续的代码开发: 第二 ...

随机推荐

  1. python 下的数据结构与算法---3:python内建数据结构的方法及其时间复杂度

    目录 一:python内部数据类型分类 二:各数据结构 一:python内部数据类型分类 这里有个很重要的东西要先提醒注意一下:原子性数据类型和非原子性数据类型的区别 Python内部数据从某种形式上 ...

  2. playframework简单介绍

    官方网站: https://www.playframework.com/documentation/2.5.x/Home 简介 编辑 Play!是一个full-stack(全栈的)Java Web应用 ...

  3. atoi()、inet_addr()等函数 time.h文件

    1.atoi() 原型:int atoi(const char *nptr); 函数说明:参数nptr字符串,如果第一个非空格字符存在,是数字或者正负号则开始做类型转换,之后检测到非数字(包括结束符 ...

  4. java鼠标与键盘事件监听

    package cn.stat.p3.windowdemo; import java.awt.Button; import java.awt.FlowLayout; import java.awt.F ...

  5. static在类中的定义,和enum的用法

    class A { // static int a = 1;//错误,静态变量在类外定义 static int a; static const int b = 1;//如果是静态成员常量,则可以在类内 ...

  6. [Mugeda HTML5技术教程之8]添加行为

    上一节我们已经在新建的作品中添加了元素和动画,如果我们想要作品能够和用户互动,就需要给元素添加动作行为.在舞台上选中一个要添加动作的元素,在属性栏的动作下拉列表中选择一个动作.可选类别有链接.表单.行 ...

  7. js的一个稍微高级点的用法

    通过问题来说明: 1.一个系统中,要创造很多对象,为每个对象分配一个唯一的ID 1: var createObj = (function(){ 2: var i = 0; 3: return func ...

  8. Python新手学习基础之数据类型——变量

    关于Python的变量是这样描述的: 变量是存储在内存里的一个值,通过变量名,我们可以访问到该变量的值. 上面这几行代码中,price,count和sum都是变量,Python是动态类型语言,变量是不 ...

  9. python construct文档

    The Basics Fields Fields are the most fundamental unit of construction: they parse (read data from t ...

  10. java并发编程_建立概念

    在学习多线程编程时,相信大家会遇到好多概念类的东西,对于这些概念的不准确理解会导致后面越学越糊涂,现将学习过程中遇到的概念整理到这篇博客上,一来记录学习点滴,二来也加深理解,如果有理解不准确的地方,希 ...