CSS预处理器之Less

2019-08-13  本文已影响0人  遇明不散

CSS预处理器

什么是CSS预处理器
常见的CSS预处理器

CSS预处理器-Less

为什么需要less
什么是less

less基本使用

在浏览器中直接运行
提前预编译
文档

Less

less注释
// 编译前
// index.less 我不会被编译
/*
我会被编译
*/
*{
  padding:0;
  margin:0;
}

// 编译后
/*
我会被编译
*/
*{
  padding:0;
  margin:0;
}
less变量
// 定义变量
@变量名称: 值;
// 使用变量
@变量名称;
// 将一个变量赋值给另外一个变量
@变量名称 : @变量名称;
less变量插值

在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量,如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式

// 变量插值的格式
@{变量名称}
less运算
div{
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
  left: 50%;
 // 编译前
  margin-left: (-200px / 2);
 // 编译后   margin-left: -100px;
}
less混合

将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可，在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来

注意点
// 编译前less文件
@w:300px;
@h:300px;

.center{  // .center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.father{
  width: @w;
  height: @h;
  background: #00a7f7;
  .center;
  .son{
    width: @w/2;
    height: @h/2;
    background: #333333;
    .center
  }
}

// 编译后css文件
.center { // 若为 .center() 编译后没有此部分
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.father {
    width: 300px;
    height: 300px;
    background: #00a7f7;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.father .son {
    width: 150px;
    height: 150px;
    background: #333333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
less带参数混合
/*
// 带参数混合
.whc(@w,@h,@c){
  width: @w;
  height: @h;
  background: @c;
}
*/
// 带默认参数混合
.whc(@w:100px,@h:100px,@c:red){
  width: @w;
  height: @h;
  background: @c;
}

.box1{
  //.whc(200px,200px,red);
  //.whc();
  // 给混合的指定形参传递数据,若不指定会按顺序传递
  .whc(@c:green);
}
.box2{
  //.whc(100px,100px,green)；
  .whc()
}
less可变参数
.animate(@name, @time, @mode, @delay){
  //transition: @name @time @mode @delay;
  transition: @arguments;
}

// 接收0个或多个参数
.animate(...){
  //transition: @name @time @mode @delay;
  transition: @arguments;
}

// 至少传一个参数
.animate(@name, ...){ 
  //transition: @name @time @mode @delay;
  transition: @arguments;
}

div{
  width: 200px;
  height: 200px;
  background: red;
  //transition: all 4s linear 0s;
  //.animate(all, 4s, linear, 0s);
  .animate(all, 4s, linear, 0s);
}
div:hover{
  width: 400px;
  height: 400px;
  background: blue;
}
less中混合的匹配模式
// 通用匹配模式
.triangle(@_, @width, @color){
  width: 0;
  height: 0;
  border-style: solid solid solid solid;
}

// 混合的匹配模式
.triangle(Down, @width, @color){
  border-width: @width;
  border-color: @color transparent transparent transparent;
}
.triangle(Top, @width, @color){
  border-width: @width;
  border-color: transparent transparent @color transparent;
}
.triangle(Left, @width, @color){
  border-width: @width;
  border-color: transparent @color transparent transparent;
}
.triangle(Right, @width, @color){
  border-width: @width;
  border-color: transparent transparent transparent @color;
}

div{
  //.triangle(Down, 80px, green);
  //.triangle(Top, 80px, green);
  //.triangle(Left, 80px, green);
  .triangle(Right, 80px, green);
}
less文件中导入其他less文件
// 格式
@import "xxx.less";
@import "xxx"
less内置函数

由于less的底层就是用JavaScript实现的,所以JavaScript中常用的一些函数在less中都支持

混杂方法
// 获取图片尺寸
image-size("file.jpg"); 
image-width("file.jpg"); 
image-height("file.jpg");
单位转换
convert(9s, "ms");  // 9000ms
convert(14cm, mm); // 140mm
convert(8, mm); // 8
列表
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C
数学
ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 转百分比
round(1.67, 1); // => 1.7 四舍五入，保留一位小数点
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取绝对值
pi(); // => 3.141592653589793 圆周率π
max(3px, 42px, 1px, 16px); // => 42px
min(3px, 42px, 1px, 16px); // => 1px
字符串
replace("Hi Tom", "Tom", "Jack"); // => "Hi Jack"
判断类型
isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(4rem, rem); // => true 是否为指定单位
isruleset(@rules); // => true 是否为变量
颜色操作
// 增加饱和度
saturate(color, 20%)
// 减少饱和度
desaturate(color, 20%)
// 增加亮度
lighten(color, 20%)
// 减少亮度
darken(color, 20%)
// 降低透明度
fadein(color, 10%)
// 增加透明度
fadeout(color, 10%)
// 设置绝对不透明度(覆盖原透明度)
fade(color, 20%)
// 旋转色调角度
spin(color, 10)
// 将两种颜色混合，不透明度包括在计算中。
mix(#f00, #00f, 50%)
// 与白色混合
tint(#007fff, 50%)
// 与黑色混合
shade(#007fff, 50%)
// 灰度，移除饱和度
greyscale(color)
// 返回对比度最大的颜色
contrast(color1, color2)
颜色混合
// 每个RGB 通道相乘，然后除以255
multiply(color1, color2);
// 与 multiply 相反
screen(color1, color2);
// 使之更浅或更暗
overlay(color1, color2)
// 避免太亮或太暗
softlight(color1, color2)
// 与overlay相同，但颜色互换
hardlight(color1, color2)
// 计算每个通道(RGB)基础上的两种颜色的平均值
average(color1, color2)

具体使用可参考 https://less.bootcss.com/functions/

less层级结构
// 转换前
.father{
  width:300px;
  .son{
     &:hover {  // :hover {
        background:red;
     }
     width:200px;
   }
}
// 转换后
.fathrt{
  width:300px;
}
.father .son{
  width:200px;
}
.father .son:hover { //.father .son :hover {
  background:red;
}
less中的继承

对于许多重复性代码，编译后希望只有一份，可以使用继承，转换后使用并集选择器来实现继承

// less
.common{
    font-size:16px;
}
.father:extend(.common){
    width:200px;
    .son:extend(.common){
        width:100px;
    }
}
// css
.common,.father,.father .son{
  font-size: 16px;
}
.father {
  width: 200px;
}
.father .son{
  width: 100px;
}
less中的条件判断
// 当宽度等于100时，才执行括号中的代码
.size(@width,@height) when (@width = 100px){
  width: @width;
  height: @height;
}

// (),()相当于JS中的 ||
.size(@width,@height) when (@width = 100px),(@height = 100px){
  width: @width;
  height: @height;
}

// ()and()相当于JS中的 &&
.size(@width,@height) when (@width = 100px)and(@height = 100px){
  width: @width;
  height: @height;
}

// 当单位为 px 才执行括号中的代码
.size(@width,@height) when (ispixel(@width)){
  width: @width;
  height: @height;
}
上一篇下一篇

猜你喜欢

热点阅读