sass和less语法

一、sass定义变量

sass语法中是用$来定义变量

/* 定义变量 单位也带上，运算可以带着单位算 */
$minWidth: 100px;
$maxWidth: 200px;
$transRotate: 90deg;

div {
    position: absolute;
    width: $minWidth;
    height: $minWidth;
    left: ($maxWidth - $minWidth) / 2;
    top: ($maxWidth - $minWidth) / 2;
}

less语法中是用@来定义变量

/* 定义变量 */
@minWidth: 100px;
@maxWidth: 200px;
@transRotate: 90deg;

div {
    position: absolute;
    width: @minWidth;
    height: @minWidth;
    left: (@maxWidth - @minWidth) / 2;
    top: (@maxWidth - @minWidth) / 2;
}

二、定义函数

sass语法中是用 @function 来定义变量

@function rotateTransY($n) {
  @return ($n - 1) * $transRotate;
}

less语法中是用 .函数名 来定义变量，可以看出类似于scss的混入

.rotateTransY(@n) {
   transform: rotateY((@n - 1) * @transRotate);
}

三、if判断

sass语法中是用 @if、@else if、@else 来判断

@function rotateTransX($n) {
  @if($n == 5) {
    @return $transRotate;
  } @else if($n == 6) {
    @return - $transRotate;
  }
}

less语法则是提供when

/* (),() 相当于JS中的 || */
.size(@width,@height) when (@width = 100px),(@height = 100px){
  width: @width;
  height: @height;
}

/* ()and() 相当于JS中的 && */
.size(@width,@height) when (@width = 100px) and (@height = 100px){
  width: @width;
  height: @height;
}

四、混入器

sass语法中是用 @mixin 来定义，@include来使用

@mixin transLi($w) {
  width: $w;
  height: $w;

  @include transLiByType($w / 2, 'normal');
}

@mixin transLiByType($w, $type) {
  &:nth-child(1) {
    @include trans($w, 1, $type);
  }

  &:nth-child(2) {
    @include trans($w, 2, $type);
  }

  &:nth-child(3) {
    @include trans($w, 3, $type);
  }

  &:nth-child(4) {
    @include trans($w, 4, $type);
  }

  &:nth-child(5) {
    @include trans($w, 5, $type);
  }

  &:nth-child(6) {
    @include trans($w, 6, $type);
  }
}

less语法中的函数相当于scss的混入

五、语法用例

sass

$minWidth: 100px;
$maxWidth: 200px;
$transRotate: 90deg;

@function rotateTransY($n) {
  @return ($n - 1) * $transRotate;
}

@function rotateTransX($n) {
  @if($n == 5) {
    @return $transRotate;
  } @else if($n == 6) {
    @return - $transRotate;
  }
}

/* 携带参数 */
@mixin trans($w, $n, $type) {
  @if($type == 'normal') {
    @if($n == 1) {
      transform: translateZ($w);
    } @else if($n < 5) {
      transform: rotateY(rotateTransY($n)) translateZ($w);
    } @else {
      transform: rotateX(rotateTransX($n)) translateZ($w);
    }
  } @else {
    @if($n == 1) {
      transform: translateZ($w) scale(1.2);
    } @else if($n < 5) {
      transform: rotateY(rotateTransY($n)) translateZ($w) scale(1.2);
    } @else {
      transform: rotateX(rotateTransX($n)) translateZ($w)  scale(1.2);
    }
  }
}

@mixin transLi($w) {
  width: $w;
  height: $w;

  @include transLiByType($w / 2, 'normal');
}

@mixin transLiByType($w, $type) {
  &:nth-child(1) {
    @include trans($w, 1, $type);
  }

  &:nth-child(2) {
    @include trans($w, 2, $type);
  }

  &:nth-child(3) {
    @include trans($w, 3, $type);
  }

  &:nth-child(4) {
    @include trans($w, 4, $type);
  }

  &:nth-child(5) {
    @include trans($w, 5, $type);
  }

  &:nth-child(6) {
    @include trans($w, 6, $type);
  }
}

@keyframes cube {
  from {
      transform: rotateX(13deg) rotateY(0deg);
  }
  to {
    transform: rotateX(13deg) rotateY(360deg);
  }
}

.cube {
  position: relative;
  width: $maxWidth;
  height: $maxWidth;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: rotateX(13deg);
  animation: cube infinite 5s linear;

  li {
    position: absolute;
    background: red;
    display: inline-block;
    border: 1px solid #999;
  }

  .min-box {
    position: absolute;
    width: $minWidth;
    height: $minWidth;
    left: ($maxWidth - $minWidth) / 2;
    top: ($maxWidth - $minWidth) / 2;

    li {
      @include transLi($minWidth);
    }
  }

  .max-box {
    position: absolute;
    width: $maxWidth;
    height: $maxWidth;

    li {
      opacity: 0.2;
      transition: all 1s ease;
      @include transLi($maxWidth);
    }

    &:hover {
      li {
        opacity: 0.6;
        @include transLiByType($maxWidth, 'hover');
      }
    }
  }
}

less用例以后再补