1.了解
Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量,Mixin,函数等特性,使CSS更易维护和扩展。更少可以运行在Node或浏览器端。
2.使用方法
方法一:“袋鼠”工具,下载单独软件先在本地转译,再把生成的.css文件引入;
方法二:使用less的脚本进行实时转译,如下:
<link rel="stylesheet/less" href="styles.less" />
...
<script src="less.js" type="text/javascript"></script>
注意:
1.link中自己写的less的rel=“stylesheet/less”;
2.引入less脚本之前书写.less自书写需转译的less ;
方法三:使用npm全局安装less,然后逐步转译less文件
//安装
$ npm install -g less
//解析
$ lessc styles.less
//解析完后保存
$ lessc styles.less > styles.css
方法四:在vue中使用less-loader,具体修改如下:
step1:安装 less 和 less-loader ,在项目目录下运行如下命令:
npm install less less-loader --save-dev
step2:webpack.config.js中添加如下代码,对后缀为less的文件进行解析依赖
module: {
rules: [
...
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
]
}
step3:页面中<style>标签中添加 lang="less"
<style scoped lang="less"> ... </style>
3.语法
1、变量:其实本质是常量,因为它是不可变的,只允许定义一次。
@val001 : #5B83AD; //变量为:属性值
@val002 : color; //变量为:属性值
@val003 : className; //变量为:类名
@val004 : "../image"; //变量为:url
@val005 : "../../themes"; //变量为:导入半路径
@val006 : "content string";
@val007 : "val006"; //变量为:变量名称
@import "@{val005}/backTheme.less";
div {
@{val002}: @val001;
content: @@val007;
background: url("@{val004}/big/big.png");
}
.@{val003}{
font-size: 10px;
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
div {
color: #5B83AD;
content: "content string";
background:yrl("../image/big/big.png");
}
.className{
font-size:10px;
}
2、混入(Mixins):一组属性在其他样式中出现。
.redColor{ //输出的被混入对象
color:red;
}
.noshow(){ //不输出的被混入对象
padding:10px;
&:hover{ //属性的混入
color:blue;
}
}
.cont{
font-size:16px;
.redColor() !important; //redColor里的所有属性都会带 !important
.noshow; //有木有小括号都是可以的
}
—————————————————————————————————————————————————————————————————————————————————————————
//输出
.redColor{
color:red;
}
//.noshow不会输出
.cont{
font-size:16px;
color:red !important;
padding:10px;
}
.cont:hover{
color:blue;
}
注意:
1.混入时属性混入可以将()小括号去掉;
2.可以使用类名,id名进行混入;
3.不想要引用的样式输出,可以使用.noshow(){},加小括号的方式;
3、参数混入:可以理解成函数传递参数。
.mixin(@x:10px; @y:10px; @z:10px; @color:#aaa) {
width:@x;
height:@y;
padding:@z;
color:@color;
box-shadom:@arguments;
}
.class1 {
.mixin(@color:#ddd; @x:50px);
}
—————————————————————————————————————————————————————————————————————————————————————————
//输出
.class1 {
width:50px;
height:10px;
padding:10px;
color:#ddd;
box-shadom:10px 10px 10px #ddd;
}
注意:
1.传参可以对参数名称进行规定,如:@color
2.传参可以设定默认的数值,如:@clor:#aaa
3.传递参数可以是多个,如:@x:10px; @y:10px; @z:10px; @color:#aaa
4.传参定义了名称,其传递的实际参数顺序无所谓,如:@color:#ddd; @x:50px
5.@arguments类似一个伪数组,可以直接使用,如:box-shadom:@arguments
//特殊:混入作为函数
.mixin2(@x;@y){
@wid:@x;
@hei:@y;
}
.class2{
.maxin2(10px,20px);
width:@wid;
height:@hei;
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
.class2 {
width:10px;
height:10px;
}
注意:
1.混入可作为函数,进行调用,然后返回对应的变量再赋值,如:.maxin2(10px,20px);width:@wid;
//特殊:条件混入
.mixin (@a) when (@a >= 50%) {
background-color: black;
}
.mixin (@a) when (@a < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }
——————————————————————————————————————————————————————————————————————————————————————————
//输出
.class1 {
background-color: black;
color: #ddd;
}
.class2 {
background-color: white;
color: #555;
}
//特殊:循环在混入中的使用
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
}
.generate-columns(@n, (@i + 1));
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出:
.column-1 { width: 25%; }
.column-2 { width: 50%; }
.column-3 { width: 75%; }
.column-4 { width: 100%; }
4、嵌套:有父子关系的写在一起,接近于html的写法。
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
5、运算:利用+ - * / 进行计算得出最后的值并附上单位,常用的是宽高,百分比,颜色值
@val001:5px+10; 15px
@val002:5px+10px; 15px
@val003:5px+10cm; 15px
@val004:5%*2; 10%
注意:
1.计算中出现多单位,单位以最左边单位为最终结果;
2.计算中最好将单位标清楚,方便修改和设定;
6、格式化:使用“ ~ ”符号,允许任意字符串作为属性或属性值,并以原样返回
.weird-element {
content: ~"^//* some horrible but needed css hack";
}
———————————————————————————————————————————————————————————————————————————————————————————
//输出
.weird-element {
content: ^//* some horrible but needed css hack;
}
7、功能:可以转换颜色,操纵字符串和进行数学运算(使用较少,但在效果变更还是很实用的)
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%` //将0.5%转换为50%
color: saturate(@base, 5%); //将基色的饱和度增加5%
background-color: spin(lighten(@base, 25%), 8); //将背景颜色设置为减轻25%并旋转8度的颜色
}
8、范围作用域:类似js中局部和全局的感觉,不一样的是局部的变量可以在后边定义
@var: red;
#page {
#header {
color: @var; //white
}
@var: white; //引用后边定义变量
}
9、导入:导入外部的样式,可以是less或者css等
@import "foo"; foo.less
@import "foo.less"; foo.less
@import "foo.php"; foo.less
@import "foo.css"; foo.css
@import (optional, reference) "foo.less"; //指令控制导入文件
注意:
1.导入的语句写在哪里都无所谓,但是建议写在最顶端;
2.根据文件扩展名,有如下规范:
(1)如果文件有.css扩展名,则将其视为CSS,并将@import语句保留为原样;
(2)如果它有任何其他扩展名,它将被视为less并导入;
(3)如果它没有扩展名,以扩展名.less进行导入;
3.@import (keyword) "文件名称";这才是最全的导入语法,其中【keyword】代表指令,可进行一些导入
文件的控制,并支持多指令控制且用逗号分开,可选指令如下:
reference: 使用Less文件但不输出
inline: 在输出中包含源文件但不处理它
less: 无论文件扩展名是什么,都将文件视为Less文件
css: 无论文件扩展名是什么,都将文件视为CSS文件
once: 只包含一次文件(默认就是包含一次)
multiple: 多次包含该文件
optional: 找不到文件时继续编译(默认找不到就停止编译了)
4.常用内置函数
//字符串
替换:replace(字符串,要替换的文本,替换成文本,正则标志);
replace("One + one = 4", "one", "2", "gi"); //2+2=4
//列表
长度:length(list的变量名称);
@listall:1,2,3,4;
n: length(@listall); //n: 4
提取:extract(list的变量名称,下标数字);
val: extract(@listall,2) //val: 3
//数字
取整:ceil(小数) 向上取整
floor(小数) 向下取整
round(小数,小数位数) 四舍五入(并保留几位小数)