标签：变量   color   如何   scom   end   pack   语句   can   设计   

sass入门

　　什么使sass呢？学过变成语言的人都知道，它不是一种编程语言！

　　我们知道，css基本上不是程序员的工具，因为它很麻烦，没有变量，没有条件语句，而只是一行行的单纯的描述，非常的不方便！正基于此，有人开始为了更方便地编写css来给css加入了编程元素，这就是“css预处理器(css proprocessor)”-----用一种专门的编程语言来设计样式，然后经过编译生成正常的css文件。

　　当然，css预处理器不仅仅有sass还有less，这两个css预处理器都非常流行，这里我们先来认识sass。

　　补充：sass文档1（英文版）

　　　　　sass文档2（中文版）  

　　　　  阮一峰的sass介绍博客

　   说明：这里的部分内容参考了阮一峰老师的博客，地址为：　http://www.ruanyifeng.com/blog/2012/06/sass.html。

第一部分： sass安装与使用、文件介绍

　　我们可以下载koala,这是国人制作的一款可以编译sass、less的软件，我们可以先在sublime编译器中进行编译，然后使用koala生成css文件即可。

　　为了让less在sublime中高亮显示，可以在这里下载。

　　为了让sass在sublime中高亮显示，可以在这里下载。

　　上面两者得到后解压缩放在sublime的Preference下面的browse packages中并重启sublime即可。（当然高亮显示的前提是我们需要先将其保存为相应的文件）

　　sass实际上有两种文件名，一个是.sass结尾，另一个是.scss结尾。目前我么多用后者，因为前者形式的sass不好用，其语法是类似于ruby的语法。而.scss中使用的大括号，对于前端而言使用会更好。

　　如果不使用koala，也可以使用ruby来编译sass文件。　http://www.ruby-lang.org/zh_cn/downloads/  这里可以下载ruby。

第二部分： sass基本用法。

　　1.变量

　　我们知道，css是没有变量的，而变量就是sass强大之处了。sass允许使用变量，所有的变量使用$开头。如下所示：

$size:15px;
div{
    font-size:$size;  
}

 可以看出，这里$size时变量，变量必须使用$开头。

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

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

2.计算功能

　　在sass代码中，我们可以使用计算功能（非常方便！！这在css中是完全不可能的）。如下所示：

$weight:50px;
div{
    width:(100px/2);
    height:(50px-30px);
    font-size:$weight/5;
}

经过考拉编译之后，如下所示：

div {
  width: 50px;
  height: 20px;
  font-size: 10px; }

需要注意的是在scss代码中 100px/2 以及 50px -30px 都需要加上括号，这样编译出来的结果才不会有问题。

3.嵌套

　　sass允许在代码中使用选择器嵌套。这在css中是绝对不可以的，所以在css中写有嵌套关系的样式是非常麻烦的一件事情。

　　下面是一个例子：

div{
    h1{
        font-size:50px;
    }
    a{
        display:block;
        margin:15px;
    }
    &:hover{
        background:red;
    }
    border:{
        color:red;
        style:solid;
    }

}

　　经过考拉编译之后得到的代码如下：

div {
  border-color: red;
  border-style: solid; }
  div h1 {
    font-size: 50px; }
  div a {
    display: block;
    margin: 15px; }
  div:hover {
    background: red; }

/*# sourceMappingURL=text.css.map */

通过上面的例子可以看出：

• 考拉编译后会自动缩进
• 编译的css代码不再是嵌套关系
• 我们可以使用&(注意：是和号不是美元)引用父元素。
• 对于属性border-color和border-style我们也可以使用嵌套！！

4.sass注释

　　sass中共有三种注释方法。

　　其一：标准的css注释 /* this is a explanation */  经过编译后仍会保留

　　其二：单行注释 // this is a comment   经过编译后不再存在

　　其三：重要注释 /*!  this is an importantent explanation  */ 该注释就算压缩也会被保留，通常用于声明版权信息。

　　举例如下：

sass代码如下：

div{
    h1{
        font-size:50px;
    }
    /*! this is an important explanation */
    a{
        display:block;
        margin:15px;
    }// this is for a.
    &:hover{
        background:red;
    }
    /* we can use this for explanation */
    border:{
        color:red;
        style:solid;
    }

}

经过考拉编译后如下：

div {
  /*! this is an important explanation */
  /* we can use this for explanation */
  border-color: red;
  border-style: solid; }
  div h1 {
    font-size: 50px; }
  div a {
    display: block;
    margin: 15px; }
  div:hover {
    background: red; }

我们可以看到使用//注释的已经不见了。其他两个仍在。

如果我们将上面的css代码压缩，结果如下：

div{/*! this is an important explanation */border-color:red;border-style:solid}div h1{font-size:50px}div a{display:block;margin:15px}div:hover{background:red}

如果我们将上面的sass代码压缩，结果如下：

div{h1{font-size:50px}/*! this is an important explanation */a{display:block;margin:15px}// this is for a. &:hover{background:red}border:{color:red;style:solid}}

我们发现无论如何：/*! */注释会永久存在。

（js css在线压缩工具：http://tool.oschina.net/jscompress/）

第三部分：sass代码重用

　1.继承

　　这个功能非常强大，它允许我们在一个选择器中继承另外一个选择器，使用@extend即可实现继承，举例如下：

$myColor:red;
.father{
    display:none;
    width:100px;
    height:(30px/2);
    color:$myColor;
}

.son{
    @extend .father;
    font-size:100px;
}

经过考拉编译之后如下：

.father, .son {
  display: none;
  width: 100px;
  height: 15px;
  color: red; }

.son {
  font-size: 100px; }

于是我们发现son完全继承了father，并在father的基础上添加了自己的属性font-size;

2.Mimin

sass入门

标签：变量   color   如何   scom   end   pack   语句   can   设计   

原文地址：http://www.cnblogs.com/zhuzhenwei918/p/6135804.html