less学习笔记5-语言特性(import)

作者: 程恺 | 来源:发表于2017-09-08 16:28 被阅读286次

    本来预计昨天就可以完成这篇的,由于工作原因,拖到了现在。接下来的一个月应该会很忙,工作上有新的项目要开始做,尽可能的会在下班后抽时间继续学习less的,不过可能更新的没有现在这么频繁了,不过马上就是周末了,争取在周末再出一篇,周末那篇出了后,语言特性这部分就剩一两篇了,下面就是less函数部分了,函数部分原文阅读起来不会很难,打算放在一篇里面全部写进去。


    import(导入)

    import准则

    将其他样式表中的样式导入进当前样式表

    在标准css中,@import声明必须放在其他类型的声明之上,也就是放在顶部。但是在less中,@import声明可以放在任何地方。

    .foo{
        background: #900;
    }
    @import "this-is-valid.less";
    

    文件后缀名

    在less中,@import声明会根据引入的文件的后缀进行相应的解析。

    • 如果文件是.css的后缀,该文件将会被解析成css样式,然后@import语句会保持原样。
    • 如果文件是其他类型的后缀的话,文件会被解析成less文件,然后进行导入。
    • 如果文件没有任何后缀,将会为文件添加.less的后缀,并且当成less文件进行导入。
    @import "foo";//会被当成foo.less导入
    @import "foo.less";//导入foo.less
    @import "foo.php";//会被当成foo.less导入
    @import "foo.css";//导入foo.css
    

    使用下面所讲的参数可以用来复写这个行为

    import options

    less提供了数种后缀给css的@import语句,可以更加灵活的去使用外部文件。

    语法:@import(keyword)"filename";
    下面是已经实现了的import准则:

    • reference:使用less文件到时不将其输出。
    • inline:将源文件包含进来但是不进行处理。
    • less:无论文件后缀是什么类型,都当成less格式的文件。
    • css:无论文件后缀是什么类型,都当成css格式的文件。
    • once:只引入文件一次(为默认行为)。
    • multiple:引入文件数次。
    • optional:当文件没找到时会继续编译。

    @import语句允许多个keyword,你需要用逗号将这些keyword进行分隔:

    @import (optional, reference) "foo.less";
    

    reference

    使用@import (reference) 导入外部文件,导入的样式不会添加到编译输出,除非该样式被引用。

    发布于v1.5.0

    @import (reference) "foo.less";
    

    可以想象一下在导入的文件中,reference会使所有的指令和选择器都会被标记上一个引用标记,导入时是正常的,但是生成css的时候,被标记的选择器不会输出到css上,被标记的样式不会在你生成的css中出现,直到被标记的样式被当成mixins或者extend使用的时候。
    此外,reference会生成不同的结果,取决于哪个方法被调用(mixin或者extend):

    • extend:当一个选择器被继承的时候,只有新的选择器会被被标记成"非reference",它会被放置在引用@import语句的位置。
    • mixins:当一个被标记的样式被当成一个隐式的mixin时,样式会被混入并且标记为"非reference",然后被放置在引用这个样式的地方。
      你可以通过做一些像下面一样的事情来将某些指定的样式从一个样式库(像bootstrap )中加进来:
    .navbar:extend(.navbar all){ }
    

    你只会将.navbar相关的样式从bootstrap中引用进来。

    inline

    使用@import(inline)引用外部文件,但是不处理它们。

    发布于v1.5.0

    @import (inline) "not-less-compatible.css";
    

    当一个css文件可能无法被less所兼容时,你可以使用这个特性。尽管less支持大部分的标准css,但是它不支持在某些地方的comments和所有没有修改css的css hacks。
    所以你可以使用这个特性将文件包含进输出中,因此所有的css都会在一个文件中。

    less

    使用@import (less)将会把导入文件解析成less格式,无论文件是什么格式。

    发布于v1.4.0

    @import (less) "foo.css";
    

    css

    使用@import(css)将会把文件解析成常规的css文件,无论文件是什么格式。这意味着import语句会保持原样。

    发布于v1.4.0

    @import (css) "foo.less";
    
    编译为:
    @import "foo.less";
    

    once

    @import语句的默认行为,意味着文件只会被导入一次,后续的导入相同文件的语句会被忽略。

    发布于v1.4.0

    @import (once) "foo.less";
    @import (once) "foo.less";//该语句会被忽略
    

    multiple

    使用@import(multiple)会允许导入多个相同名字的文件,这行为跟once截然相反。

    发布于v1.4.0

    //在文件foo.less中
    .a{
        color: green; 
    }
    //在文件main.less
    @import (multiple) "foo.less";
    @import (multiple) "foo.less";
    
    编译为:
    .a{
        color: green;
    }
    .a{
        color: green;
    }
    

    optional

    使用@import(optional)只会导入存在的文件。当导入一个找不到的文件时,如果没有optional的参数,less将会抛出一个fileerror的错误然后停止编译。

    发布于v2.3.0

    相关文章

      网友评论

        本文标题:less学习笔记5-语言特性(import)

        本文链接:https://www.haomeiwen.com/subject/lxevjxtx.html