Sass和Compass入门_html/css_WEB-ITnose-html教程-PHP中文网

一./背景知识/

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 css10   // 一般很少使用sass命令,一般都是用Compass命令;11 12 4.gem安装Compass13   C:\Users\DELL>gem install compass14 15 5.查看Compass版本16   C:\Users\DELL>compass -v17   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.css13       write sass/stylesheets/print.css14       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   //<strong> Sass文件以"_"开头的叫做局部文件</strong>,<strong>不会被编译成CSS;但它们可以被引入到其他Sass文件中;</strong>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   //<strong> 当Sass文件被修改后,必须要编译Sass文件到CSS;</strong>27 28   // 1. To compile on demand:                   // 直接编译;                      29   //<strong> compass compile</strong> [path/to/project]30   // 2. To monitor your project for changes and automatically recompile:  31   //<strong> compass watch</strong> [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   //<strong> 将编译后的文件引入到HTML页面中;</strong>

登录后复制

三./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><strong>compass watch </strong> 9 >>> Compass is watching for changes. Press Ctrl-C to Stop.10 // 开启监听并自动编译;11 12 3.变量13   //<strong> Sass通过"$"声明变量;</strong>14   >1.声明变量15     $headline-ff:"宋体",Arial,sans-serif;16     $main-sec-ff:Arial,sans-serif;17   >2.引用变量18     .headline {19       font-family:<strong> $headline-ff; </strong>20     }21     .main-sec {22       font-family: <strong>$main-sec-ff; </strong>23     }24 25 4.@import引入文件26   >1.新建局部文件27     _variables.scss28     //<strong> 以"_"开头的局部文件,不会被编译到css;作为引入文件使用;</strong>29   >2.@import引入文件30     @improt "variables";31     // 基于Sass的既定规则:32     //<strong> 1.没有文件后缀名的时候,sass会添加.scss或.sass的后缀;</strong>33     //<strong> 2.用同一目录下,局部文件和非局部文件不能重名;</strong>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.<strong>类嵌套语法 </strong>45   .main-sec{46     font-family: $main-sec-ff;47     .headline {48       font-family: $main-sec-ff;49     }50   }51 52 7.<strong>属性嵌套语法 </strong>53   .headline {54     font:{55       family:$main-sec-ff;56       size:16px;57     }58   }59 60 8.<strong>父类选择器(自身调用) </strong>61   a {62     &:hover {63       color:red;64     }65   }

登录后复制

四./Sass语法进阶/

 1 1.变量操作 2   >1.直接操作变量,即变量表达式; 3   >2.通过函数; 4     >>1.<strong>跟代码块无关的函数,多是自己内置函数,称为functions; </strong> 5     >>2.可重用的代码块:<strong>称为mixin; </strong> 6       >>>1.@include;                //<strong> 以复制/拷贝的方式存在;</strong> 7       >>>2.@extend;                 //<strong> 以组合声明的方式存在;</strong> 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 {                   //<strong> 声明col-6()函数;</strong>18       width:50%;19       float:left;20     }21     .webdemo-sec {22       <strong>@include col-6                 // 通过@include引入@col-6()函数;并且可以引入多个;</strong>23       &:hover {                      // &:表示父类选择器;24         background-color:#f5f5f5;25       }26     }27   Css:28     .webdemo-sec {                  <strong> // 继承了col-6()函数的属性值;</strong>29       width:50%;30       float:left;31     }32     .webdemo-sec:hover {             // 通过"&"调用到本身;33       background-color:#f5f5f5;34     }35 36 4.<strong>@mixin包含参数引用; </strong>37   Sass:38     <strong>@mixin col($width:50%){           // 设置默认参数值;不传参数时,属性值为默认;</strong>39       width:$width;40       float:right;41     }42     .webdemo-abc {43       @include col(60%);              <strong>// 设置传参数;</strong>44     }45   Css:46     .webdemo-abc {47       width:60%;                      <strong>// 编译后的属性值;</strong>48       float:right;49     }50 51 5.@extend继承52   >1.extend不可以继承选择器序列;53   >2.<strong>使用</strong>%<strong>,用来构建只用来继承的选择器; </strong>54   Sass:55     .error {56       color:#f00;57     }58    <strong> %error {                          // 构建只用来要继承的选择器;</strong>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.<strong>Sass中的media query可以内嵌在css规则中;</strong> 5 // 2.<strong>在生成css的时候,media query才会被提到样式的最高级;</strong> 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     <strong>@media (min-width:768px){ 19       .webdemo-sec { 20         width:50%; 21         float:left; 22  } 23  } </strong>24 25 2.@at-root指令26 //<strong> 嵌套副作用:增加了样式修饰的权重;制造了样式位置的依赖;</strong>27   Sass:28     .main-sec {29       font-size:12px;30       @at-root {                        //<strong> 在嵌套的时候使用@at-root指令;</strong>31         .main-sec-headline {            //<strong> 指定被嵌套的内容输出到样式表的顶层;</strong>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 {　　　　　　　　　<strong>// 编译后成功输出到样式表的顶层;</strong> 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       <strong>// 使用type-of()方法:检测$width是否是数值类型;</strong>53       @if type-of($width) != number {54           <strong>// #{}:可以引用Sass的变量;--Ruby语法;</strong>55           //<strong> @error:表示错误信息;</strong>56           @error "$width必须是一个数值类型,你输入的width是:#{$width}.";57       }58 59       // 使用unitless()方法:判断当前的数值是否跟有单位;60       //<strong> 前置not表示否定,双重否定表示肯定;</strong>61       @if not unitless($width){             //<strong> 判断数值有单位;</strong>62           @if unit($width) != "%" {         //<strong> 如果单位不是%;</strong>63               @error "$width必须是一个数值类型,你输入的width是:#{$width}.";64           }65       } @else {                             //<strong> 判断数值没有单位;</strong>66           @warn "$width必须是一个数值类型,你输入的width是:#{$width}.";67          <strong> $width:(percentage($width)/100);  // 换算成带%单位的数值; </strong>68       }69       @media (min-width:768px){70           width:$width;71           float:left;72       }73   }74 75 4.Sass的输出格式76 //<strong> 在config.rb配置文件里;</strong>77   >1.output_style = :expanded or :nested or :compact or :compressed78     >>0.:expanded   => 编译后的文件是展开的;79     >>1.:nested     => 根据嵌套,在输出的时候代码缩进;80     >>2.:compact    => 将所有的属性汇总到一行;选择器之间的关系更清晰;81     >>3.:compressed => 将所有的代码压缩以占用最小的空间;

登录后复制