less和scss对比

一、共同点

两者都是CSS 预处理器语言，用来扩展CSS，增加编程特性，以CSS文件为生成目标。目的是：解决CSS语法不够强的问题，比如无法嵌套书写、缺少变量和样式的复用机制，使用起来不够灵活。

预处理器语言提供的优点包括：

• （1）减少代码冗余
• （2）提高可维护性
• （3）提供样式复用机制

两者都提供了：

• （1）混入

  /* scss */
  @mixin no-bullets {
    list-style: none;
    li {
      list-style-type: none;
      margin-left: 0px;
    }
  }
  ul.plain {
    color: #444;
    @include no-bullets;
  }

  /* less */
  .bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
  }
  
  #menu a {
    color: #111;
    .bordered();
  }

• （2）嵌套

  /* scss */
  article a {
    color: blue;
    &:hover { color: red }
  }

  .clearfix {
    display: block;
    zoom: 1;
  
    &:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }

• （3）变量

  /* scss */
  $nav-color: #F90;
  nav {
    $width: 100px;
    width: $width;
    color: $nav-color;
  }

  @width: 10px;
  @height: @width + 10px;
  
  #header {
    width: @width;
    height: @height;
  }

• 运算

• 函数

二、scss简介

SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss

三、不同点

类别	scss	less
环境	Dart	Node或浏览器
使用	复杂	简单（相对而言）
功能	丰富	简单（相对而言）
处理机制	服务端处理	可以运行在Node或浏览器端
变量	$开头	@开头
文件后缀	.scss、.sass	.less

scss支持条件语句，less不支持