Less 知多少 ？

菜单中的雪碧图

@iconWidth: 14;

// 菜单导航icon
.NavIcon(@n, @i: 1) when (@i <=@n) {
  &.nav-@{i} {
    background-position-y: unit(@iconWidth * (1 - 2 * @i), px);
  }

  .NavIcon(@n, @i+1);
}

.NavIconHover(@n, @i: 1) when (@i <=@n) {
  &.nav-@{i} {
    background-position-y: unit(@iconWidth * 2 * (1 - @i), px);
  }

  .NavIconHover(@n, @i+1);
}

.menu-item {
  .nav-icon {
    display: inline-block;
    width: unit(@iconWidth, px);
    height: unit(@iconWidth, px);
    background-image: url('/images/menu_icon.png');
    background-repeat: no-repeat;
    background-size: unit(@iconWidth, px) auto;
    background-position-x: 0;
    .NavIcon(25);
  }

  &:hover {
    .nav-icon {
      .NavIconHover(25);
    }
  }
}

媒体查询

@mediaBaseWidth: 1440;

.MediaStyle(@obj) {
  each(@obj, {
      @{key}: @value * @mediaBaseWidth;
    }

  );

  // 根据自己需要来配置
  @mediaList: 1920, 1680, 1440, 1366, 1280, 1024; 

  .for(@data, @i: 1) when(@i =< length(@data)) {
    @width: extract(@data, @i);

    @media screen and (max-width: unit(@width, px)) {
      each(@obj, {
          @{key}: @value * (@width / @mediaBaseWidth);
        }

      );
    }

    .for(@data, (@i + 1));
  }

  .for(@mediaList);

}

// 用法

.MediaStyle( {
    width: 1200px;
    height: 600px;
  }
);

scss 版本大同小异，切换对应语法即可

持续更新…