sass基本语法
1.定义一个变量，变量定义以$开头，以冒号分隔开。
$blue:#1875e7;
div{
color:$blue;
} 编译之后的css代码:
div {
color: #1875e7;
}
定义一个带默认值的变量。默认变量只需要在普通变量后面加上 !default
$baseLineHeight:1.5 !default;
$baseLineHeight:3;
body{
line-height:$baseLineHeight;
} 编译后的css代码：
body {
line-height:;
}
line-height的默认值是1.5，然后被3覆盖了，所以值是3. 和赋值的先后顺序无关，即使把默认值放到赋值的后面，结果也还是3.
此外，sass局部变量和全局变量（sass 3.4之后的版本才会有局部变量，3.4之前的都是全局变量）。变量值后面加上!global 变成全局变量。
/* sass3.4之后的版本 */
$fontSize:16px;
body{
$fontSize:20px;
font-size:$fontSize;
}
p{
font-size:$fontSize;
} 编译之后的css代码：
body {
font-size: 20px; } p {
font-size: 16px; }//3.4之前的版本值是20px，因为都是全局变量
使用全局变量之后，sass 3.4之后才能转换成功
$fontSize:16px;
body{
$fontSize:20px !global;
font-size:$fontSize;
}
p{
font-size:$fontSize;
} 转换之后css代码：
body {
font-size: 20px; }
p {
font-size: 20px; }
变量作为属性名来使用(一般我们定义的变量都是属性值)，要以#{$variableName}形式。
$side:left;
div{
border-#{$side}-radius:5px;
}
//转化之后的css代码：
div {
border-left-radius: 5px; }
2.变量复杂一点的用法，多值变量。多值变量分为list类型和map类型，list类似js数组，map类似js中的对象。list数据可以通过空格，逗号，小括号分隔多个值，常用的函数，nth($list,$index), length($list), append($list, $value, [$separator]).
$pxs:5px 10px 15px 20px;
h8{
margin-left:nth($pxs,1);
&:hover{
margin-top:nth($pxs,2);
}
}
//转换之后的css代码：
h8 {
margin-left: 5px;
}
h8:hover {
margin-top: 10px;
}
list另外一个栗子，
$pxs:5px,10px,15px,20px;
h9{
$len:length($pxs);
margin-right:nth($pxs,$len);
}
//转换之后的css：
h15 {
margin-right: 20px;
}
map类型的例子。。。map数据以key和value成对出现。看看w3cplus上的一个例子。开始的时候，总是转换失败，后面发现是sass版本的问题，我sass用的是3.4.21版本，之前用的是3.2.13老是转换失败，还以为是语法写的有错误呢。。。
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//转化过后的css
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
3.嵌套，嵌套包括两种：选择器嵌套 和 属性嵌套。
选择器嵌套，在一个选择器中嵌套另一个选择器，通过&引用外层选择器。
$blue:#1875e7;
a{
color:red;
&:hover{
color:$blue;
}
}
//转换后的css
a {
color: red;
}
a:hover {
color: #1875e7;
}
属性嵌套，有些属性拥有相同的前缀，可以提取出来，书写更方便。
/*属性嵌套*/
h16{
margin:{
left:5px;
right:15px;
}
}
//转换之后的css
/*属性嵌套*/
h16 {
margin-left: 5px;
margin-right: 15px;
}
4.继承， 选择器的继承可以让选择器继承另一个选择器的所有样式，要使用关键词@extend ，后面紧跟要继承的选择器。
/*选择器的继承*/
.class1{
border:1px;
}
.class2{
@extend .class1;
font-size:120%;
}
//转换之后的css
.class1, .class2 {
border: 1px;
}
.class2 {
font-size: 120%;
}
占位选择器% ，占位选择器的优势是，对于预先定义的基础样式，需要的时候使用@extend去继承它，不需要的时候，不会继承到。
%ir{
color: transparent;
border:;
}
#header{
h1{
@extend %ir;
width:300px;
}
h2{
width:500px;
}
}
.ir{
@extend %ir;
}
//转换之后的css
#header h1, .ir {
color: transparent;
border:;
}
#header h1 {
width: 300px;
}
#header h2 {
width: 500px;
}
5.函数，sass已经定义好了很多函数，可以直接使用，如：length($list) ,nth($list,$n) .也可以自己定义一个函数使用@function。
下面是把px转换成rem的例子。
$baseFontSize:16px!default;
@function pxToRem($px){
@return $px/$baseFontSize*1rem;
}
body{
font-size:pxToRem(10px);
}
//转换之后的css
body {
font-size: 0.625rem;
}
6.混合（mixin），混合定义可重用的代码块，sass中通过@mixin来声明混合，@include来调用。
@mixin left($value:10px){
float:left;
margin-right:$value;
}
h16{
@include left(5px);
}
h17{
@include left();
}
//转换后的css
h16 {
float: left;
margin-right: 5px;
}
h17 {
float: left;
margin-right: 10px;
}
@content 用来解决css3的@media问题。。。。。。。。。。。。
@mixin 可以接受一整块样式，接受的样式从@content开始。
@mixin max-screen($res){
@media only screen and (max-width:$res){
@content;
}
}
@include max-screen(480px){
body{color:red;}
}
//转换后的css
@media only screen and (max-width: 480px) {
body { color: red; }
}
7.条件判断及循环。
a.@if{}@else{}
b.@if($condition,$if_true,$if_else)
c.@for($i from <start> through <end>) 包含end
d.@for($i from <start> to <end>) 不包含end
e.@each $item in <list or map>
之前在写@each 的时候碰到个问题。我之前使用的是sass3.2.13版本 对于对字段循环不支持，sass3.3.0之后的版本才会支持哦。不然转换时一直会报错，不能成功。
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//转换成css
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
把px转换成rem，支持同时输入多个值，以及一些特殊值如0的输入。
@function rem($values...) {
$all_rem: ();
$separator: list-separator($values);
@each $value in $values {
$rem: null;
@if type-of($value) == list {
// List: process each value on its own
$rem: rem($value...);
} @else if is_zero($value) {
// Zero: enforce no units
$rem: 0;
} @else if need_convert($value) {
// if need convert we will convert it to rem depend on the base font size.
$base_font_value: strip_units($rem_font_size);
$rem: (strip_units($value / $base_font_value) * 1rem);
} @else {
$rem: $value;
}
$all_rem: append($all_rem, $rem, $separator);
}
@return $all_rem;
}
@function strip_units($num) {
@return $num / (($num * 0) + 1);
}
@function is_zero($value) {
@return
type-of($value) == number
and strip_units($value) == 0;
}
@function need_convert($value) {
$px_units: 'px', 'pt';
@return
type-of($value) == number
and not unitless($value)
and index($px_units, unit($value));
}
px convert to rem
测试一下
div{
padding:rem(0 5px 0 10px);
}
//转换之后的css
div {
padding: 0rem 0.3125rem 0rem 0.625rem;
}