为了账号安全,请及时绑定邮箱和手机立即绑定

Sass和Compass必备技能之Compass

难度中级
时长 2小时42分
学习人数
综合评分9.73
34人评价 查看评价
9.9 内容实用
9.7 简洁易懂
9.6 逻辑清晰
  • 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等标签的样式
    查看全部
  • 解决各浏览器默认样式不同,引入normalize解决
    查看全部
  • require 'compass/import-once/activate'防止再次插入被引入文件 如果真的需要引入多次在引入后面加感叹号“!”,实例@import "compass/reset!" 注释的最前面加感叹号“!”,防止压缩文件注释丢失
    查看全部
  • compass 内置了browser()函数; 返回浏览器的列表。 命令行中 compass interactive 中断compass watch 查看浏览器版本browser-versions();
    查看全部
  • require 'compass/import-once/activate'防止再次插入被引入文件 如果真的需要引入多次在引入后面加感叹号“!”,实例@import "compass/reset!" 注释的最前面加感叹号“!”,防止压缩文件注释丢失
    查看全部
  • normalize核心模块
    查看全部
  • compass核心模块
    查看全部
  • @import "compass/layout"; 有三个模块,如下: @import "compass/layout/grid-background";定高,定宽,或者自适应的背景 @import "compass/layout/sticky-footer";提供页面中的页脚部分始终处于最底部的能力 @import "compass/layout/stretching";用于拉伸填满整个父容器的能力 @include stretch($offset-top: 0,0,0,0);(使用绝对定位) @include sticky-footer(30px,"#my-root","#my-root-footer","#my-footer")
    查看全部
    1 采集 收起 来源:Layout模块

    2018-03-22

  • 安装normalize -npm install normalize.css -component(bower) install normalize.css -gem install compass-normalize ·引入插件 config.rb 'conpass-normalize' ·使用compressed输出格式时不想注释被隐藏掉,/*!在注释里面加"!"号*/ 比如 @import "compass/reset!"; 当使用compressed格式时,会去掉标准的Sass和CSS注释及空格。我们可以在注释前面加一个!避免删除。 /*! */ compass compile编译 Normalize核心模块 ·base模块:统一html body字体文字大小边距 ·html5:统一html5的元素 ·links:统一a标签的样式,去掉边线 ·typography:统一段落文本样式 ·embeds:统一img、svg样式,比如border:0 ·groups:统一 ·forms:统一文字 ·tables:统一表格的标签 分模块引入 @import "normalize-version" @import "normalize/html5"; @import "compass/reset" 相当于 @import "compass/reset/utilities" @include global-reset();
    查看全部
  • Reset重置样式 Layout页面布局控制能力 只有这两个模块需要指定引入 五大类模块 ·CSS3:提供跨浏览器的CSS3能力 ·Helpers:内含一系列函数 ·Typography:修饰文本样式 ·Utilities辅助函数,多为mixin Browser:配置compass默认支持哪些浏览器,支持到哪个版本,一旦修改即影响其他模块的输出
    查看全部

举报

0/150
提交
取消
课程须知
如果你对CSS一无所知,我建议你先学习CSS的相关知识。如果你想一步登天,那么你必将摔得体无完肤。
老师告诉你能学到什么?
1.掌握如何使用Compass写出更优秀的CSS。 2.痛殴CSS编写过程中,这么多年的拦路虎,比如说精灵图自动合图,属性的浏览器前缀处理。 3.在项目的开发,生产周期内,使用的样式,图片,字体等内容,如何更好的组织起来。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!