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

lifesimple
  • 816

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得多呢,谈谈你们的看法呗?

回复
阅读 7.3k
6 个回答

说说我目前用的最多的吧

  1. 支持嵌套

  2. 支持变量定义

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

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

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

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

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

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

宣传栏