前端杂谈 · Web

Less语法使用

小编 · 11月25日 · 2019年

Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

Less语法使用

使用方法

使用Node.js安装 cmd命令行输入以下代码

安装完成nodejs之后
检测是否安装完成   node  –v  查看版本
然后检测 npm是否自带  npm  –v 查看版本
在线安装
运行  npm install –g less  (部分电脑要 sudo 管理权限)

vscode配置自动编译less文件为css文件

安装 easy less 插件

语言特性

声明变量

@charset 'UTF-8';

//定义变量: @变量名:变量值
//使用变量: 属性:@变量名

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

输出成css文件:

@charset 'UTF-8';

#header {
  color: #6c94be;
}

变量为地址

//定义变量: @变量名:"变量值"
//使用变量: 属性:@变量名

// 变量
@images: "../img";

// 用法
body {
    background: url("@{images}/white-sand.png");
}

请注意,变量实际上是“常量”,因为它们只能定义一次。

嵌套规则

更少使您能够使用嵌套而不是级联或与级联结合使用。假设我们有以下CSS:

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
#header:hover{
  color:red;
}

在Less中,我们也可以这样写:

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
/* & 是连接符号 */
//注释在css没有  所以不会显示在CSS文件中
 &:hover{
    color:red;
 }
}

嵌套指令和冒泡

诸如media或的指令keyframe可以与选择器相同的方式嵌套。指令放在最上面,并且同一规则集中与其他元素的相对顺序保持不变。这称为起泡。条件指令,例如@Media@supports并且@document还将选择器复制到其主体中:

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

输出css文件:

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

其余的无条件指令(例如font-facekeyframes)也会冒泡。他们的身体没有改变:

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

输出css文件:

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

定义函数

@charset 'UTF-8';
//带参数示例
.float(@direction:right){
    float:@direction;
}
.box{
    .float(left);
}

//不带参数的函数
.mainColor(){
    color: #219874;
}
div{
    .mainColor();
}

输出css文件:

@charset 'UTF-8';
.box {
  float: left;
}
div {
  color: #219874;
}

内置函数

@charset 'utf-8';

@num : 10;
@liColor : #c3c3c3;
div{
    width: 100%*@num;
    background: darken(red, 10%); // 亮度降低 10%;
    li{
        width: 100%/@num;
        color: lighten(@liColor, 10%); // 亮度增加 10%;
    }
}

输出css文件:

@charset 'utf-8';

@num : 10;
@liColor : #c3c3c3;
div{
    width: 100%*@num;
    background: darken(red, 10%); // 亮度降低 10%;
    li{
        width: 100%/@num;
        color: lighten(@liColor, 10%); // 亮度增加 10%;
    }
}

引入文件

@charset 'utf-8';
// 变量
@themes: "文件路径";

// 用法
@import "@{themes}";

@import '文件Less1';
@import '文件Less2';

注释

// 会被删除
/**/ 不会被删除

一些内置函数

escape(@string); // 通过 URL-encoding 编码字符串
e(@string); // 对字符串转义
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
data-uri([mimetype,] url); // * 将资源内嵌到css中,可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比,例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 计算数字的平方根
abs(number); // * 数字的绝对值
sin(number); // * sin函数
asin(number); // * arcsin函数
cos(number); // * cos函数
acos(number); // * arccos函数
tan(number); // * tan函数
atan(number); // * arctan函数
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一个参数对第二个参数取余
convert(number, units); // * 在数字之间转换
unit(number, units); // * 不转换的情况下替换数字的单位
color(string); // 将字符串或者转义后的值转换成颜色
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值(色相)
saturation(@color); // 从颜色值中提取 saturation 值(饱和度)
lightness(@color); // 从颜色值中提取 'lightness' 值(亮度)
hsvhue(@color); // * 从颜色中提取 hue 值,以HSV色彩空间表示(色相)
hsvsaturation(@color); // * 从颜色中提取 saturation 值,以HSV色彩空间表示(饱和度)
hsvvalue(@color); // * 从颜色中提取 value 值,以HSV色彩空间表示(色调)
red(@color); // 从颜色值中提取 'red' 值(红色)
green(@color); // 从颜色值中提取 'green' 值(绿色)
blue(@color); // 从颜色值中提取 'blue' 值(蓝色)
alpha(@color); // 从颜色值中提取 'alpha' 值(透明度)
luma(@color); // 从颜色值中提取 'luma' 值(亮度的百分比表示法)
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度,输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor,否则输出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字(可含单位)
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值
含*号的函数只在1.4.0 beta以上版本中可用

示例

@charset 'utf-8';

@num : 10;
@liColor : #c3c3c3;
div{
    width: 100%*@num;
    background: darken(red, 10%); // 亮度降低 10%;
    li{
        width: 100%/@num;
        color: lighten(@liColor, 10%); // 亮度增加 10%;
    }
}
1 条回应

必须 注册 为本站用户, 登录 后才可以发表评论!

  1. 小编2019-11-25 · 15:00

    有新知识点再完善