### Sass的语法基础 Sass变量 ```javascript 一般值，这个值可以是数字、字符串 $width:10px; div{ font-size:$width; } div{ font-size:10px; } // 编译出来的CSS代码 ------------------------------------------------- $width:10px !default; .div1 { width:$width; } .div2 { $width:20px; width:$width; } .div1{ width:10px; } .div2{ width:20px; } -------------------------------------------- 变量的作用域:（1）全局变量；（2）局部变量。 $color:red; //定义全局变量 body{ $color:green; //定义局部变量 div { color:$color; //调用局部变量 } } ``` 数据类型 ```javascript 数字值 $lineHeight:1.5; $fontSize:14px; $width:50%; 字符串：有引号---无引号 $logoUrl: "images/logo.png"; $str2:bold; 布尔值：用于“@if…@esle…语句” $a:10px; $b:5px; @if($a>$b){ ... } @else { ... } 颜色值 （1）关键字颜色值，如red； （2）十六进制颜色值，如#FFFF00； （3）RGB颜色值，如rgb(255,255,0)； （4）HSL颜色值，如；hsl(360,50%,50%)； 列表值 $margin:20px 40px; $border:1px solid gray; Map值 $变量名: ( 键名1:值1, …… 键名n:值n ); ```