Like it's older brother HAML, Sass lacks the dependency on special characters, curly-brackets { ... } and semi-colons ;, that CSS does. Which means, Sass requires whitespace, returns to designate block and rule separation, and indentation for nesting.
The following example illustrates a CSS declaration that is associated to the parent selector by a return and then a two-space tab. Each following declaration is separated by a return. The level of indentation maintains the relationship between parent and siblings.
Notice that the nested .nav and p selectors are not duplicated but are using a return and then a two-space tab. Sass understands these relationship between selectors. The ability to nest without duplication, Sass' most fundamental feature, is clearly inherited from one of HAML's core principals.
header
width: 100%
height: 100px
.nav
text-decoration: none
background: #fff
color: #333
border-radius: 5px 5px 0 0
p
font-weight: bold
It was this un-CSS looking CSS that made Sass a popular choice with early adopters using HAML. Many developers, especially those in the Rails community, were quickly replacing HTML with HAML and Sass was a clear choice as a replacement for CSS.
Some would argue, it was this same un-CSS looking CSS that kept many new users from using Sass. This new way of writing CSS, this new syntax, meant that your current code had to be either converted or trashed. To new users, not familiar with how CSS preprocessors worked, it was one thing to use Sass and it was another thing entirely to convert a project over.