Sass学习

1.1下载地址：

　　http://rubyinstaller.org/downloads

2.1 安装

SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，然后再安装SASS。

假定你已经安装好了Ruby，接着在命令行输入下面的命令：

　　gem install sass

然后，就可以使用了。

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

你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

　　// watch a file

　　sass --watch input.scss:output.css

　　// watch a directory

　　sass --watch app/sass:public/stylesheets

SASS的官方网站，提供了一个在线转换器。你可以在那里，试运行下面的各种例子。

三、基本用法

 变量

SASS允许使用变量，所有变量以$开头。

Sass源代码：

$blue:#1875e7;
div{
  color:$blue;
  }

  $side:left;
  /*asassdf*/
  .rounded{
    .round{
      border-#{$side}-radius:5px;
    }

  }

  /*计算能力*/
  $var:2;
  body{
    margin: (14px/2);
    top:50px + 100px;
    right:$var * 20%;
  }

  /*嵌套*/
  div h1{
    color:red;
  }

  /*也可以写成这样*/
  /*属性的嵌套必须要在属性后成加上冒号*/
  p{
    border:{
      color:red;

    }
  }
  /*关于注释：
    又斜杠是在css文件中是不显示的；
    C++方式注释的方法会留在CSS文件中；
  */

  /*继承*/
  .class1{
    margin:0 auto;
    border:1px solid #000;
  }
  .class2{
    @extend .class1;
    font-size:120%;
  }

/*Mixin 宏的使用*/
@mixin left{  //定义mixin宏
  float:left;
  margin-left:10px;
}

div{
  @include left;  //@include 用于引用minxin宏；

}

/*带参数的minxin宏*/
@mixin left($value:20px){
  float:left;
  margin-right:$value;
}

//使用带参数的mixin宏；
div{
  @include left(40px);

}

/*Sass高级语法*/
//@if 语句的使用；
p{
  @if 1 + 1 == 2{
    border:1px solid #000;
  }

  @if 3 < 2{
    border:2px solid #fff;

  }
}
//@else 语句的使用；
/*
@function linghtness($value){
  @return $value;
}
$color:20%;
@if linghtness($color) > 30%{
  background-color:#000;
}@else{
  background-color:#fff;
}*/

//for 语句的使用；
 @for $i from 1 to 5  {
   .itme-#{$i} {width:100px; height:100px; }
 }

 //while语句

 $i:6;

 @while $i > 0 {
   .itme-#{$i} {width: 2em * $i;}
   $i:$i - 2;

 }

 //each命令
 @each $member in a, b, c, d, f{

 .#{$member}{
    background-image:url("../images/#{$member}.jpg");
 }
 }

对应生成的CSS文件：

@charset "UTF-8";
div {
  color: #1875e7;
}

/*asassdf*/
.rounded .round {
  border-left-radius: 5px;
}

/*计算能力*/
body {
  margin: 7px;
  top: 150px;
  right: 40%;
}

/*嵌套*/
div h1 {
  color: red;
}

/*也可以写成这样*/
/*属性的嵌套必须要在属性后成加上冒号*/
p {
  border-color: red;
}

/*关于注释：
  又斜杠是在css文件中是不显示的；
  C++方式注释的方法会留在CSS文件中；
*/
/*继承*/
.class1, .class2 {
  margin: 0 auto;
  border: 1px solid #000;
}

.class2 {
  font-size: 120%;
}

/*Mixin 宏的使用*/
div {
  float: left;
  margin-left: 10px;
}

/*带参数的minxin宏*/
div {
  float: left;
  margin-right: 40px;
}

/*Sass高级语法*/
p {
  border: 1px solid #000;
}

/*
@function linghtness($value){
  @return $value;
}
$color:20%;
@if linghtness($color) > 30%{
  background-color:#000;
}@else{
  background-color:#fff;
}*/
.itme-1 {
  width: 100px;
  height: 100px;
}

.itme-2 {
  width: 100px;
  height: 100px;
}

.itme-3 {
  width: 100px;
  height: 100px;
}

.itme-4 {
  width: 100px;
  height: 100px;
}

.itme-6 {
  width: 12em;
}

.itme-4 {
  width: 8em;
}

.itme-2 {
  width: 4em;
}

.a {
  background-image: url("../images/a.jpg");
}

.b {
  background-image: url("../images/b.jpg");
}

.c {
  background-image: url("../images/c.jpg");
}

.d {
  background-image: url("../images/d.jpg");
}

.f {
  background-image: url("../images/f.jpg");
}