(一)认识Sass和Compass

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

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

1.2.1 通过变量来复用属性值

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

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

1 ul{
2     float:right;
3     li {
4         float:left;
5         a{ color:#111; }
6     }
7 }

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

 1 @mixin list {
 2     li {
 3         float:left;
 4         margin-right:10px;
 5     }
 6 }
 7 ul {
 8     @include list;
 9 }
10
11 // 在混合器中应用变量
12 @mixin list($spacing:10px) {  
13     li {
14         float:left;
15         margin-right:$spacing;
16     }
17 }

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

 1 .error {
 2     border:1px #f00;
 3     background:#fdd;
 4 }
 5 .bacError {
 6     @extend .error;    // 继承选择器里的内容
 7     border-width:3px;
 8 }
 9
10 // 在选择器中使用占位选择器
11 Sass:
12     %button-reset {    // 占位选择器;
13         margin:0;
14         padding:.5em 1.2em;
15     }
16     .save {
17         @extend %button-reset;  // 继承占位选择器里的内容;
18         color:white;
19     }
20     .delete {
21         @extend %button-reset;
22         color:black;
23     }
24 CSS:
25     .save,.delete {
26         margin:0;
27         padding:.5em 1.2em;
28     }

1.3 Compass是什么

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

1.4 创建一个Compass项目

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

1 $ compass create sample

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

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

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

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

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

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

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

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

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

 1 @import "compass/css3"
 2 Sass:
 3     .rounded {
 4         @include border-radius(5px);
 5     }
 6 CSS:
 7     .rounded {
 8         -moz-border-radius: 5px;
 9         -webkit-border-radius: 5px;
10         -o-border-radius: 5px;
11         -ms-border-radius: 5px;
12         border-radius: 5px;
13     }

1.6 小结

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

第二章 Sass基本语法

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

2.1 使用变量

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

2.1.1 变量声明

1 $nav-color:#abc;            // 外部变量;
2 nav {
3     $width:100px;           // 内部变量;
4     width:$width;
5     color:$nav-color;
6 }

2.1.2 变量引用

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

2.2 嵌套CSS规则

1 #content {
2     article {
3         h1 {color:#333;}
4         p {margin:1em;}
5     }
6 }

2.2.1 父选择器的标识符&

 1 Sass:
 2     a {
 3         color:blue;
 4         &:hover {color:red;}
 5     }
 6 CSS:
 7     a {
 8         color:blue;
 9     }
10     a:hover {
11         color:red;
12     }

2.2.2 群组选择器的嵌套

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

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

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

2.2.4 嵌套属性

1 nav {
2     border: {      // 将属性拆开;
3         style:solid;
4         width:1px;
5         color:#ccc;
6     }
7 }

2.3 导入Sass文件

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

2.3.1 使用Sass部分文件

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

2.3.2 默认值设置

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

2.3.3 嵌套导入

1 Sass:
2 _blue-theme.scss:
3     aside{
4         color:white;
5     }
6     .blue-theme { @import "blue-theme" }  // 引入_blue-theme.scss文件;
7 CSS:
8     .blue-theme {       aside { color:white; }    }

2.3.4 原生的CSS导入

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

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

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

2.4 静默注释

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

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

2.5 混合器

 1 // 混合器使用@mixin标识符定义;
 2 // 这个标识符给一段样式赋予一个名字,这样就可以通过"@include"引用这个名字重用这段样式;
 3 // @include调用会把混合器中的所有样式提取出来放在@include被调用的地方;
 4 Sass:
 5     @mixin rounded {
 6         -moz-border-radius:5px;
 7         -webkit-border-radius:5px;
 8         border-radius:5px;
 9     }
10     .notice {
11         @include rounded;
12     }
13 CSS:
14     .notice {
15         -moz-border-radius:5px;
16         -webkit-border-radius:5px;
17         border-radius:5px;
18     }

2.5.1 何时使用混合器

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

2.5.2 混合器中的CSS规则

 1 // 当一个包含CSS规则的混合器通过@include包含在一个父规则中时,在混合器中的规则最终会生成父规则中的嵌套规则;
 2 Sass:
 3     @mixin no-bullets {
 4         list-style:none;
 5         li {
 6             list-style-type:none;
 7             margin-left:0px;
 8         }
 9     }
10     ul {
11         color:#333;
12         @include no-bullets;
13     }
14 CSS:
15     ul {
16         color:#333;
17         list-style:none;    // 混合器中的属性;
18     }
19     ul li {
20         list-style-type:none;
21         margin-left:0px;
22     }

2.5.3 给混合器传参

 1 Sass:
 2     @mixin link-colors($normal,$hover,$visited){
 3         color:$normal;
 4         &:hover { color:$hover; }
 5         &:visited { color:$visited; }
 6     }
 7     a {
 8         @include link-colors(blue,red,green);
 9     }
10     Or
11     a {
12         @include link-colors(
13             $normal:blue,
14             $visited:green;
15             $hover:red
16         );
17     }
18 CSS:
19     a { color:blue; }
20     a:hover { color:red; }
21     a:visited { color:green;}

2.5.4 默认参数值

1 @mixin link-colors ($normal,$hover:$normal,$visited:$normal){
2     color:$normal;
3     &:hover { color:$hover; }
4     &:visited { color:$visited; }
5 }

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

 1 Sass:
 2     .error {
 3         border:1px solid red;
 4     }
 5     .seriousError {
 6         @extend .error;      // 继承选择器中的内容;
 7         border-width:3px;
 8     }
 9 CSS:
10     .seriousError {
11         border:1px solid red;
12         border-width:3px;
13     }

2.6.1 何时使用继承

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

2.6.2 继承的高级用法

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

2.6.3 继承的工作细节

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

2.6.4 使用继承的最佳实践

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

2.7 小结

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

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

邂逅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 reset和layout [Sass和compass学习笔记]

reset 可以重置浏览器的的html的默认样式,因为各个浏览器对有些元素解析差别很大 通过重置样式可以让样式的浏览器兼容 更简单 使用方法简单 @import "compass/reset" layout 有几个常见的布局函数,我觉得挺管用,其他的都是用来写组建非常常用的 Sticky Footer 该模块提供了需要布置你的页脚,它坚持到页面底部的工具. 这个模块主要用于布局页脚,可以让页脚固定在页面的最底部,是一个比较常用的功能,而且有配套的html代码 引用方法 @import

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

Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任何时候都更容易. 在这篇文章中,我们已经收集了一组有用的 Sass 和 Compass 工具,将帮助您快速构建 Web 应用程序. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScri

[已读]Sass与Compass实战

介绍了Sass基础语法与Compass框架,这个网上参考文档就OK了,另外介绍了compass生成图片精灵和相应的css,貌似现在单纯用sass和compass的挺少,要不grunt,要不FIS,而grunt和FIS貌似都有自己的图片精灵方案(好吧,我都没用过)?所以,这本书也没什么必要看了→ →

揭开Sass和Compass的神秘面纱

可能之前你像我一样,对Sass和Compass毫无所知,好一点儿的可能知道它们是用来作为CSS预处理的.那么,今天请跟我一起学习下Sass和Compass的一些基础知识,包括它们是什么.如何安装.为什么要使用.基础语法等一些基本知识.需要说明的是我也仅仅只是刚刚接触Sass和Compass,一些高级用法等将不再本文的讨论范围之内.接触一周以后发现Sass和Compass的用处非常大,也打算今后在项目中尝试引进并应用起来.希望读完以后,你跟我一样对Sass和Compass给你带来的东西非常开心,也

compass General 常用api学习[Sass和compass学习笔记]

compass 中一些常用api 包括一些浏览器hack @import "compass/utilities/general" Clearfix Clearfix 是用来清除浮动 float 造成的内容问题,以前用clear 方法可以解决,通过查看Clearfix 的源码发现对与高版本的浏览器其实已经可以不用了 ? 1 2 3 4 @mixin clearfix {   overflow: hidden;   @include has-layout; } 用overflow 就可以了

rub、sass和compass的安装

长话短说,直接进入正题. [ruby安装] ruby下载网址:http://rubyinstaller.org/downloads/ 选择适合自己电脑的版本: 下载完成后直接双击安装,记得勾选加入环境变量: 安装完成后打开命令行,输入 ruby -v 命令,如果能看到版本号说明安装成功了: ========================================= [sass安装] ruby自带一个分叫做RubyGems的系统,用来安装基于ruby的软件.用gem命令我们可以轻松的安装s

opensuse13.2安装 sass和compass

首先要先安装ruby 和 gem如果使用sudo zypper install ruby 安装后 当安装sass时会报错 /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby  extconf.rb  mkmf.rb can't find header files for ruby at  /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/

安装Ruby、Sass与Compass

sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby.(注:mac下自带Ruby无需在安装Ruby!) window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装.安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量. 安装完ruby之后,在开始菜单中,找到刚才我们安装的ruby,打开Start Command Prompt with Ruby. 安装完成后需测试安装有没有成功,在命令行中输入:ruby -v 如

【CSS】Windows下安装sass和compass

因为sass和compass依赖于ruby环境,所以装之前先确认装了ruby.可到官网下载最新版ruby安装包http://rubyinstaller.org/downloads/ 在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境: Sass和compass安装: 安装完ruby后,在开始菜单找到刚才我们安装的ruby,打开Start Command Prompt with Ruby