Sass和Compass入门
一.前言
1.Sass是什么？
Sass可以简化你的Css工作流，并可以使你的Css的扩展和维护工作变的更加容易！例如，曾几时何，因为客户的需求的变更，你必须不断的通过查找和替换来更改一个像素值，或者，为了能够确定多栏布局中某一栏的宽度，你需要使用计算像素值软件才能搞定。
Sass引入了一些新的概念如，变量，混合，嵌套和选择器继承.Sass 生成良好格式化的 CSS 代码，易于组织和维护。
SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。
Sass最后还是会编译出合法的CSS让浏览可以使用，也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
2.Compass是什么?
Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。
二.Sass和Compass安装
// SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。
// 假定你已经安装好了Ruby，接着在命令行输入下面的命令：
1 1.gem安装Sass
2 C:\Users\DELL>gem install sass
3
4 2.查看Sass版本
5 C:\Users\DELL>sass -v
6 Sass 3.4.13 (Selective Steve)
7
8 3.编译Sass文件
9 sass main.scss main css
10 // 一般很少使用sass命令,一般都是用Compass命令;
11
12 4.gem安装Compass
13 C:\Users\DELL>gem install compass
14
15 5.查看Compass版本
16 C:\Users\DELL>compass -v
17 Compass 1.0.3 (Polaris)
1 6.Compass搭建项目
2 C:\Users\DELL\compass create sass
3 // 结果:↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 5 directory sass/
6 directory sass/sass/ // sass文件所在目录;
7 directory sass/stylesheets/ // css文件所在目录;
8 create sass/config.rb // 项目配置文件;
9 create sass/sass/screen.scss // 主要针对屏幕的sass文件;
10 create sass/sass/print.scss // 主要针对打印设备;
11 create sass/sass/ie.scss // 主要针对IE浏览器;
12 write sass/stylesheets/ie.css
13 write sass/stylesheets/print.css
14 write sass/stylesheets/screen.css // scss文件编译后对应的css文件;最终将引入到HTML中的文件;
15
16 // You may now add and edit sass stylesheets in the sass subdirectory of your project.
17 // 你现在可以在sass文件的子文件中(screen.scss/print.scss/ie.scss)添加和编辑项目的样式表;
18
19 // Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.
20 // Sass文件以"_"开头的叫做局部文件,不会被编译成CSS;但它们可以被引入到其他Sass文件中;
21
22 // You can configure your project by editing the config.rb configuration file.
23 // 你可以通过编辑config.rb配置文件来配置项目信息;
24
25 // You must compile your sass stylesheets into CSS when they change.
26 // 当Sass文件被修改后,必须要编译Sass文件到CSS;
27
28 // 1. To compile on demand: // 直接编译;
29 // compass compile [path/to/project]
30 // 2. To monitor your project for changes and automatically recompile:
31 // compass watch [path/to/project] // 监听项目变化并且自动编译;
32
33 // To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
34 // <head>
35 // <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
36 // <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
37 // <!--[if IE]>
38 // <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
39 // <![endif]-->
40 // </head>
41 // 将编译后的文件引入到HTML页面中;
三.Sass语法基础
1 1.scss和sass文件转换
2 sass-convert main.scss main.sass
3 // 将scss文件转换为sass文件;
4
5 2.开启监听编译
6 C:\Users\DELL>cd sass
7 // 进入项目文件夹;
8 C:\Users\DELL\sass>compass watch
9 >>> Compass is watching for changes. Press Ctrl-C to Stop.
10 // 开启监听并自动编译;
11
12 3.变量
13 // Sass通过"$"声明变量;
14 >1.声明变量
15 $headline-ff:"宋体",Arial,sans-serif;
16 $main-sec-ff:Arial,sans-serif;
17 >2.引用变量
18 .headline {
19 font-family: $headline-ff;
20 }
21 .main-sec {
22 font-family: $main-sec-ff;
23 }
24
25 4.@import引入文件
26 >1.新建局部文件
27 _variables.scss
28 // 以"_"开头的局部文件,不会被编译到css;作为引入文件使用;
29 >2.@import引入文件
30 @improt "variables";
31 // 基于Sass的既定规则:
32 // 1.没有文件后缀名的时候,sass会添加.scss或.sass的后缀;
33 // 2.用同一目录下,局部文件和非局部文件不能重名;
34 >3.使用css原生@import的既定规则:
35 >>1.当@import后边跟的文件名是以".css"结尾的时候;
36 >>2.当@import后边跟的是"http://"开头的字符串的时候;
37 >>3.当@import后边跟的是一个url()函数的时候
38 >>4.当@import后边带有media queries的时候;
39
40 5.注释
41 >1.以"/**/"注释的内容最后被输出到了对应的css文件中;
42 >2.以"//"注释的内容则没有输出到对应的css文件;
43
44 6.类嵌套语法
45 .main-sec{
46 font-family: $main-sec-ff;
47 .headline {
48 font-family: $main-sec-ff;
49 }
50 }
51
52 7.属性嵌套语法
53 .headline {
54 font:{
55 family:$main-sec-ff;
56 size:16px;
57 }
58 }
59
60 8.父类选择器(自身调用)
61 a {
62 &:hover {
63 color:red;
64 }
65 }
四.Sass语法进阶
1 1.变量操作
2 >1.直接操作变量,即变量表达式;
3 >2.通过函数;
4 >>1.跟代码块无关的函数,多是自己内置函数,称为functions;
5 >>2.可重用的代码块:称为mixin;
6 >>>1.@include; // 以复制/拷贝的方式存在;
7 >>>2.@extend; // 以组合声明的方式存在;
8
9 2.颜色值转换;
10 Sass:
11 color:hsl(270,100%,50%);
12 Css:
13 color:#7f00ff;
14
15 3.@mixin引用
16 Sass:
17 @mixin col-6 { // 声明col-6()函数;
18 width:50%;
19 float:left;
20 }
21 .webdemo-sec {
22 @include col-6 // 通过@include引入@col-6()函数;并且可以引入多个;
23 &:hover { // &:表示父类选择器;
24 background-color:#f5f5f5;
25 }
26 }
27 Css:
28 .webdemo-sec { // 继承了col-6()函数的属性值;
29 width:50%;
30 float:left;
31 }
32 .webdemo-sec:hover { // 通过"&"调用到本身;
33 background-color:#f5f5f5;
34 }
35
36 4.@mixin包含参数引用;
37 Sass:
38 @mixin col($width:50%){ // 设置默认参数值;不传参数时,属性值为默认;
39 width:$width;
40 float:right;
41 }
42 .webdemo-abc {
43 @include col(60%); // 设置传参数;
44 }
45 Css:
46 .webdemo-abc {
47 width:60%; // 编译后的属性值;
48 float:right;
49 }
50
51 5.@extend继承
52 >1.extend不可以继承选择器序列;
53 >2.使用%,用来构建只用来继承的选择器;
54 Sass:
55 .error {
56 color:#f00;
57 }
58 %error { // 构建只用来要继承的选择器;
59 background:#0f0;
60 }
61 .serious-error {
62 @extend .error;
63 @extend %error;
64 border:1px solid #f00;
65 }
66 Css:
67 .error, .serious-error { // 继承自.error;
68 color:#f00;
69 }
70 .serious-error { // 继承自%serious-error;
71 background:#0f0;
72 }
73 .serious-error { // 自己的属性;
74 border:1px solid #f00;
75 }
五.Sass高级语法
1
2 1.@media用法
3 // Sass中的@media与Css中的@media区别:
4 // 1.Sass中的media query可以内嵌在css规则中;
5 // 2.在生成css的时候,media query才会被提到样式的最高级;
6 // 3.好处:避免了重复书写选择器或者打乱样式表的流程;
7 Sass:
8 @mixin col-sm ($width:50%){
9 @media (min-width:768px){
10 width:$width;
11 float:left;
12 }
13 }
14 .webdemo-sec {
15 @include col-sm();
16 }
17 Css:
18 @media (min-width:768px){
19 .webdemo-sec {
20 width:50%;
21 float:left;
22 }
23 }
24
25 2.@at-root指令
26 // 嵌套副作用:增加了样式修饰的权重;制造了样式位置的依赖;
27 Sass:
28 .main-sec {
29 font-size:12px;
30 @at-root { // 在嵌套的时候使用@at-root指令;
31 .main-sec-headline { // 指定被嵌套的内容输出到样式表的顶层;
32 font-size:16px;
33 }
34 .main-sec-detail {
35 font-size:14px;
36 }
37 }
38 }
39 Css:
40 .main-sec {
41 font-size:12px;
42 }
43 .main-sec-headline { // 编译后成功输出到样式表的顶层;
44 font-size:16px;
45 }
46 .main-sec-detail {
47 font-size:14px;
48 }
49
50 3.if操作符
51 @mixin col-sa ($width:50%){
52 // 使用type-of()方法:检测$width是否是数值类型;
53 @if type-of($width) != number {
54 // #{}:可以引用Sass的变量;--Ruby语法;
55 // @error:表示错误信息;
56 @error "$width必须是一个数值类型,你输入的width是:#{$width}.";
57 }
58
59 // 使用unitless()方法:判断当前的数值是否跟有单位;
60 // 前置not表示否定,双重否定表示肯定;
61 @if not unitless($width){ // 判断数值有单位;
62 @if unit($width) != "%" { // 如果单位不是%;
63 @error "$width必须是一个数值类型,你输入的width是:#{$width}.";
64 }
65 } @else { // 判断数值没有单位;
66 @warn "$width必须是一个数值类型,你输入的width是:#{$width}.";
67 $width:(percentage($width)/100); // 换算成带%单位的数值;
68 }
69 @media (min-width:768px){
70 width:$width;
71 float:left;
72 }
73 }
74
75 4.Sass的输出格式
76 // 在config.rb配置文件里;
77 >1.output_style = :expanded or :nested or :compact or :compressed
78 >>0.:expanded => 编译后的文件是展开的;
79 >>1.:nested => 根据嵌套,在输出的时候代码缩进;
80 >>2.:compact => 将所有的属性汇总到一行;选择器之间的关系更清晰;
81 >>3.:compressed => 将所有的代码压缩以占用最小的空间;
