Sass基础知识及语法

sass

Sass是一款强化css的辅助工具，他在css语法中的基础上增加了变量（variables）、嵌套（nested rules）、混合（mixns）、导入（inline impoarts）等高级功能，这些拓展令css更加强大和优雅。使用sass的样式库（如compass）有助于更好的组织管理样式文件，以及更高效的开发项目。

1、特色功能（features）

• 完全兼容css3
• 在css基础上增加变量、嵌套（nesting）、混合（mibxins）等功能
• 通过函数进行颜色值与属性值得运算
• 提供控制指令（control directives）等高级功能

2、语法格式（stntax）

• SCSS(Sassy CSS)--这种格式仅在CSS3语法的基础上进行拓展，所有CSS3语法在CSS3语法在SCSS中都是通用的，同时加入Sass的特色功能。此外，SCSS也支持大多数CSS hacks写法以及浏览器前缀写法。这种格式以.scss作为拓展名。
• Sass,被称为缩进格式（indented Sass）通常简称“Sass”，是一种简化格式。它使用“缩进”代替“花括号”表示属性属于某个选择器，用“换行”代替“分号”分隔属性，很多人认为这样做比SCSS更容易阅读，书写也更快速。缩进格式也可以使用Sass的全部功能，只是与SCSS相比个别地方采取了不同的表达方式。

3、css功能拓展（）

• 嵌套规则：Sass允许将一套css样式嵌套进另一套样式中，内层的的样式将它外层的选择器作为父类选择器，例如：

#main p{
           color:#00ff00;
           97%;
           
           .redbox{
                  background-color:#ff0000;
              color:#000000;
           }
        }

编译为：

    #main p{
       color:#00ffid00;
       97%;
       #main p .redbox{
          background-color:#ff0000;
          color:#000000;
       }
    }

嵌套功能避免了重复输入父选择器，而且令复杂的CSS结构更易于管理。

    #main{ 
        97%;
        
        p,div{
          font-size:2em;
          a{
             font-weight:bold;
          }
         }
          pre{
             font-size:3em;
        }
    }

编译为：

    #main{
       97%;
       }
    #main p,#main div{
       font-size:2em;
    }
    #main p a,#main div a{
       font-weight:bold;
    } 
    #main pre{
       font-size:3em;
    }

• 父选择器
  在嵌套CSS规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定hover样式时，或者当body元素有某个classname时，可以用&代表嵌套规则外层的父选择器。

    a{
       font-weight:bold;
       text-decoration:none;
       &:hover{
         text-decoration:underline;
       }
       body.firefox &{
         font-weight:normal;
       }
    }

编译为

   a{
       font-weight:bold;
       text-decoration:none;
       }
       a:hover{
         lintext-decoration:underline;
       }
      body.firefox a{
         font-weight:normal;
      }
   

编译后的CSS文件中&将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递；

    #main{
       color: black;
       a{
         font-weight:bold;
         &:hover{
            color:red;
         }
       }
    }

编译为：

    #main {
       color:black;
    }
    #main a{
       font-weight:bold;
    }
    #main a:hover{
       color:red;
    }

&必须作为选择器的第一个字符。其后可以跟随后缀生成复合的选择器，例如：

#main{
  color:black;
  &-sidebar{
    border:1px solid;
  }
}

编译为：

#main{
   color:black;
   }
#main-sidebar{
   border:1px solid;
}

当父选择器含有不合适的后缀时，Sass将会报错。

• 属性嵌套
  有些CSS属性遵循相同的命名空间（namespace）,比如：font-family,font-size,font-weight都以font作为属性的命名空间。为了便于管理这样的属性，同时也为了避免重复输入，Sass允许将属性嵌套在空间中，例如：

.funky{   
   font:{
      family:fantasy;
      size:30em;
      weight:bold;
   }
 }

编译为

    .funky{
       font-family:fantasy;
       font-size:30em;
       font-weight:bold;
    }

命名空间也可以包含自己的属性值，例如：

.funky{
   font:20px/24px{ //字体大小/行高
      family:fantasy;
      weight:bold;
   }
}

编译为：

    .funky{
       font:20px/24px;
       font-size:fantasy;
       font-weight:bold;
    }

• 占位符选择器%foo

Sass额外提供了一种特殊类型的选择器：占位符选择器（placeholder selector）.与常用的id与class选择器写法相似，只是#或.替换成了%。必须通过@extend指令调用。

• 注释/* /与//
  Sass支持标准的CSS多行注释/ */,以及单行注释//，前者会被完整输出到编译后的CSS文件中，而后者则不会，

• 变量
  SassScript最普遍的用法就是变量吧，变量以美元符号开头，赋值方法与CSS属性的写法一样。

$5em;

直接使用即调用变量：

    #main{
       $width;
    }

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加!global声明：

    #main{
       $5em !global;
       $width;
    }
    #sidebar{
       $width;
    }

编译为：

    #main{
       5em;
    }
    #sidebar{
       5em;
    }