给页面换皮肤的思考

第一步：安装sass

1.1首先需要ruby环境，下载地址：http://rubyinstaller.org/downloads/

1.2在命令行中，输入gem install compass   //因为gem是基于ruby 的软件，同时装compass的时候会同时安装sass

1.3sass -v来检查sass的版本，看是否安装成功，同时compass -v

第二步：使用说明

2.1用cd命令切换当前目录到自己想要去的目录

2. 2 解释

       SASS 文件就是普通的文本文件，里面可以直接使用 CSS 语法。文件后缀名是 .scss，意思为 Sassy CSS。

　　下面的命令，可以在 屏幕上显示  .scss 文件转化的 css 代码。（假设文件名为 test。）

             sass test.scss

       如果要将显示结果保存成文件，后面再跟一个 .css 文件名。

             sass test.scss test.css

       SASS 提供四个编译风格的选项： 

          * nested：嵌套缩进的 css 代码，它是默认值。 

          * expanded：没有缩进的、扩展的 css 代码。

          * compact：简洁格式的 css 代码。 

          * compressed：压缩后的 css 代码。

        生产环境当中，一般使用最后一个选项。

           sass --style compressed test.sass test.css

2.3在当前目录中编写测试文件style.scss

       $blue : #1875e7;

div {
    color : $blue;
}

在命令行输入：scss style.scss test.css

查看test.css文件，代码如下：

div {
  color: #1875e7}

测试成功！

第三步：进入基本用法学习

3.1变量以$开头

      $blue : #1875e7;

3.2 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

     如

$side : left;

.rounded {

border-#{$side}-radius: 5px;

}

3.3SASS 共有两种注释风格。

  标准的 CSS 注释 /* comment */ ，会保留到编译后的文件。
  单行注释 // comment，只保留在 SASS 源文件中，编译后被省略。

3.4继承

 .class1 {
    border: 1px solid #ddd;
    }
    .class2 {
    @extend .class1;
    font-size:120%;
    }

3.5MixIn：相当于宏文本替换

第一种形式：不带参数

@mixin left {
    float: left;
    margin-left: 10px;
    }
    div {
    @include left;
    }

第二种形式：带参数

@mixin left ($value: 10px) {
    float: left;
    margin-right: $value;
    }
    div {
    @include left (20px);
    }

3.6导入文件

 @import 命令，用来插入外部文件，可以是scss也可以是css文件

 @import ("path/filename.scss"); 

3.7if...else语句

@if lightness ($color) > 30% {
    background-color: #000;
    } @else {
    background-color: #fff;
    }

3.8循环

@for $i from 1 to 10 {
    .border-#{$i} {
    border: #{$i}px solid blue;
    }
    }

3.9自定义函数

@function double ($n) {
    @return $n * 2;
    }
    #sidebar {
    width: double (5px);
    }

3.10嵌套

.infobox {
          width: 200px;
          .message{
               border: 1px solid red;
               .title{
               color: red;}
          }
          .user{
               border: 2px solid black;
               .title{     color: black; }  
          }
     }

转换为

.infobox {
width: 200px; }
.infobox .message{
border: 1px solid red; }
.infobox .message .title{
color: red; }
.infobox .user{
border: 2px solid black; }
.infobox .user .title{
color: black;}