sass基础语法

变量

$width: 300px; // 定义一个变量

width: $width; // 使用定义的变量

$str: 'hello.jpeg'; 

background-image: url('./img/'+$str); // 使用+拼接

background-image: url('./img/#{$str}'); // 使用#{}拼接

数据类型

$width: 300px;

/*number*/
.div {
  width: $width;
}

$color: #ffe932;

/*color*/
.div {
  background-color: $color;
}

$str: 'hello.jpeg';
$strClass: 'hello';

/*string*/
.div.#{$strClass} {
  background-image: url('./img/'+$str);
}

$list:(100px, 200px, 300px, 400px);

/*list*/
.div {
  width: nth($list, 1); // 返回list的第一个值，即100px(从1开始计数)
  zoom: index($list, 100px); // 返回参数出现的位置，即1
  margin: join($list); // 设置4个位置的margin
}

$map: (top: 1px, left: 2px, bottom: 3px, right: 4px);

/*map*/
.div {
  top: map-get($map, top); // 返回键为top的值
  bottom: map-get($map, bottom); // 返回键为bottom的值
}

计算功能

$num1: 100px;
$num2: 200px;
$width: $num1+$num2;

/*加减乘除*