sass -->scss todoing

www.sass.hk/docs/

异同处

· 文件扩展名不同，文件后缀分别是“.scss”和“.sass”

· sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；

· scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟；

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

使用

//---------------------
@import './test.scss' ; //导入外部scss文件
//---------------------
$left : left ;
.father02 {
   width : 300px ;
   height : 300px ;
   border : $border ; //使用全局变量
   border- #{$left} : 2px solid purple ; //使用字符串插值之前必须先声明
}
//----------继承-----------
.container { // 这也是有效的样式
   color : purple ;
   border : 2px dashed purple ;
}
.myText {
   @extend .container; //这里将继承.container类的所有样式
   font-size : 22px ;
}
//------------%继承 Placeholder ---------
%m5 { background-color : lightblue ;} // 不是个有效的样式
.P1 { @extend %m5 ; }
//-----------@mixin----------
@mixin normalStyle {
   //使用@mixin命令定义可重复使用的代码块
   width : 300px ;
   height : 100px ;
   color : black ;
   background-color : lightblue ;
}
.container {
   @include normalStyle ;
   //使用@include 命令引用@mixin定义的代码块
}
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}
.icon {
  @include size(32px);
}
 
.cover {
  @include size(100%, 10em);
}
//-----------@mixin 与 % Placeholder  区别----------
/*
1. placeholder 不支持变量
2. placeholder 会将所有使用它的代码挪到一起,从而避免它的代码被多次复制

*/
@mixin center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.container {
  @include center;
}
 
.image-cover {
  @include center;
}
// ===result
.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
//-----------@function  需要@return ----------
@function double ( $sn ){ //SCSS允许自定义函数
   @return $sn * 2 ;
}
.myText {
   border : 1px solid red ;
   width : double ( 200px ); //使用在SCSS中自定义的函数
}

compass