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

 

posted @ 2015-04-15 11:19  翌子涵  阅读(5937)  评论(0编辑  收藏  举报