compass模块_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

compass模块_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:32 AM

Compass核心模块
Reset ：重置CSS模块

 @import "compass/reset"

登录后复制

Layout ：页面布局的控制能力

@import "compass/layout"

登录后复制

只有这两个模块是需要明确指定引入的
@import "compass"默认包含了其他五大模块却不包含resrt,layout

其他四个功能模块和Browser support模块
CSS3：跨浏览器的CSS3能力
Helpers：内含一系列的函数，跟SASS的函数列表很像，比较少用，功能确实丰富强大
Typography：修饰我们的文本样式，垂直韵律
Utilities：没有办法放到其他模块的内容都可以放到这个模块里。辅助工具类模块，helpers都是函数，utilities多是mixin
Browser：配置compass默认支持哪些浏览器。对于特定浏览器默认支持到哪个版本。一个修改将影响六个模块的输出。不同的浏览器做不同的适配。

Compass核心模块概述&Reset模块

compass-normalize插件命令安装：

gem install compass-normalize

登录后复制

引入compass-normalize插件
config.rb文件里：

require 'compass-normalize'

登录后复制

扩展：
config.rb文件里的import-once解决了多次@import同一个文件，compass也只会插入一次被引入问件。但使用了import-once万一遇到真的遇到一个文件必须被引入两次的情况，可以通过被引入文件的文件名的后面加一个感叹号！方式来告知compass这里需要重复引入。@import "compass/reset!"

在SCSS文件中引用normalize

@import "normalize";

登录后复制

Normalize核心模块：
base：用来统一HTML和body标签的字体，文字大小调整、边距等等。
html5：统一html5中新增的元素的展现形式
links：统一a便签的样式修饰，去掉hover和active时候的边线。
typography：统一b、strong、sub、sup等段落文本的样式修饰。
embeds：统一img，svg等标签的样式修饰（比如统一img标签的border为0 ）
groups：统一figure、pre、code等标签的样式
forms：统一form相关的button、input、等标签的样式
tables：统一table相关的table、td、th等标签的样式

引入(通过子路径的方式)：

@import "normalize-version"//--在引入子类之前需要引入normalize-version@import "normalize/base"

登录后复制

@import "compass/reset/untlities"; .....引入这些mixin的集合

@import "compass/reset"; 其实就是引入了compass/reset/untlities，然后调用了其中的一个global-reset();的mixin集合。

@import "compass/reset/untlities";include global-reset();

登录后复制

reset Utilities核心mixin
http://compass-style.org/reference/compass/reset/utilities/
nested-reset：只用于重置我们页面上的某个选择器下的所有元素。
例如重置reset-sec的所有元素：

.reset-sec{ @include nested-reset;}

登录后复制

Layout模块（使用率最低的模块）
layout模块下面又细分3个核心mixin模块，可以分别引入。

1 @import "compass/layout";2 @import "compass/layout/grid-background";3 @import "compass/layout/sticky-footer";4 @import "compass/layout/stretching";

登录后复制

stretching模块，按父元素尺寸拉伸元素，示例：

1 .stretch-full {2  @include stretch();3 }4 .stretch-full2 {5  @include stretch(5px,0px,5px,5px); //非0值单位px不可省6 }7 .stretch-full3 {8  @include stretch($offset-top:5px,$offset-right:0px,$offset-bottom:5px,$offset-left:5px); //参数顺序可变,非0值单位px不可省9 }

登录后复制

经过sass转换后代码：

 1 .stretch-full { 2  position: absolute; 3  top: 0; 4  bottom: 0; 5  left: 0; 6  right: 0; 7 } 8 .stretch-full2 { 9  position: absolute;10  top: 5px;11  bottom: 0;12  left: 5px; right: 5px;13 }14 .stretch-full3 {15  position: absolute; 16  top: 5px;17  bottom: 5px;18  left: 5px; right: 0px;19 }

登录后复制

sticky-footer模块,提供footer总在页面最底部的解决方案，需要固定的结构：

1 <body>2     <div id="root">3         <div id="root_footer"></div>4     </div>5     <div id="footer">6  Footer content goes here.7     </div>8 </body>

登录后复制

@include sticky-footer(54px) //参数为footer高度@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer") // 自定义选择器

登录后复制

CSS3模块&Browser Support模块(主动使用率较高的模块)
在用CSS3模块的时候要调整Browser Support模块的配置，即使不主动调整CSS3也引入了Browser Support模块。CSS3模块主要用于跨浏览的CSS3的能力。
例：

1 @import "compass/css3";2 .webdome-sec{3  @include box-shadow(1px 1px 3px 2px #cfcecf);4 }

登录后复制

生成的代码：

1 .webdemo-sec {2  -moz-box-shadow: 1px 1px 3px 2px #cfcedf;3  -webkit-box-shadow: 1px 1px 3px 2px #cfcedf;4  box-shadow: 1px 1px 3px 2px #cfcedf;5 }

登录后复制

假如不需要自动生成Firefox的适配代码，这时就需要用Browser Support模块。来配置compass默认支持哪些浏览器。对于特定浏览器支持到哪个版本。Browser Support模块一但修改将影响其余六个模块的输出。
引入support：

@import "compass/support";

登录后复制

引入了CSS3模块，相当于间接引入了support模块。
查看当前支持的浏览器版本：

控制台命令：

1 compass interactive //进入一个用于测试Compass中SassScript的控制台2 browsers() //查看支持的浏览器3 browser-versions(chrome) //查看支持的chrome版本

登录后复制

在sass文件中输入 @debug browsers() 控制台也会打印出支持的浏览器。
设置compass支持的浏览器：

@import "compass/css3";$supported-browsers: chrome firefox;

登录后复制

也可以写成： $supported-browsers: chrome,firefox ; 浏览器队列用空格或者逗号分隔均可。

设置compass支持的浏览器的最低版本（compass默认支持到ie5.5）：

$browser-minimum-versions:("ie":"8","":"")

登录后复制

不设置的话默认支持 browsers-versions 返回的的版本。
Animation：CSS3动画相关的特性。
Appearance：CSS3的appearance属性，也是CSS3的新规范中新定义的新属性。（还没有一个主流的浏览器支持这个属性）
Background Clip、Background Origin、Background Size：CSS3新增的background相关的属性，用来规定背景的绘制区域、背景图像的定位原点、背景图像的尺寸等。
Border Radius：边框圆角属性
Box、Box Shadow
Box Sizing：用来修改盒模型的宽高的度量方式。
CSS Regions：控制内容布局的新方式
CSS3 Pie：尽可能提高ie浏览器呈现许多CSS3功能
Columns：CSS3的多列布局属性
Filter：主要用于在图片上实现一些特效
Flexbox：（移动端web开发用的比较多）
Font Face：不依赖于用户计算机上安装好的字体，指定下载好的某一种字体
Hyphenation：如何断字换行
Images：CSS3新增了这种生成渐变图形的方式，images用于需要使用这两种方式充当图片的场景。
Inline Block：实现跨浏览器的display:inline-block;能力
Opacity：透明属性，为了兼容低版本的IE
Selection：使用CSS3的selection伪元素定义被选中文本的颜色和背景色
Shared Utilities：想贡献CSS3模块的相关compass插件会用到。工具类模块
Text Shadow：文字阴影属性
Transform、Transition：变幻动画属性
User Interface：限制某一区域是否允许鼠标拖拽选择，input元素在无填写状态下提示语的样式

Typography模块
分为四个模块：
Links：链接修饰模块正常态下去掉下划线，在hover的情况下才显示这个下划线hover-link();

1 a{2  @include hover-link();3 }

登录后复制

编译之后：

1 a {2  text-decoration: none;3 }4 a:hover, a:focus {5  text-decoration: underline;6 }

登录后复制

修改不同状态下超链接的颜色link-colors
抹平超链接样式，和他跟父容器的文本无异unstyled Link

Lists：列表修饰模块

Text：文本修饰模块

Vertical Rhythm：垂直韵律修饰模块

@import "compass/typography/vertical_rhythm";

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7338

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1265

PHP教程

1210

显示更多

Related knowledge

公众号网页更新缓存难题：如何避免版本更新后旧缓存影响用户体验？ Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存，这玩意儿，说简单也简单，说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章，结果用户打开还是老版本，这滋味，谁受得了？这篇文章，咱就来扒一扒这背后的弯弯绕绕，以及如何优雅地解决这个问题。读完之后，你就能轻松应对各种缓存难题，让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存，说白了就是浏览器或者服务器为了提高访问速度，把一些静态资源（比如图片、CSS、JS）或者页面内容存储起来。下次访问时，直接从缓存里取，不用再重新下载，速度自然快。但这玩意儿，也是个双刃剑。新版本上线，