less学习笔记1-语言特性(概览)

本人作为一名今年刚毕业的应届生,目前的工作方向是前端开发,学习前端到现在差不多14个月,有9个月的工作经验。
从几个月前就有在计划学习css预处理相关的内容,结果被各种耽误,最近终于可以开始学习less。
在学习使用之前我们需要先安装less
可以通过npm进行安装,下载并安装node就可以使用npm,具体的安装过程很简单就不详细说了
笔记参考自less官网,进行个人理解的翻译,方便自身理解,作为自身学习总结所用,之后会慢慢的加上自身练习的代码。


变量

变量名称定义需要@前缀

@blue: #5b83ad
@light-blue: @blue + #111;
.test{
    color: @light-blue;
}

变量实际上是“常量”,因为它们只被定义声明一次

mixin(混合/混入):

mixin是将一个定义的样式规则包含进另外一个规则中

.background{
    background-image: url('test.png');
    background-repeat: no-repeat;
    background-size: 80% 80%;
}

如果我们需要在其他的样式规则中使用到上述的样式的话,可以直接在规则中引入。

#banner .img{
    width: 50px;
    height: 50px;
    .background;
}

嵌套规则:

#header{
    color: red;
    .nav{
        display: inline-block;
    }
    .logo{
        width: 30px;
        height: 30px;
    }
}

编译为:

#header{
    color: red;
}
#header .nav{
    display: inline-block;
}
#header .logo{
    width: 30px;
    height: 30px;
}

在嵌套规则中可以使用伪选择器(&代表当前选择器的父选择器)

.list{
    color: blue;
    &:after{
        content: " ";
        display: block;
        height: 10px;
        width: 10px;
        background-color: #000;
    }
}

嵌套准则和冒泡

像media和keyframe的指令可以嵌套在和选择器一样的地方。冒泡就是将指令放置在顶部,并且保持同一个规则集中的其他元素的相对顺序不变。
条件指令,像@media,@supports,@document可以将选择器复制进它们的规则里面

.screen-color{
    @meida screen{
        color: green;
        @media (min-width: 768px){
            color: red;
        }
    }
    @media tv{
        color: black;
    }
}

编译为:

@media screen{
    color: green;
}
@media screen and (min-width: 768px){
    color: red;
}
@media tv{
    color: black;
}

其余的非条件指令,如font-face或者keyframes 也会冒泡,它们的身体不变

#a{
    color: blue;
    @font-face{
        src: some-url;
    }
    padding: 2px;
}

编译为:

#a{
    color: blue;
}
@font-face{
    src: some-url;
}
#a{
    padding: 2px;
}

运算:

算术运算操作符 +,-,,/ 可以对任意数字,颜色或者变量进行运算。
如果可能,运算操作符会在加,减或者比较之前代入单位并且进行转换,结果的单位会等同于运算式中最左边的第一个显式单位。
如果不能进行转换或者无意义时,会忽略单位。可能的转换: px->cm,rad->%

@cvs: 5cm+10mm;//6cm
@cvs: 2-3cm-5mm;//1.5cm 待定
@cvs: 2+5px-3cm;//4px
@base: 5%;
@filler: @base  2;//10%
@other: @base + @filler;//15%
@base-color: #000;
.test{
    color: #fff / 4;
    background-color: @base-color + #654;
    width: 50% / 2 +@filler
}

乘法和除法不会对数字进行转换,在大部分的情况下都是无意义的,比如一个长度乘上另外一个长度得到面积,而css并不支持面积。less会计算数字本身,然后分配一个显式的单位给计算结果。

@base: 2cm  3mm;// 6cm

色值会分割成red,green,blue和α维度,计算会分别作用在rgb三个量纲上。如果用户让两个色值相加,green量纲的计算结果会等于两个色值的green量纲的值的相加结果,red量纲和blue量纲也是同样计算方式。如果用户将一个色值和一个数字进行相乘,每个量纲都会乘上该数字。
注:算术运算在α上是没有定义的,因为色值的数学计算上是没有约定的标准含义的,不要依赖于当前方式,因为有可能在下一个版本就发生改变了。
色值上的计算总是得到有效的色值,如果某一个颜色量纲的计算结果超出了FF或者小于00,最后得到的结果会等于FF或者00,如果α的计算结果大于1.0或者小于0.0,最后结果会等于1.0或者0.0。

@color: #224488 / 2; //#112244
@background-color: #112244 + #111; //#223355

less可以理解色值和单位的之间区别:

@var: 1px + 5;

这个变量的最终输出为6px

转义(escaping)

escaping允许使用任意字符串来作为属性或者变量的值,任何在~'anything' 或者 ~"anything" 将会被直接使用除了插值(interpolation)。

.test{
    color: ~"green";
}

编译为:

.test{
    color: green;
}

函数

less内置了多种函数用于转换颜色,处理字符串,算术运算等。函数在函数手册中有详细介绍。用法如下:

@base: #f500f5;
@width: 0.5;
.test{
    width: percentage(@width);//50%
    color: saturate(@base, 5%);
}

命名空间和访问器(namespaces&accessors)

有些时候,你想要组合你的变量或者mixin,无论是出于组织目的还是只是想实现一些封装,你可以很直观的在less中实现。

@color: #ff4e56
#bundle{
    .button{
        display: block;
        background-color: @color;
        width: 100px;
        height: 30px;
        border-radius: 5px;
        &:hover{
            background-color: @color - #222;
        }
    }
    .tab{ ... }
    .input{ ... }
}

如果你将.button这个类加入 #header button中,可以这样做:

#header{
    color: green;
    #bundle > .button
}

注:变量在某命名空间内定义声明,该变量的作用范围仅限于该空间中,外部的空间中该变量将无法不可用。因此无法像上面的语法(#namespace > .mixin-name)那样进行,(#namespace > @var)是不行的

作用范围(scope)

scope在less中与编程语言中的非常相似,变量和mixin会先在当前规则中寻找,如果无发现,编译器会当前规则的上一级寻找,以此类推。

@var: red;
#page{
    @var:  blue;
    #nav{
        color: @var;//blue
    }
}

变量和mixin不一定要在其使用之前定义声明,下面例子同上面例子:

@var: red;
#page{
    #nav{
        color: @var;//blue
    }
    @var: blue;
}

注释

可以使用行注释或者块注释

/
这里是注释
/
@var: red;
//这里是注释
@var: blue;

导入(importing)

可以导入.less的文件,所有在该.less的文件中的变量都是可用的。

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

推荐阅读更多精彩内容