less/sass 相对于CSS有什么优势？

Question

less/sass相对于直接写css有什么优势？好的方面。
css

#contextMenu {
    position: fixed;
    width: 60px;
}

#contextMenu ul {
    border-radius: 3px;
    text-align: center;
    background: #fff;
    color: #666;
}

#contextMenu ul li:first-child {
    border-radius: 3px 3px 0 0;
}

#contextMenu ul li:last-child {
    border-radius: 0 0 3px 3px;
}

#contextMenu ul li {
    line-height: 20px;
}

#contextMenu ul li:hover {
    background-color: #eaf8fe;
    cursor: pointer;
}

less

#contextMenu {
    position: fixed;
    width: 60px;
    ul {
        background: #fff;
        border-radius: 3px;
        color: #666;
        text-align: center;
        li {
            line-height: 20px;
            &:first-child {
                border-radius: 3px 3px 0 0;
            }
            &:last-child {
                border-radius: 0 0 3px 3px;
            }
            &:hover {
                background-color: #eaf8fe;
                cursor: pointer;
            }
        }
    }
}

了解学习less sass，但实际项目中还是直接写css，如果样式代码可以复用的不是很多的话，但从代码量(行数)来看less/sass并不比css少。

我觉得一点特别好，嵌套书写看上去很清爽，一块内容的样式层级特别清晰。但是使用less/sass对浏览器而言还要多一步解析成css的操作。

你们项目中写样式直接写css还是写less/sass/stylus得多呢，谈谈你们的看法呗？

Answer 1

说说我目前用的最多的吧

1. 支持嵌套

2. 支持变量定义

3. 支持“模板函数”（自己定义的名称。。。），比如有些CSS需要做兼容前缀的话，你可以这样使用一个模板函数定义一下，调用的时候传入正常值就可以了。会自动生成前缀的CSS

Answer 2

光是能少打字就让我再回不去了

Answer 3

// 支持循环
@for $i from 0 to 20 {
    &.trans-#{$i} {
        transform: translateX(-$i * 25 + %);
    }
}

Answer 4

这里解释的比较详细

Answer 5

先回答你第一个问题，我个人所见，在学生中直接写css的多；而我在职的朋友用的less/sass/stylus多。
从不同角度来说：

1.刚刚接触的时候：哇，我少敲好多代码啊，以后就用这个了。
2.做个单页应用或者简单的小程序：妈呦，我怎么引用这么多，代码复用度不高啊，我怎么还用less/sass/stylus（可是你已经回不去了，真的蛮好用的）
3.在维护大项目：产品经理又要改这改那，我怎么找啊。诶，我定义一个变量咯，替换一下等等；（说实话，你代码明显更加工整，就像老师改作业一样，看着这么整洁，要找哪个bug或者改什么很轻快，看着不会烦）

Answer 6

我更倾向于手写css,less,sass使用的人只图于方便,结果生成的css文件内容各种嵌套,考虑过css解析的性能吗?css性能优化需要方方面面的进行,有人说不方便修改..找不到类名,什么的?命名规范请了解一下