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

二、定義函數(shù)

sass語法中是用 @function 來定義變量

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

less語法中是用 .函數(shù)名 來定義變量够庙，可以看出類似于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語法中的函數(shù)相當于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;
  }
}

/* 攜帶參數(shù) */
@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用例以后再補