首頁 > web前端 > html教學 > compass模块Helpers_html/css_WEB-ITnose

compass模块Helpers_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:32:32
原創
1203 人瀏覽過

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)

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

1 #{append-selector("p, div, span", ".bar")}{2  color: #ccc;3 }
登入後複製

编译为CSS:

1 p.bar, div.bar, span.bar {2  color: #ccc;3 }
登入後複製

Sprites:合图相关的helpers
URLs:

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板