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 => 将所有的代码压缩以占用最小的空间;