• less和scss



    一、变量

    对于开发者,变量应该是我们最好的朋友。如果你要重复的使用一个信息(本例中就是color),
    将它设置为一个变量就可以。这样,就可以保证自己的一致性并可能减少滚动代码来查找颜色值、
    复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。

    看下例子:

    @blue: #00c;
    @light_blue: @blue + #333;
    @dark_blue: @blue - #333;

    二、混入(mixin)

    偶尔,我们会创建一些会在样式表中重复使用的样式规则。可以用LESS,在样式表中完成。

    例子:

    .border {
    border-top: 1px dotted #333;
    }
    article.post {
    background: #eee;
    .border;
    }

    ul.menu {
    background: #ccc;
    .border;
    }
    这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。

    在Scss中,你要在样式规则前面添加@mixin声明,规定它是个嵌套。然后,通过@include来调用它:

    @mixin border {
    border-top: 1px dotted #333;
    }
    article.post {
    background: #eee;
    @include border;
    }
    ul.menu {
    background: #ccc;
    @include 

    }


    三、参数混入

    就像在CSS中有函数功能一样,这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子
    就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。

    .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来调用。


    嵌套规则

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

    例子:

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

  • 相关阅读:
    [Python]爬虫v0.1
    [Python]同是新手的我,分享一些经验
    [python]闭包到底是什么鬼?
    测试Flask应用_学习笔记
    Flask模板_学习笔记
    SQL Server Alwayson概念总结
    JDBC数据库编程:ResultSet接口
    JDBC操作,执行数据库更新操作
    接口怎么实例化?
    java数据库编程:JDBC操作及数据库
  • 原文地址:https://www.cnblogs.com/zengjie123/p/4660259.html
Copyright © 2020-2023  润新知