第三章 无需计算玩转CSS网格布局

3.1 网格布局介绍

3.2 使用网格布局

3.2.1 术语

 术语名             定义                      是否涉及HTML标签
列 内容度量的垂直单位 否
容器 构成一个网格布局的HTML元素 是
槽 网格布局中列与列之间的统一留白 否

3.2.3 固定的网格布局还是流动的网格布局

 // 由于网络用户的屏幕尺寸不一,设计人员有两种选择:
// 1.要么选择一种对于大多数用户合理的固定布局大小(并且限制这种布局内的内容不溢出);
// 2.要么实现一种灵活的流动布局,让内容自适应用户的屏幕,甚至当浏览器窗口大小改变时也会自适应;

3.3 使用Blueprint

 // Blueprint把一些通用的对网格布局/段落和表格进行样式修饰的CSS技术打包到一个框架中,然后可以在各个项目中通用这个框架;
// 安装Blueprint
C:\Users\DELL>gem install compass-blueprint

3.3.2 使用Compass应用Blueprint

 // 创建一个基本的Blueprint项目
C:\Users\DELL>compass create simple --using blueprint/basic
directory simple/
directory simple/images/
directory simple/sass/
directory simple/sass/partials/
directory simple/stylesheets/
create simple/config.rb
create simple/sass/screen.scss
create simple/sass/partials/_base.scss
create simple/sass/print.scss
create simple/sass/ie.scss
create simple/images/grid.png
write simple/stylesheets/ie.css
write simple/stylesheets/print.css
write simple/stylesheets/screen.css // 在screen.scss文件生成↓↓↓↓↓↓↓↓↓↓:
// This import applies a global reset to any page that imports this stylesheet.
@import "blueprint/reset"; // 默认的Blueprint重置模块; // To configure blueprint, edit the partials/_base.sass file.
@import "partials/base"; // 网格布局设置; // Import all the default blueprint modules so that we can access their mixins.
@import "blueprint"; // 让Blueprint的模块可用; // Import the non-default scaffolding module.
@import "blueprint/scaffolding"; // 引入脚手架; // Generate the blueprint framework according to your configuration:
@include blueprint; // 生成网格布局; @include blueprint-scaffolding; // 表单和其他Blueprint元件;

3.3.3 使用Compass应用无需类名的Blueprint

 C:\Users\DELL>compass create simple --using blueprint/semantic

 Sass:
#container {
@include container;
}
CSS:
#container {
width: 950px;
margin: 0 auto;
overflow: hidden;
*zoom: 1;
}

3.4 使用960网格布局系统

 // 安装960系统;
C:\Users\DELL>gem install compass-960-plugin

// 创建一个960网格系统的Compass项目
C:\Users\DELL>compass create -r ninesixty twelve_col --using 960
directory twelve_col/
directory twelve_col/sass/
directory twelve_col/stylesheets/
create twelve_col/config.rb
create twelve_col/sass/grid.scss
create twelve_col/sass/text.scss
write twelve_col/stylesheets/grid.css
write twelve_col/stylesheets/text.css

3.5 通过Compass处理垂直韵律

 @import "compass/typography";       // 引入段落模块;
$base-font-size:16px; // 声明字体大小;
$base-line-height:24px;
@include establish-baseline;
h1 { @include adjust-font-size-to(48px); }

3.5.2 前置和后置

 // leader混合器在元素前加一个基线单位的外间距;
// trailer混合器在元素的后边加了一个基线单位的外间距;
p { @include leader; @include trailer; }
Sass:
p {
@include leader;
@include trailer;
}
CSS:
p {
margin-top: 1.5em;
margin-bottom: 1.5em;
}

3.6 小结

 // 流行的CSS网格框架如何简化维护留白和快速构建原型设计;
// 通过添加一些CSS类,就可以创建彼此之间有统一间距的竖列内容;

第四章 有Compass不再枯燥

// 使用Compass重置浏览器默认样式;

// 改进样式表排版的Compass辅助器;

// 使用Compass创建粘滞的页脚/多样化的表格以及浮动;

4.1.1 全局样式重置--global-reset

4.1.2 通过有针对性的样式重置进行更多控制

 @import "compass/reset/utilities";
>1.HTML5样式重置--@include reset-html5
>2.Compass文档中更多的样式重置
>>1.reset-box-model:移除元素的内边距和边框;
>>2.reset-font:重置文字的字号和基线;
>>3.reset-focus:移除浏览器提供的轮廓线;
>>4.reset-table和reset-table-cell:重置表格的边框和对齐方式;
>>5.reset-quotation:为<blockquotes>添加仅存在于样式表中的双引号;

4.2 更快更直观的排版辅助工具

4.2.1 链接辅助工具

 >1.为链接配色;
a { @include link-colors(#333,#00f,#f00,#555,#f00); }
>2.通过hover-link设置悬停样式(设置下划线);
a { @include hover-link }
>3.通过unstyled-link设置隐性的链接(去掉颜色/光标样式/下划线);
p.secret a { @include unstyled-link }

4.2.2 列表辅助工具--创建各种各样的列表

 >1.用pretty-bullets装点列表(利用背景图片显示列表的项目符号)
ul.features {
@include pretty-bullets('pretty-bullet.png');
}
>2.通过no-bullet和no-bullets去掉项目符号
li.no-bullet { @include no-bullet } // 去掉li类no-bullet的符号;
ul.no-bullet { @include no-bullets } // 去掉整个列表的项目符号;
>3.轻松横向排布
// horizontal-list混合器有两个参数:$padding(内边距)和$direction(浮动方向);
ul.nav { @include horizontal-list }      
ul.nav { @include horizontal-list(7px,right) } // 列表水平排列;
>4.用inline-list处理内联列表
ul.words { @include delimited-list } // 将列表设置成内联的样式;
ul.words { @include delimited-list("!") } // 自定义分隔符;

4.2.3 文本辅助工具--用辅助工具征服文字

 >1.用省略号代表截断内容(text-overflow:ellipsis);
td.dot { @include ellipsis; }
>2.用nowrap防止文本折行
td { @include nowrap }
>3.用replace-text将文字替换图片
h1.coffee { @include replace-text("coffee-header.png") }

4.3 布局辅助工具

4.3.1 粘滞的页脚

// 生成一个高40px的页脚,并且始终在最下面;

 @include sticky-footer { 40px, "#content", "#footer", "#sticky-footer"};

4.3.2 可伸展元素

// 元素绝对定位,距离边界5px;

 // stretch混合器有4个参数:$offset-top/$offset-right/$offset-bottom/$offset-left;
a.logo { @include stretch(5px,5px,5px,5px) }

4.4 小结

// 本章,我们了解了Compass省时省力的工具;

// 包括:链接/列表/文本/布局;

第五章 通过Compass使用CSS3

// 用Compass的CSS3模块创建跨浏览器的CSS3样式表

// 在低版本IE中支持一些CSS3的特性

// Compass里的CSS3高阶技能

5.1 新属性:浏览器前缀

 // 引入CSS3模块
@import "compass/css3";
Sass:
.notice {
@include border-radius(5px);
}
CSS:
.notice {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

5.2 通过Compass使用CSS3

5.2.1 圆角

 button.rounded {
@include border-radius (5px);
}

5.2.2 CSS3阴影--text-shadow和box-shadow

 Sass:
$shadow-1:rgba(#000,.5) -200px 0 0;
$shadow-2:rgba(#000,.3) -400px 0 0;
h2 {
@include box-shadow($shadow-1);
@include text-shadow($shadow-1,$shadow-2);
}
CSS:
h2 {
-moz-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;
box-shadow: rgba(0, 0, 0, 0.5) -200px 0 0;
text-shadow: rgba(0, 0, 0, 0.5) -200px 0 0, rgba(0, 0, 0, 0.3) -400px 0 0;
}

5.2.3 颜色渐变

 #pattern {
@include background(
linear-
gradient(
360deg,
#bfbfbf 0%,
#bfbfbf 12.5%
#bfbf00 12.5%,
#bfbf00 25%,
...
)
);
width:400px;
height:300px;
}

5.2.4 用@font-face嵌入字体

 @include font-face ("ChunkFiveRegular",
font-files("ChunkFiveRegular-webfont.woff",woff,
"ChunkFiveRegular-webfont.woff",ttf,
"ChunkFiveRegular-webfont.woff",svg,
"ChunkFiveRegular-webfont.woff",normal,normal));

5.4 小结

// 使用CSS3混合器实现:圆角/阴影/渐变以及文字引入;

(二)在实战中使用Sass和Compass的更多相关文章

  1. 在实战中使用Sass和Compass

    第三章 无需计算玩转CSS网格布局 3.1 网格布局介绍 3.2 使用网格布局 3.2.1 术语 1 术语名 定义 是否涉及HTML标签 2 列 内容度量的垂直单位 否 3 容器 构成一个网格布局的H ...

  2. Sass和Compass的安装

    Sass和Compass都是基于Ruby编程语言的命令行工具.要使用它们,你首先需要在电脑中安装Ruby,并对电脑的命令行操作有一个基本的理解.Sass和Compass可以安装在Windows.Mac ...

  3. [已读]Sass与Compass实战

    介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而g ...

  4. Sass和Compass入门

    一.前言 1.Sass是什么? Sass可以简化你的Css工作流,并可以使你的Css的扩展和维护工作变的更加容易!例如,曾几时何,因为客户的需求的变更,你必须不断的通过查找和替换来更改一个像素值,或者 ...

  5. Sass和Compass设计师指南 Ben Frain 中文高清PDF扫描版​

    Sass和Compass设计师指南是<响应式Web设计:HTML5和CSS3实战>作者Ben Frain的又一力作.作者通过丰富.完整的案例,循序渐进地展示了Sass和Compass的使用 ...

  6. Sass和Compass学习笔记系列之Sass

    最近在慕课网学习Sass和Compass,学习链接地址:https://www.imooc.com/learn/364,现在整理笔记如下: 一.使用Sass和Compass的优点: a.使用Sass和 ...

  7. 分享15款很实用的 Sass 和 Compass 工具

    Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...

  8. 揭开Sass和Compass的神秘面纱

    揭开Sass和Compass的神秘面纱 可能之前你像我一样,对Sass和Compass毫无所知,好一点儿的可能知道它们是用来作为CSS预处理的.那么,今天请跟我一起学习下Sass和Compass的一些 ...

  9. Sass学习之路:Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

随机推荐

  1. Tomcat 多项目部署方法整理

    Tomcat 多项目部署方法整理 说明:tomcat-deploy-aaa和tomcat-deploy-bbb是两个不同的web项目,为了方便以下简称aaa和bbb,请先自行创建并跑通 导航: NO1 ...

  2. .NET Core微服务之路:基于Consul最少集群实现服务的注册与发现(二)

    重温Consul最少化集群的搭建  

  3. Linux合上笔记本不进入休眠模式

      最近一个问题困扰了我很久,入职之前和人事说过工作中会用自己的电脑,但是人事还是坚持要给我发一个电脑,没办法,公司没有补贴,那就领了吧,索性将这个笔记本配置成了Fedora系统,用来当测试机,但是一 ...

  4. Nhibernate入门篇连接Sqlserver的增删查改

    第一步:创建数据库 create table Emp( EmpId int primary key identity, EmpName ), EmpDate date ) 第二步:去官网下载:http ...

  5. 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图

    [源码下载] 背水一战 Windows 10 (87) - 文件系统: 获取文件的属性, 修改文件的属性, 获取文件的缩略图 作者:webabcd 介绍背水一战 Windows 10 之 文件系统 获 ...

  6. 札记:翻译-使用Scene和Transition实现【场景切换】动画效果

    简述:transitions framework 下面翻译transition为"过渡",强调动画过程的含义,不过更多时候使用transition单词本身. Android 4.4 ...

  7. turtle库实现汉诺塔

    import turtleturtle.screensize(800,800) class Stack: def __init__(self): self.items = [] def isEmpty ...

  8. [Mac]如何让两个窗口各占半个屏幕

    OS X中的拆分视图El Capitan或更高版本允许您使用两个应用程序填充Mac屏幕,而无需手动移动和调整窗口大小. 进入拆分视图 按住 窗口左上角的全屏按钮  . 当您按住按钮时,窗口会缩小,您可 ...

  9. jdk-tomcat-jenkens 安装

    1--安装JDK 下载JDK放到你需要的目录,解压,然后添加环境变量 2--安装tomcat 从官方网站下载tomcat的安装包,然后解压 启动tomcat , TOMCAT的默认端口是8080,要记 ...

  10. linux下的shell脚本的使用

    什么是shell? Shell是一个命令解释器,它在操作系统的最外层,负责直接与用户进行对话,把用户的输入解释给操作系统,并处理各种各样的操作系统的输出结果,输出到屏幕反馈给用户.这种对话方式可是交互 ...