从语法开始但是语法也不是一两句的事情，首先看基本的导入，使用
一，sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，建议scss.
二，导入
使用@import导入但是和css导入有点区别。
比如基础的文件命名：_mixin.scss导入的时候可以省略下划线写成：@import "mixin"
三，注释
sass有两种注释方式，一种是标准的css注释方式/* */，
另一种则是//双斜杆形式的单行注释，
注意：不过这种单行注释不会被转译出来。
四，变量，必须是以$开头，！default表示默认值,sass是没有局部变量的
1，普通变量
$f:12px; body{font-size:$f;}2,默认变量
$f:12px !default; body{ font-size:$f; }3,覆盖默认变量
$f:12px !default; $f:14px; body{ font-size:$f; }结果font-size：14px;
4,特殊变量：两种情况，一是作属性，二是作值。都以#{$name}的形式
作属性： $direction:top !default; .border-#{$direction}{ border-#{$direction}:1px solid #ccc; }做值： $f:12px !default; $s:1.5 !default; body{ font:#{$f}/#{$s}; }
作值这里有 点不明白，不能直接写成font：$f/$s;这样吗？
5，多值变量，有两种：list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。
list：可用nth($var,$index)取值如：length（$f,$s）
一维：$px:5px 1px 2px 3px;
二维：$px:(5px 1px),(2px 3px);
eg: $linkColor:#222 #333 !default; a{ color:nth($linkColor,1); &:hover{color:nth($linkColor,2);} }map:map数据以key和value成对出现，其中value又可以是list。
可通过map-get($map,$key)取值
格式：$map:(key1:val1,key2:val2);
map-m($map1,$map2),map-key($map),map-values($map)
eg:
定义： $heading:(h1:2em,h2:1em,h3:3em); 使用： @each $header, $size in $headingss{ #{$header}{ font-size:$size; } }
转载于:https://www.cnblogs.com/937522zy/p/5531537.html
相关资源：JAVA上百实例源码以及开源项目