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

本来预计昨天就可以完成这篇的,由于工作原因,拖到了现在。接下来的一个月应该会很忙,工作上有新的项目要开始做,尽可能的会在下班后抽时间继续学习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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,542评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,822评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,912评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,449评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,500评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,370评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,193评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,074评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,505评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,722评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,841评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,569评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,168评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,783评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,918评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,962评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,781评论 2 354

推荐阅读更多精彩内容