我的前端那些事 --less基础

147 阅读4分钟

作为前端学习者的我们都要学些 CSS ,它是前端开发的三大基石之一。 而 CSS给初学者第一印象就是简单易懂,毫无逻辑,不像编程该有的样子。在语法更新时,浏览器的兼容又会马上变成绊脚石。

就我所知的有三门预处理语言:Sass、Less 、Stylus 。Sass 与 Stylus 相比于 Less 功能更为丰富,但对于学习成本以及适应时间 ,Less 稍胜一筹,这也是我选择 Less 的原因。LESS 将 CSS 赋予了动态语言的特性,如变量、 继承、运算、 函数,逻辑性得以大大增强。 下面我讲用实际代码来演示Less语言的语法以及魅力,我相信你会喜欢上它。

首先安装: 使用Less有两种方式

(1) 直接引入less.js在中,.less样式文件要引入到less.js之前,并且样式文件rel属性值为“stylesheet/less”。只能运行在服务器环境下。 (2) LESS最简单的方式就是通过npm(node的包管理器)安装,像这样:npm  install  less 。通过npm安装的可以使用命令来编译.less样式文件,命令是: lessc styles.less 。这样会把style.less转换为.css样式文件。

LESS语法: LESS没有去掉任何 CSS 的功能,而是在现有的语法上,增添了许多额外的功能特性,所以学习 Less 是一件非常舒服的事情。 变量:很容易理解。 .less文件为: @nice:#5B83AD; @nice-lick:@nice + #111; @nice-congter:’nice-lick’; #header{ color:@@nice-congter };

编译后的.css文件为: #header { color: #6c94be; }

请注意LESS里面的变量为常量,只能定义一次,否则报错。 混合:在 LESS 中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性。下面有这样一个class:

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } 如果我们现在需要在其他class中引入那些通用的属性集,我们只需要在class中像下面这样调用就可以了: #menu a { color: #111; .bordered; } .post a { color: red; .bordered(); } .bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:

#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; } 任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入。 调用时候加不加“()”,调用效果是一样的。并且如果在定义属性集的时候加上“()”,那么在编译到.css文件时候是不会被编译进去的。 带参数混合:在 LESS 中,你还可以像函数一样定义一个带参数的属性集合:

.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 然后在其他class中像这样调用它:

#header { .border-radius(4px); } .button { .border-radius(6px);
} 我们还可以像这样给参数设置默认值:

.border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } 所以现在如果我们像这样调用它的话: #header { .border-radius;
} radius的值就会是5px. @arguments 变量 @arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } .box-shadow(2px, 5px); 将会输出:

box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; -webkit-box-shadow: 2px 5px 1px #000;

嵌套规则 LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:

#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: none; } 在 LESS 中, 我们就可以这样写:

#header { color: black;

.navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } } 或者这样写:

#header { color: black; .navigation { font-size: 12px } .logo { width: 300px; &:hover { text-decoration: none } } } 代码更简洁了,而且感觉跟DOM结构格式有点像.

注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

例如:

.bordered { &.float { float: left; } .top { margin: 5px; } } 会输出

.bordered.float { float: left;
} .bordered .top { margin: 5px; }

运算 任何数字、颜色或者变量都可以参与运算. 来看一组例子:

@base: 5%; @filler: @base * 2; @other: @base + @filler;

color: #888 / 4; background-color: @base-color + #111; height: 100% / 2 + @filler; LESS 的运算已经超出了我们的期望,它能够分辨出颜色和单位。如果像下面这样单位运算的话:

@var: 1px + 5; LESS 会输出 6px.

括号也同样允许使用:

width: (@var + 5) * 2; 并且可以在复合属性中进行运算:

border: (@width * 2) solid black;

是不是发现原来css还可以这样写,有没有被less所迷住,当然我今天写的只是一些less经常用到的语法,它还有好多语法如果有兴趣的可以到它官网进行查看,我这个也是跟着它官网整理的。 下一篇讲一点less不常用的语法,了解一下less内部给大家的函数。预知后事如何,请听下回分解。