Less

CSS编译语言

编译

浏览器中使用:less.min.js

Node中编译

lessc demo.less  // 直接在cli中输出lessc demo.less test.css // 将把demo.less 编译到 test.css 中 (lessc url newUrl)lessc --clean-css demo.less test.css // 将demo.less 编译到 test.css 文件并且压缩 (插件:less-plugin-clean-css)

工程化使用

fis使用插件: fis-parser-less

match();中配置插件,然后处理拓展名。

fis.match(' .less', {    parser: fis.plugin('less'),    rExt: '.css'});

嵌套规则

通过 {} 来嵌套处理。大括号内部定义的元素的样式。

body {    div {        width: 100px;        height: 100px;        background: cyan;    }}

变量

通过 less @ 来定义变量

定义:@space: 100px;
使用:width: @space

@space: 20px;@BgColor: cyan;@color: # fff;ul {    padding: @space * .5;    background: @BgColor;    width: @space * 6;     height: @space * 2;    li {        float: left;        width: @space * 2;        height: @space;        list-style: none;        text-align: center;        line-height: @space;        a {            color: @color;            padding: @space*.15 @space*.15;            text-decoration: none;        }    }    li:hover {        background: @color;        a {            color: @BgColor;        }    }}

混合

在Less中对继承的一种实现,混合是创建一个类,并且将该类在其它类中实现。
定义:.link-style {}
使用:.demo1 { a { .link-style } }

// mix 混合.box-style {    width: 400px;    height: 300px;    background: cyan;    margin: 0 auto;}.box1 {    .box-style;    background: tan;}.box2 {    .box-style;    width: 1000px;}

方法传参

混合是一种继承,多个类继承的样式是不一样的。可以对混合函数传参。
定义: .className( @arg ) { width: @arg; }
使用: .classname(100px);

// mix 传参.box-style( @w ) {    width: @w * 10;    height: 300px;    background: cyan;    margin: 0 auto;}.box1 {    .box-style(400px);    background: tan;}.box2 {    .box-style;    width: 1000px;}

混合和方法区别:
在编译后,定义的混合还存在,变成CSS文件中的普通的样式条
在编译后,定义的方法在CSS文件中不存在.

如果没有指定默认参数,使用方法的时候,并未传递参数,编译的时候,会报错。

默认参数

定义:.className( @w: 100px ) { width: @w; }

.box-style( @w: 100px ) {    width: @w * 10;    height: 300px;    background: cyan;    margin: 0 auto;}

arguments

表示方法中的所有参数。实现对所有变量的引用

.box-border ( @w: 1px, @s: solid, @c: # ccc) {    border: @arguments;}.box {    margin-bottom: 10px;    .box-border(1px, solid, cyan);}.box1 {    .box-border();}

improtant

提升权重
在less中important 不仅仅可以对单个css属性添加,还可以对方法添加,实现对继承多个属性的important属性提升权重。

.box {    .box-style(100px) !improtant;    color: # ccc !improtant;}

条件判断

通过用when() 方法来判断条件。(注意:不需要添加单位).
类似switch条件判断

.size ( @w, @h ) when ( @w > 200 ) {    width: @w;    height: @h;}.size (@w, @h ) when ( @w = 200 ) {    width: @w;    height: @h;    }.size ( @w, @h ) when ( @w  300 ) and ( @w 

// 判断不小于200
.size( @w, @h ) when not( @w

// 编译报错@color: '100';div {    background: rgb(@color, @color, @color);  }

rgba()
rgba(red, green, blue ,alpha);
编译后按照原来的rgba();的格式显示在CSS中

background: rgba(100, 12, 109, .3); // 编译后: background: rgba(100, 12, 109, 0.3);

hsl()
hsl(h, s, l);
表示色相,饱和度,亮度模式.
h: 某一色值(0-360)
s:色彩饱和度, 单位百分数。
l: 亮度,单位百分数。0%表示黑色,100%表示白色.
编译成CSS之后是16进制数值

background: hsl(200, 30%, 10%); // 编译后: background: # 121c21;

色彩通道

red() 获取定义色值中的红色通道
green(); 获取定义色值的绿色通道
blue(); 获取定义色值的蓝色通道。
alpha(); 获取定义的rgba();的alpha();透明度通道

background: rgb(red(@color), red(@color), red(@color)); background: rgb(green(@color), green(@color), green(@color));background: rgb(blue(@color), blue(@color), blue(@color));background: rgba(red(@color), green(@alphaColor), blue(@color), alpha(@alphaColor));

hue(); 获取色彩中的色值,结果是一个数字
saturation(); 获取色彩中的饱和度,结果是一个百分数
lightness(); 获取色彩中的亮度,结果百分数

@color: # 00BCD4;background: rgb(hue(@color), hue(@color), hue(@color)); // background: # bbbbbb;margin: hue(@color); // margin: 186.79245283;width: saturation(@color); // width: 100%;height: lightness(@color);  // height: 41.56862745%;  

色彩操作

fade(); 对色彩做透明度处理
fade(color, alpha);

background: fade(@color, 10%); 

fadeIn(); 对色彩透明度增加,当第一个参数不透明的颜色,得到的结果是一个16进制不透明颜色。(增加到最大值100%了)

background: fadeIn(@color, 10%); 

fadeOut(); 对色彩透明减少

background: fadeOut(@color, 90%);

greyscale(); 得到是一个混色灰度色值

 background: greyscale(@color);    

mix(); 将两种颜色混合,默认情况下,是取两种颜色的十六进制转为十进制相加后的平均值。第三个参数表示去的数值,是个百分数,表示色彩混合的一个权重。

background: mix(@color, @color2);background: mix(@color, @color2, 30%); 

saturate(); 增加饱和度
参数1:颜色。
参数2:饱和度的增加量

background: saturate(@color2, 30%);

desaturate(); 减少饱和度

background: desaturate(@color2, 30%);

lighten(); 提高色彩亮度
参数1:颜色
参数2:提高的亮度值

background: lighten(@color2, 50%);

darken(); 降低颜色亮度

background: darken(@color2, 50%);

色彩混合

只能处理色彩,不能处理图片
softlight(); 柔光处理
参数1: 底色
参数2:添加色
hardlight(); 强光处理
参数1: 底色
参数2:添加色

background: softlight(@color, @color2); background: hardlight(@color, @color2); 

字符串函数

escape(); 将字符串做url转码
参数:需要转码的字符串

e(); 不对字符串做编译

background: e('rgba(10, 200, 210, .3)');

replace(); 替换字符串的子字符串
参数1:源字符串
参数2:被替换的字符串
参数3:替换的字符串

div {    content: relace('this color is tan', 'tan', 'cyan');}

命名空间

& : 当前所在的class
引用混合时,要将属性赋值给谁就放在谁的里面

.box1 {    .bg {        background: tan;    }}.box2 {    .header {        .box1 .bg;   }}

作用域

在Less中,作用域是块级作用域,定义在块内部的变量,在外界访问不到。
访问变量的顺序,就近原则。
对于函数,它的存在依赖块级作用域,定义在块内部的函数,在外界访问不到,但是可以使用命名空间使用它。
对于变量,它存在依赖块级作用域,定义在块内部的变量,外界访问不到,不能通过命名空间访问,是一种私有变量。

@w: 100px;.box1 {    .sayW(){        @w: 300px;    }        width: @w;    .sayW();}.box1{    p {        width: @w;    }}.box2 {    width: @w;}

如果函数在块中执行后,函数作用域会扩展带过去。也就是变量在定义的块中可以访问。

@w: 100px;.box1 {    .sayW(){        @w: 300px;    }        width: @w;    .sayW();}.box1{    p {        width: @w;    }}.box2 {    .box1 .sayW(); // 函数通过命名空间执行    width: @w; // @w: 300px;}

文件导入

语法:@import url;
通过@import导入一个文件内容,Less文件中,可以使用导入文件中的变量,混合,方法。编译后,被导入的文件中的内容会保留下来。(导入的文件也会被编译)

@import 'base/var.less';

插值

语法:@{key}
作用:将变量插入一个字符串中(注意:key前面没有@符号,@符号放在{}外面)

div {    content: '@{content}下雨了,下雨天';}

表达式

在Less的字符串中,使用JavaScript表达式;
content: ['h', 'e', 'l', 'l'].join('');
需要在``中编写JavaScript表达式.

div {    content: `['h', 'e', 'l', 'l', 'o'].join('')`;}

关键字:css, less, lessc, width

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部