Sass有什么优势

Sass与CSS有什么区别？

1.嵌套

第一个对Web开发人员的工作流程造成最大影响是Sass语法中的代码嵌套和缩进。使用常规的CSS，每个元素在自己的“声明块”中独立变化，你可以想象一下，如果一个房间里满地都是不同大小的箱子会是什么样子。而通过Sass，你可以在嵌套的块里将相关的元素组合在一起，然后想象一下，同样是那个房间，现在，一些小箱子已经放在大箱子里了，你可以再次看到可爱的地板了。

2.变量

// 实用的：结构变量
  $pageWidth: 100%; 
  $containerWidth: 960px; // 描述的：颜色变量
  $grey: #E3E3E3; 
  $blue: #1f605b;
  $white: #FFFFFF;
  $black: #000000;

3.局部

Sass也通过另一种强大的方式帮你组织文件——使用局部系统。这是一种组织各种不同部分样式表的方法，样式表只在需要时才被引入、使用。

// Reset, Variables, Mixins, Global Settings, 
 @import "variables";
 @import "helpers/mixins"; 
 @import "helpers/normalize"; 
 @import "helpers/global"; // The SITE incl. Global Elements Styles @import "site"; 
 @import "credits";

4.混合宏

Sass的另一大特点是，你可以在你的项目中创建和使用自己的混合宏，这会帮助设计人员节省大量的时间和代码。混合宏是小的代码片段（类似局部），你可以在项目中任何需要的地方，通过@include来复用它们。

// Border Radius Mixin // Use as: @include border-radius(10px); 
@mixin border-radius($radius) { 
      -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
      -khtml-border-radius: $radius; 
      border-radius: $radius;
 }

5.其它东西

首先是能够在样式表中使用数学函数。这在创建不同大小的网格时是特有用的，或者可以为实现更好的动态响应式设计
另一个很好的例子是不起眼的父容器选择器——连字符&——这使设计人员能够通过选择器元素创建专用的规则，例如在一个嵌套的代码块中定义链接元素的鼠标悬停状态。

less,sass,stylus三者的区别

1.Sass和Less语法严谨、Stylus相对自由。因为Less长得更像 css，学习起来更容易。
2.Sass 和 Compass、Stylus 和 Nib 都是好基友。
3.Sass 和 Stylus 都具有类语言的逻辑方式处理：条件、循环等，而 Less 需要通过When等关键词模拟这些功能，这方面 Less 比不上 Sass 和 Stylus。
4.Less 在丰富性以及特色上都不及 Sass 和 Stylus

Sass的官方网站。.