第一章 Sass和Compass让样式表重焕青春

// 内容概要
// 开始学习Sass和动态样式表
// 用Sass更高效地写样式表
// Compass简介
// 用Compass迎接工程实践中的样式挑战

1.2.1 通过变量来复用属性值

 声明变量:$blue:#1875e7;
调用变量:.blue { color:$blue; }

1.2.2 通过嵌套来快速写出多层级的选择器

 ul{
float:right;
li {
float:left;
a{ color:#111; }
}
}

1.2.3 使用混合器来复用一段样式

 @mixin list {
li {
float:left;
margin-right:10px;
}
}
ul {
@include list;
} // 在混合器中应用变量
@mixin list($spacing:10px) {  
li {
float:left;
margin-right:$spacing;
}
}

1.2.4 使用选择器继承来避免重复属性

 .error {
border:1px #f00;
background:#fdd;
}
.bacError {
@extend .error;    // 继承选择器里的内容
border-width:3px;
} // 在选择器中使用占位选择器
Sass:
%button-reset {    // 占位选择器;
margin:0;
padding:.5em 1.2em;
}
.save {
@extend %button-reset;  // 继承占位选择器里的内容;
color:white;
}
.delete {
@extend %button-reset;
color:black;
}
CSS:
.save,.delete {
margin:0;
padding:.5em 1.2em;
}

1.3 Compass是什么

// Compass是一个强大的Sass框架,它的设计目标是顺畅、高效地装扮互联网,使用它的人可写出可维护性更高的样式表;

1.4 创建一个Compass项目

// 确保电脑已经安装Ruby环境,并且安装了Sass和Compass

 $ compass create sample

1.5 使用Compass解决真实的CSS问题

// 接下来将通过使用Compass的内置模块(Sass的函数和其他特性组合而成)来实现CSS重置、网格布局、表格格式化和CSS3的一些特性;

1.5.1 通过重置来保持样式表现一致

 (1).@import "compass/reset"
// 通过Sass引入命令@import引入Compass的重置模块;
// reset模块是Compass框架中独立的一部分,可被随意引用到项目中;
// 通过加入这行代码,生成的CSS文件中就会包含CSS重置部分的代码; (2).@include reset-html5
// 输出文件中会生成额外的CSS规则来对HTML5的元素进行基本的样式修改,

1.5.2 引入基本布局--Blueprint网格布局

 $ compass create my_grid --using blueprint
// 创建的my_grid工程里,screen.scss文件内容会添加一系列基本布局的样式在里边;
// 而且不必在HTML标签添加"span-*"的类名,而是使用Sass的column混合器;
@include column($sidebar-columns);
// 详细内容见第六章;

1.5.3 通过表格辅助器为表格添加更加专业的斑马条纹样式

 @import "compass/utilities/tables";
table {
$table-color:#666; // 定义变量;
@include table-scaffolding; // 引入混合器;提供最基本的样式修饰;
@include inner-table-borders(1px, darken($table-color,40%));// 添加单元格边框;
@include outer-table-borders(2px); // 添加表格边框;
@include alternating-rows-and-columns($table-color,adjust-hue($table-color,-120deg),#222); // 添加斑马条纹样式;
}

1.5.4 CSS3属性无需再写厂商前缀

 @import "compass/css3"
Sass:
.rounded {
@include border-radius(5px);
}
CSS:
.rounded {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}

1.6 小结

//我们学习了CSS预处理的示例,并简单介绍了一下Sass的4个关键特性:变量选择器嵌套混合器选择器继承
//同时,我们也了解了一些Compass框架中Sass特性在真实世界程序中的应用,包括CSS重置格式布局表格样式修饰以及CSS3边框圆角

第二章 Sass基本语法

// 内容概要
// 通过变量重用颜色、长度以及其他一些值
// 通过规则嵌套让CSS更加结构化
// 通过多文件组织让样式变得更加可维护
// 通过混合器和继承重用整个样式

2.1 使用变量

// Sass使用$符号来标识变量

2.1.1 变量声明

 $nav-color:#abc;            // 外部变量;
nav {
$width:100px; // 内部变量;
width:$width;
color:$nav-color;
}

2.1.2 变量引用

 // 当声明变量时,变量值也可以引用其他变量;
$highlight-color:#abc;
$highlight-border:1px $highlight-color solid;
.seleted { border:$highlight-border; }

2.2 嵌套CSS规则

 #content {
article {
h1 {color:#333;}
p {margin:1em;}
}
}

2.2.1 父选择器的标识符&

 Sass:
a {
color:blue;
&:hover {color:red;}
}
CSS:
a {
color:blue;
}
a:hover {
color:red;
}

2.2.2 群组选择器的嵌套

 .container {
h1,h2,h3 {margin-bottom:2em;}
}

2.2.3 子组合选择器和同层组合选择器:>、+、~

 // 选择器只会选择article下紧跟着的子元素中命中section选择器的元素;
article > section {border:1px solid #ccc;}
// 选择header元素后紧跟的p元素;
header+p {font-size:1.1em;}
// 选择所有跟在article后的同层article元素;
article ~ article {border:none;}

2.2.4 嵌套属性

 nav {
border: {      // 将属性拆开;
style:solid;
width:1px;
color:#ccc;
}
}

2.3 导入Sass文件

// Sass的@import规则在生成CSS文件时就把相关文件导入进来;
// 所有相关的样式被归纳到了同一个CSS文件中,而无需发起额外的下载请求;
// 所有在被导入文件中定义的变量和混合器均可在导入文件中使用;

2.3.1 使用Sass部分文件

 // Sass局部文件的文件名以下划线开头。这样,Sass就不会在编译时单独编译这个文件输出CSS,而只把这个文件用作导入;
@import "themes/night-sky";

2.3.2 默认值设置

 // !default : 如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。
$box-width:400px !default; // 如果变量"$box-width"之前没有被赋值,则使用"400px";
.box {
width:$box-width;
}

2.3.3 嵌套导入

 Sass:
_blue-theme.scss:
aside{
color:white;
}
.blue-theme { @import "blue-theme" }  // 引入_blue-theme.scss文件;
CSS:
.blue-theme {
      aside { color:white; }
    }

2.3.4 原生的CSS导入

// 1.被导入的文件的名字以.css结尾;

// 2.被导入的文件的名字是一个URL地址;

// 3.被导入的文件的名字是CSS的url()值;

2.4 静默注释

// 这种注释内容不会出现在生成的css文件中

/* 这种注释内容会出现在生成的css文件中 */

2.5 混合器

 // 混合器使用@mixin标识符定义;
// 这个标识符给一段样式赋予一个名字,这样就可以通过"@include"引用这个名字重用这段样式;
// @include调用会把混合器中的所有样式提取出来放在@include被调用的地方;
Sass:
@mixin rounded {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.notice {
@include rounded;
}
CSS:
.notice {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

2.5.1 何时使用混合器

 // 判断一组属性是否应该合成一个混合器;一条经验法则就是能否为这个混合器想出一个合理的名字;
// 混合器和CSS类的区别:
// 1.类名在HTML文件中应用;具有语义化;
// 2.混合器是在样式表中应用的;具有展示性;

2.5.2 混合器中的CSS规则

 // 当一个包含CSS规则的混合器通过@include包含在一个父规则中时,在混合器中的规则最终会生成父规则中的嵌套规则;
Sass:
@mixin no-bullets {
list-style:none;
li {
list-style-type:none;
margin-left:0px;
}
}
ul {
color:#333;
@include no-bullets;
}
CSS:
ul {
color:#333;
list-style:none;    // 混合器中的属性;
}
ul li {
list-style-type:none;
margin-left:0px;
}

2.5.3 给混合器传参

 Sass:
@mixin link-colors($normal,$hover,$visited){
color:$normal;
&:hover { color:$hover; }
&:visited { color:$visited; }
}
a {
@include link-colors(blue,red,green);
}
Or
a {
@include link-colors(
$normal:blue,
$visited:green;
$hover:red
);
}
CSS:
a { color:blue; }
a:hover { color:red; }
a:visited { color:green;}

2.5.4 默认参数值

 @mixin link-colors ($normal,$hover:$normal,$visited:$normal){
color:$normal;
&:hover { color:$hover; }
&:visited { color:$visited; }
}

2.6 使用选择器继承来精简CSS

 Sass:
.error {
border:1px solid red;
}
.seriousError {
@extend .error;      // 继承选择器中的内容;
border-width:3px;
}
CSS:
.seriousError {
border:1px solid red;
border-width:3px;
}

2.6.1 何时使用继承

// 继承是基于类的(有时是基于其他类型的选择器),所以继承应该是建立在语义化的关系上;

2.6.2 继承的高级用法

// 如果一条样式规则继承了一个复杂的选择器,那么它只会继承这个复杂选择器命中的元素所应用的样式;

2.6.3 继承的工作细节

 // 继承不是仅仅用CSS样式替换@extend处的代码那么简单;
// >1.跟混合器相比,继承生成的CSS代码相对更少;
// >2.继承遵从CSS层叠的规则;(权重和出现的先后顺序);

2.6.4 使用继承的最佳实践

// 使用继承会让你的CSS美观/整洁;因为继承只会在生成CSS时复制选择器,而不会复制大段的CSS属性;

2.7 小结

 // 1.变量是Sass提供的最基本的工具;
// 通过变量可以让独立的CSS值变得可复用;无论是在一条单独的规则范围内还是在整个样式表中;
// 变量/混合器的命名甚至Sass的文件名,可以互换通用"_"和"-"; // 2.嵌套允许CSS规则内嵌套CSS规则,减少重复编写常用的选择器,同样让样式表的结构更清晰;
// 同时提供了特殊的父选择器标识符"&",从而构造更高效的嵌套; // 3.通过样式导入可以把分散在多个Sass文件中的内容合并在生成的一个CSS文件,避免了项目中有大量的CSS文件通过原生的CSS@import带来的性能问题; // 4.混合器允许用户编写语义化样式的同时避免视觉层面上样式的重复; // 5.继承允许声明类之间语义化的关系,通过这些关系可以保持CSS的整洁和可维护性;

(一)认识Sass和Compass的更多相关文章

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

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

  2. Sass和compass 安装 和配合grunt实时显示 [Sass和compass学习笔记]

    demo 下载http://vdisk.weibo.com/s/DOlfkrAWjkF/1401192855 为什么要学习Sass和compass ?提高站独立和代码产品化的绝密武器,尤其是程序化cs ...

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

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

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

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

  5. Sass和Compass制作雪碧图

    1.安装好了sass与compass之后设置一个配置文件 2.新增一个雪碧图文件夹用来存放将要合并的图片例如color文件夹 3.@import命令引用 .Compass看到@import指令的参数为 ...

  6. 【Sass初级】开始使用Sass和Compass

    转自:http://www.w3cplus.com/preprocessor/beginner/getting-started-with-sass-and-compass.html 如果你的朋友.同事 ...

  7. Sass和Compass设计师指南

    注:配合查看:Sass 为什么使用Sass和Compass? 1.减少重复工作,加快开发进度 2.使用变量,便于记忆,变量使用$符号开头 3.自动转换RGBA颜色值 .color { color: $ ...

  8. SASS、COMPASS 安装指南

    如果你还不知道 SASS 和 COMPASS 是什么,可以参看http://sass-lang.com 和http://compass-style.org,近期可能会更新一篇介绍性的入门教程,但 是本 ...

  9. rub、sass和compass的安装

    长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境 ...

  10. sass和compass安装

    安装Sass和Compass sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先 ...

随机推荐

  1. Fusioncharts的数字格式化

      1.     小数点位数格式化 <chart ... decimals='2' > Eg.数值12.432, 13.4 and 13,使用<chart ... decimals= ...

  2. 【flex】学习笔记/总结

    CSS3 flex布局 查看兼容情况: caniuse.com 盒子模型: content-box:平时普通盒子模型,padding/border 会使盒子变大 向外扩展 border-box:盒子模 ...

  3. 将页面中表格数据导出excel格式的文件(vue)

    近期由于项目需要,需要将页面中的表格数据导出excel格式的文件,折腾了许久,在网上各种百度,虽然资料不少,但是大都不全,踩了许多坑,总算是皇天不负有心人,最后圆满解决了. 1.安装相关依赖(npm安 ...

  4. 用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器(转)

    用开源 ASP.NET MVC 程序 Bonobo Git Server 搭建 Git 服务器   现在不用Git,都不好意思说自己是程序员. 当你想用Git,而源代码服务器是Windows系统时,你 ...

  5. 设置Jmeter默认为中文, 就是这么简单!

    Jmeter默认加载的全英文,想要看的更加明白,想到的就是汉化了. Jmeter汉化真的非常简单,意料之外的简单,只需要到配置文件 jmeter.properties ,将里面的 “#language ...

  6. centos clamav杀毒软件安装配置及查杀,没想到linux下病毒比windows还多!

    centos clamav杀毒软件安装配置及查杀,没想到linux下病毒比windows还多! 一.手动安装 1.下载(官网)    cd /soft     wget http://www.clam ...

  7. logstash笔记(一)——redis&es

    下载地址: https://www.elastic.co/downloads 版本:logstash-2.2.2 两台linux虚拟机,一台windows宿主机 shipper: 192.168.22 ...

  8. mysql 删除单表内多个字段重复的数据

    mysql 删除单表内多个字段重复的数据 DELETE from lot_log_payflow WHERE (pay_no,sub_flow_type) in () s1) AND id ) s2) ...

  9. 浅尝Vue.js组件(二)

    本篇目录: 插槽(Slot) 插槽内容 作用域 具名插槽 作用域插槽 独占默认插槽的缩写语法 解构插槽Prop 使用场景举例 动态插槽名 具名插槽缩写 动态组件&keep-alive 异步组件 ...

  10. LNP环境下Nginx与PHP配合解析的原理

    正在理解中,查阅资料,加上自我理解,得出如下结论,如有错误,欢迎指正.... LNP环境,Nginx与PHP配合运行的原理解释: 以前的互联网时代我们成为web1.0时代,那时用户是被动接受网络信息, ...