Open
Description
环境配置,下载客户端所需要的less.js
注意吧rel属性改为stylesheet/less
<link rel="stylesheet/less" type="text/css" href="styles.less" />
然后下面再引入,注意顺序不能反了
<script src="less.js" type="text/javascript"></script>
写完上面的代码后面,页面应该如下面代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>wsscat less demo</title>
</head>
<link rel="stylesheet/less" type="text/css" href="styles.less"/>
<script type="text/javascript" src="less.js" ></script>
<body>
</body>
</html>
node环境下安装
Win:npm install -g less
Mac或者linux:sudo npm install -g less
注意带sudo不然没有安装权限
下面这句话我们就可以把styles.less转化为styles.css
lessc styles.less styles.css
less官方帮助
语法参考
Activity
Wscats commentedon Jul 25, 2016
定义变量
变量的作用就是定义一个值之后,在任何地方都能重复使用,这样代码更易维护,方便同时更改相同地方的变量
上面代码会转换为下面代码
Wscats commentedon Jul 25, 2016
运算
在less.js里面任何数字、颜色代码或者变量相互之间都能运算
注意颜色的
#5B83AD+#111111 = #6c94be
less将会使用出现的单位,所以这个例子中,最终会输出是
Wscats commentedon Jul 25, 2016
函数
less自定义了部分常用的函数,例如百分比转换,颜色变化等等
函数参考手册
特别说明一个default函数
default相当于switch语句中default的词法
在这里它的作用就是当都不满足其他when里面的条件时,它就执行
注意default一定要配合when来使用
Wscats commentedon Jul 25, 2016
混合
混合就是可以预先定义好一个样式,然后用它放到我们想去使用该样式的大括号内触发
这样就可以轻松实现继承
注意
my-other-mixin()
不带参数的Mixin上面代码就会转化为下面的形式
Wscats commentedon Jul 25, 2016
嵌套规则
css一些基于父元素寻找子节点添加样式的写法,我们可以用less来简化
在嵌套里面写就会变成
#header4 .logo
如果是用了**&**就是连接,就变成了下面那样,注意伪类中间不允许有空格的
#header4:before
#header4:wsscat
Wscats commentedon Jul 26, 2016
作用域
@var
会在作用域范围内一个一个往外找,知道找到最接近的那个变量定义作为值Wscats commentedon Jul 26, 2016
选择器
把变量作为CSS类名或者ID名
上面这一句将转化为下面这一句,注意一定要这样写
.@{bg}
不能漏掉{}
Wscats commentedon Jul 26, 2016
带参数的Mixin(混入)
注意定义好的
.bg(...){...}
一定要放在正常的css选择器里面去触发当然我们也可以把他当函数传参数来使用,例如改成下面这个样子
Wscats commentedon Jul 26, 2016
命名空间
#wsscat和#wsa两个不同的命名空间,如果两者之间要通信可以这样
Wscats commentedon Jul 26, 2016
注释
所以上面这代码,第一行转化为css的时候不输出,第二行则输出
Wscats commentedon Jul 26, 2016
导入
less样式文件可以用@import '文件路径'来引入我们外面写好的另一份less文件
@import 'styles.less';
如果我们不带扩展名或者带非
.less
的扩展名编译的时候都会被认为是less文件@import 'styles';
@import能放在less文件的任何位置,区别于css的@import,它只能放在文件首行
还有@import还提供了六个可选配置项(分别为reference,inline,less,css,once,multiple),用来改变引入文件的特性,语法为:
@import (配置项) '文件路径';
具体如下:
将引入的文件作为样式库使用,因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。
用于引入与less不兼容的css文件,通过inline配置告知编译器不对引入的文件进行编译处理,直接输出到最终输出。注意:引入的文件和当前文件会被编译为一个样式样式
默认使用该配置项,表示引入的文件为less文件。
表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件,而被引入的文件自身为一个独立的样式文件
默认使用该配置项,表示对同一个资源仅引入一次。
表示对同一资源可引入多次。
CZLHCZ commentedon Jul 27, 2016
66 你太帅了
Wscats commentedon Dec 2, 2016
谢谢~