sass基础语法

版权声明：转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/89295750

变量

$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;

/*加减乘除*/
.div {
  font: (10px*8); 
  width: $width/2; // 引用不需要
  height: (500px/2); // 要加括号才行
}

$color1: #010203;
$color2: #040506;
$color: #a69e61;

/*颜色运算*/
.p {
  color: mix($color1, $color2); // 取混合色
  color: red($color);  // 获取rgb中的r部分
  color: green($color);
  color: blue($color);
}

嵌套

子元素嵌套

$width: 300px;
$color: #ffe932;

.div1 {
  width: $width;

  .div-inner {
    background-color: $color;
  }
}

属性嵌套

.div2 {
  background-color: $color;

  .div-inner {
    border: {
      top: 1px solid red;
    }

    background: {
      color: red;
    }
  }
}

&引用父元素嵌套

.div3 {
  width: $width;

  &:after {
    content: '';
    display: block;
  }

  &.hello {
    background-color: blue;
  }
}