Less(二) —— 基础语法

顽皮的雪狐七七
1,494 阅读12分钟

目录

  • Less语法
    • 注释
    • 变量（规则、使用）
    • Minxin混入
      • 类名混入
      • 函数混入
      • 带参数的函数混入
    • 嵌套
    • Import（引用）
    • 函数（内置函数和运算）
      • less中定义函数
      • 内置函数
        • 字符串函数
        • 综合类函数
        • 算数函数
        • 颜色函数
        • 判断函数

之前讲了Less的概述和配置安装，还有简单编译一个Less文件，回顾看 Less(一) —— 概述和配置安装 ，现在对Less的语法进行一个总结：

Less语法

注释

  • /**/这个注释可以在css中使用，也可以在less中使用
  • // 这个注释可以在less中使用，但是因为css不支持，所以这种类型的注释是没有办法编译到css文件中的

变量（variable）

  • 变量允许我们定义一系列通用的样式，在需要的时候去调用，这样在修改的时候只需要修改全局的变量就可以了，十分的方便。
  • 规则：less 变量以@作为前缀，不能以数字开头， 不能包含特殊字符。
  • 使用：
/*定义了一个变量*/
@mainColor:#ff4400;
/*使用变量*/
a:hover{
  color:@mainColor;
}

p{
  border: 1px solid @mainColor;
}

/*也可以进行变量的拼接*/
@left:left;
/*拼接使用的时候要大括号包住*/
border-@{left}: 1px solid @mainColor;

Mixin混入

什么是混入，这个是在bootstrap中经常看到的一个东西。混入可以将定义好的class A轻松的引入到class B中，从而简单实现class B继承所有class A的属性。 定义的时候前面要加点.。

类名混入

假如我定义了一个button1，按钮中有一些属性，我在别的地方又有一个button2，要加上这个button1的属性和一些别的属性，如果按照css的方式我要重新写一遍，那我用Less就可以进行混入。 来上代码：

/*原来的按钮的一些属性和别的属性*/
.button1{
    width:200px;
    height: 50px;
    background: #fff;
}

.btn_border{
    border: 1px solid #ccc;
}

.btn_danger{
    background: red;
}

.btn_block{
    display: block;
    width: 100%;
}

/*对css类的样式进行混入*/
.button2{
    .button1();
    .btn_border();
    .btn_danger();
    .btn_block();
}

函数混入

上面的混入有一些不好的地方，编译的时候还是全部都编译进去了，button1里面的东西button2里面全部都有，只是写的时候简洁了而已。这个时候可以混入函数。(具体的函数知识在后面写的)

.button1(){
    width:200px;
    height:200px;
    background: #fff;
}

.btn_border(){
    border:1px solid #ccc;
}

.button2{
    .button1();
    .btn_border();
}

这样这里面的.button1和.btn_border都不会显示到css文件之中去，可以降低css中的代码冗余。但是如果我要对样式的具体值进行改变呢，就涉及到参数了

带参数的函数混入

注意：在定义参数要传入默认值，如果没有默认值，调用的时候必须要传入值，如下：

/*下面的如果定义和使用的时候都没有传值，less这样会报错*/
.btn_border(@len){
    border:1px solid #ccc;
}

.btn_b{
    .btn();
    .btn_border();
}

两种解决方案

1.在定义的时候传入默认值

/*1.在定义的时候传入默认值*/
.btn_border(@len:10px){
    border:1px solid #ccc;
    border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border();
}

/*如果是上面的写法，最终的border-radius是10px*/
.btn_b{
    .btn();
    .btn_border(20px);
}
/*如果调用的时候传入参数了，最终是20px*/

2.定义的时候没有默认值，在调用的时候传入值

.btn_border(@len){
    border:1px solid #ccc;
    border-radius:@len;
    -webkit-border-radius:@len;
    -moz-border-radius:@len;
    -ms-border-radius:@len;
    -o-border-radius:@len;
}

.btn_b{
    .btn();
    .btn_border(10px);
}

嵌套

嵌套可以增强代码的层级关系，我们也可以通过嵌套来实现继承，这样很大程度减少了代码量，代码量看起来更加清晰。

.nav{
    border-bottom: 1px solid #ccc;
    font-size: 12px;
    color:#666;
    a {
        color:#666;
    }
    > .container{
        line-height: 40px;
        text-align: center;
        > div{
        height:40px;
            ~ div{
            border-left:1px solid #ccc;
            }
        }
    }
}

这个时候要注意一个问题，就是如果在写伪元素、交集选择器的时候，就会出现问题，直接写嵌套中间会默认的加上空格。那么如何拼接上去呢？

/*下面就是如何书写伪元素和交集选择器的写法，前面要加&*/
.nav{
      font-size:12px;
      &:hover{
            text-decoration:none;
      }
      &::before{
            content:"";
      }
}

Import（引用）

用less写文件的时候，可以一个模块写一个less，但是index.html里面都要引用，引用那么多个less文件就不合适了，这个时候就要建立一个总的less，这是有一种解耦的开发思想，"高内聚，低耦合"。

下面来梳理一下结构：

<less里面所需要的模块>

  • 变量
  • 函数
  • 功能模块（视自己的情况而定）
  • 总（引用变量、函数、功能模块）

首先在index.less中引入

/*index.less*/
@import "variable.less";      /*引入变量，后面可以加后缀*/
@import "mixin.less";         /*引入函数*/
@import "topBar.less";        /*引入功能模块1*/
@import  "navBar.less";       /*引入功能模块2*/

在index.html中值需要引入一个index.less即可

函数（内置函数和运算）

js中有两种定义函数的方式

    1. function fun(){ }
    1. var fun = function(){ }

less中定义函数

直接运算

a{
    color:red/2;     /*结果是#800000*/
}

li{
    width:100%/7;  /*每个li标签的宽度都是ul的1/7 */
}

利用.开头定义，使用的时候也是.函数名()

.a(@len:12){
    width:100%/@len;
    color:lighten(#ddd,10%);   /*亮度提高10%，结果是#f7f7f7*/
}

col-xs-1{
    .a();
}

内置函数

具体的有 函数手册

注意：含*号的函数只在1.4.0 beta以上版本中可用!!

字符串函数
  • 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函数（没有单位默认弧度值）
sin(1deg);   //1角度角的正弦值   0.01745240643728351
sin(1grad);  //1百分度角的正弦值   0.015707317311820675
/*百分度是将一个圆周分为400份，每份为一个百分度，英文gradian，简写grad*/
  • * asin(number); // arcsin函数
    • 参数-1到1之间的浮点数，返回值弧度为单位，区间在-PI/2 到 PI/2 之间，超出范围输出NaNrad
  • * cos(number); // cos函数
    • 与sin函数一样
  • * acos(number); // arccos函数
    • 参数-1到1之间的浮点数，返回值弧度为单位，区间在 0 在 PI 之间，超出范围输出NaNrad
  • * tan(number); // tan函数
    • 与sin函数一样
  • * artan(number); // arctan函数
    • 返回值区间在 -PI/2 到 PI/2 之间，其余和arsin一样
  • * pi(); // 返回PI
  • * pow(@base, @exponent); // 返回@base的@exponent次方
    • 返回值和@base有相同的单位，第二个单位忽略，不符合规则返回NaN
  • * mod(number, number); // 第一个参数对第二个参数取余
    • 返回值与第一个参数单位相同，可以处理负数和浮点数
  • * convert(number, units); // 在数字之间转换
  • * unit(number, units); // 不转换的情况下替换数字的单位
颜色函数
  • color(string); // 将字符串或者转义后的值转换成颜色
    • 见综合函数
  • rgb(@r, @g, @b); // 转换为颜色值
    • 参数是整数0-255，百分比0-100%，转化为十六进制
  • rgba(@r, @g, @b, @a); // 转换为颜色值
    • 参数前三个是整数0-255，百分比0-100%，第四个是0-1或者百分比0-100%，
  • argb(@color); // 创建 #AARRGGBB 格式的颜色值
    • 使用在IE滤镜中，以及.NET和Android开发中
  • hsl(@hue, @saturation, @lightness); // 创建颜色值
    • 通过色相、饱和度、亮度三种值
    • @hue ： 整数0-360 表示度数
    • @saturation ： 百分比0-100% 或者数字 0 - 1
    • @lightness： 百分比0-100% 或者数字0 - 1
    • 返回值十六进制的颜色值
/*如果想使用一种颜色来创建另一种颜色的时候就很方便*/
@new: hsl(hue(@old),45%,90%);

/*这里@new 将使用@old 的色相值，以及它自己的饱和度和亮度*/
  • hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
  • hsv(@hue, @saturation, @value); // 创建颜色值
    • @hue 表示色相 ， 整数0-360表示度数
    • @saturation 表示饱和度，百分比0-100% 或数字 0-1
    • @value 表示色调，百分比 0-100% 或数字 0-1
    • 创建不透明的颜色对象
hsv(90,100%,50%)

// 输出#408000
  • hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
  • hue(@color); // 从颜色值中提取 hue 值（色相）
    • 返回值0-360的整数
hue(hsl(90,100%,50%))

// 输出  90
  • saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
    • 返回值 百分比0-100
saturation(hsl(90,100%,50%))

// 输出  100%
  • lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）
    • 返回0-100的百分比值
lightness(hsl(90,100%,50%))

// 输出  50%
  • * hsvhue(@color); // 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
    • 返回0-360的整数
  • * hsvsaturation(@color); // 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
    • 返回0-100百分比
  • * hsvvalue(@color); // 从颜色中提取 value 值，以HSV色彩空间表示（色调）
    • 返回0-100百分比
  • red(@color); // 从颜色值中提取 'red' 值（红色）
    • 返回整数0-255
  • green(@color); // 从颜色值中提取 'green' 值（绿色）
    • 返回整数0-255
  • blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
    • 返回整数0-255
  • alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）
    • 返回浮点数0-1
  • luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）
    • 返回百分比0-100%
颜色运算（Color operations）

颜色值运算有几点注意事项：

  • 参数必须单位/格式相同
  • 百分比将作为绝对值处理，10%增加10%，是20%而不是11%
  • 参数值只能在限定的范围内
  • 返回值的时候，除了十六进制外将其他格式做简化处理
  • 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
    • 向任意方向旋转颜色的色相角度，旋转范围是0-360，超过将从起点继续旋转，比如旋转360和720是相同的结果。
    • 需要注意的是，颜色要通过 RGB 进行格式转换，这个过程不能保留灰色的色相值（灰色没有饱和度，色相值也就没有意义了），因此要通过函数保留颜色的色相值
    • 因为颜色值永远输出为RGB格式，因此spin()函数对灰色无效
  • mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
    • 第三个参数是平衡两种颜色的百分比，默认是50%
  • greyscale(@color); // 完全移除饱和度，输出灰色
    • 与desaturate(@color, 100%)效果相同
  • contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
    • 比较颜色的，比较复杂，等用到的时候再说吧
颜色混合（Color blending）

颜色混合的方式与图像编辑器 Photoshop, Firework 或者 GIMP 的图层混合模式 (layer blending modes) 相似，因此制作 .psd 文件时处理颜色的方法可以同样用在 CSS 中。

  • multiply(@color1, @color2);
    • 分别将两种颜色的RGB三种值做乘法运算，然后再除以255，输出的结果是更深的颜色
    • 对应ps中的“变暗/正片叠底”
  • screen(@color1, @color2);
    • 结果是更亮的颜色，对应ps中的“变亮/滤色”
  • overlay(@color1, @color2);
    • 结合前面两个函数的效果，让浅的更浅，深的更深，类似于ps中的“叠加”
    • 第一个参数的叠加的对象，第二个参数是被叠加的颜色
  • softlight(@color1, @color2);
    • 与overlay效果相似，只是当纯黑色和纯白色作为参数的时候输出结果不是纯黑纯白，对应ps中的“柔光”
    • 第一个参数是混合色（光源），第二个参数是被混合的颜色
  • hardlight(@color1, @color2);
    • 与overlay效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，对应ps中的“强光/亮光/线性光/点光”
    • 第一个参数是混合色（光源），第二个参数是被混合的颜色
  • difference(@color1, @color2);
    • 从第一个颜色值中减去第二个，输出是更深的颜色，对应ps中的“差值/排除”
    • 第一个参数是被减的颜色对象，第二个参数是减去的颜色对象
  • exclusion(@color1, @color2);
    • 效果和difference函数效果相似，只是输出结果差别更小，ps中的“差值/排除”
    • 第一个参数是被减的颜色对象，第二个参数是减去的颜色对象
  • average(@color1, @color2); //对RGB三种颜色取平均值
  • negation(@color1, @color2);
    • 和difference函数效果相反，输出结果是更亮的颜色
    • 注意：效果相反不代表做加法运算
    • 第一个参数是被减的颜色对象，第二个参数是减去的颜色对象
判断函数
  • iscolor(@colorOrAnything); // 判断一个值是否是颜色
  • isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
  • isstring(@stringOrAnything); // 判断一个值是否是字符串
  • iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
  • isurl(@urlOrAnything); // 判断一个值是否是url
  • ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
  • ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
  • isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
  • * isunit(@numberOrAnything, "rem"); // 判断一个值是否是指定单位的数值
avatar
文章
阅读
粉丝