zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    弹出框背景色透明滚动条滚动仍然居中
    日常css和js小知识点记录
    手机端上传未知图片大小,js设置宽高比例
    IE6兼容透明背景图
    css考核点整理(七)-css sprites技术的使用心得
    css考核点整理(六)-水平居中定位的几种方式
    css考核点整理(五)-css3新增的常用属性
    css考核点整理(四)-css盒模型
    css考核点整理(三)-css选择器的使用
    css考核点整理(二)-css层叠机制
  • 原文地址:https://www.cnblogs.com/aimyfly/p/2960882.html
Copyright © 2011-2022 走看看