compass模块----Helpers

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:

时间: 2024-10-28 14:17:14

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

compass模块

Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/layout" 只有这两个模块是需要明确 指定引入的@import "compass"默认包含了其他五大模块却不包含resrt,layout 其他四个功能模块和Browser support模块CSS3:跨浏览器的CSS3能力Helpers:内含一系列的函数,跟SASS的函数列表

compass模块----Utilities

引入Utilities: @import "compass/utilities"; 分别引入: @import "compass/utilities/color"; Color:颜色相关的工具集合1.Color Brightness用来计算一个值的亮度 1 @debug brightness(#000); 2 @debug brightness(#ccc); 3 @debug brightness(#fff); 在命令行会输出颜色的亮度.2.Color Contra

sass与compass实战(读书笔记)

// compass create myproject // compass compile // compass compile --force 重新编译未改动的 // compass compile --output-style compressed // compass compile --output-style compressed --force // compass watch // compass模块:reset css3 layout typography utilities

burp插件开发

最近这几天在写burp的插件,有一些写burp插件的流程和误区想跟大家分享一下: 第一步,打开burpsuit,打开extender页面,并将burp中自带的api代码导出,方便后续的代码开发: 第二步,使用idea创建一个java项目并将上一步导出的api代码导入到该项目中: 第三步,在导入的项目中创建一个叫BurpExtender.java的类并Implements  IBurpExtender这个类,注意,必须叫这个名字,否则burp会识别不到此插件的存在,如上图: 第四步,在BurpEx

Sass与Compress实战:第一章

1.消除冗余代码的方式: ?通过变量来复用属性值 例如,一段冗余的CSS代码: h1#brand { color : #1875e7 } #sidebar { background-color : #1875e7 } 使用Sass,把属性值赋给变量,然后在一个地方管理散落在各处的属性值.几乎任意属性值都可以赋给变量: $company-blue : #1875e7; h1#brand{ color : $company-blue; } #sidebar{ background-color : $

WEB+DB PRESS 中文版 02

这篇是计算机类的优质预售推荐<WEB+DB PRESS 中文版 02>. 智能手机测试+Amazon Web Services+SassCompass实战,腾讯.百度.淘宝.美团.豆瓣前后端工程师鼎力推荐. 编辑推荐 腾讯.百度.淘宝.美团.豆瓣前后端工程师鼎力推荐 旨在帮助程序员更实时.深入地了解前沿技术,扩大视野,提升技能 内容侧重Web开发相关领域的研究与技术分享,并结合未来趋势对当前的技术作新解读 智能手机测试最前沿 应用.浏览器.服务器端完全自动化 Amazon Web Servic

邂逅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 生成雪碧图

使用 Compass 创建一个项目 要在一个新项目中使用 Compass,可以打开命令行工具并输入如下指令 compass create my-project 如果 my-project 目录不存在,上述命令会创建一个叫做 my-project 的目录,并在其中添加以下文件: 如果你没有为compass create命令传递一个目录参数,它将使用你当前所在的目录. 在config.rb文件中,你可以对Compass的一些配置进行修改,例如资源位置和压缩程度.sass目录包含了一些初始的样式表,你

Python—模块

模块?引用某大大的话就是“模块,用一坨代码实现了某个功能的代码集合.” 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个复杂的功能来,可能需要多个函数才能完成(函数又可以在不同的.py文件中),n个 .py 文件组成的代码集合就称为模块. 例如:os是系统相关的模块,time是时间相关的模块. 模块分为三种: ·自定义模块: ·内置标准模块(又称标准库): ·开源模块. 1.自定义模块: 1 #!/usr/bin/env