• LESS介绍及其与Sass的差异 3


    参数混入

    就像在CSS中有函数功能一样,这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章,内容是包含着由有用的参数组成的文件,他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如,在他们的格式中,一个简单的处理圆角的mixin是这样的:

    .border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }

    在这个例子中,.border-radius有个默认的3px的圆角,但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

    Sass中的语法很像LESS,只是使用$声明变量,然后使用前面提到的@mixin和@include来调用。

    选择器继承

    这个东西LESS并没有提供。通过这个功能,你可以将一个选择器附加到已经预先定义的选择器上,而无需再使用逗号将两者分开的写法了:

    .menu { border: 1px solid #ddd; } .footer { @extend .menu; } /* 上面的写法规则和下面的效果是一样的: */ .menu, .footer { border: 1px solid #ddd; }

    嵌套规则

    在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS,你可以嵌套id、class以及标签。对于前面提到的例子,你可以这样写:

    #site-body { … .post { …   .post-header { …    h2 { … }    a { …     &:visited { … }     &:hover { … }    }   } } }

    上面的代码最终和上面的例子(那一长串的选择器)的效果一样,但是要更容易阅读和理解的多,而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上,该功能类似于JavaScript中的this。

    运算

    这可能是你所期望的:使用数字或者变量在你的样式表中实现数学运算!

    @base_margin: 10px; @double_margin: @base_margin * 2; @full_page: 960px; @half_page: @full_page / 2; @quarter_page: (@full_page / 2) / 2;

    声明下,我也意识到我可以除以4来获得@quarter_page变量,但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中,小括号也是必须的,比如 border: (@width / 2) solid #000。

    Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

    /* Sass */ 2in + 3cm + 2pc = 3.514in /* LESS */ 2in + 3cm + 2pc = Error

  • 相关阅读:
    A标签几种状况下的样式问题
    接口Comparator和Comparable的区别和联系
    Hash算法的讲解
    我所理解的面向对象
    MySQL中select * for update锁表的范围
    Java中使用同步关键字synchronized需要注意的问题
    大数据量下高并发同步的讲解(不看,保证你后悔)
    Apache、Tomcat、JBoss、Weblogic四个常用的JavaEE服务器
    ibatis基本内容简介
    Java常见排序算法之归并排序
  • 原文地址:https://www.cnblogs.com/aimyfly/p/2960882.html
Copyright © 2020-2023  润新知