博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css预处理Less
阅读量:6244 次
发布时间:2019-06-22

本文共 2296 字,大约阅读时间需要 7 分钟。

什么是Less?

Less其实就是css预处理器,简单的说,就是动态编写css。

Less用法

首先以vue中开发为例,先安装less和less-loader

npm install less less-loader

1.变量

1.变量值定义

格式: @变量名

@width:100px;  .hello{    width: @width;  }

最终输出:

.hello{    width:100px;  }

2.属性变量定义

格式:@{变量名}

@color:color;  .hello{    @{color}:blue;  }

最终输出:

.hello{    color:blue;  }

3.属性部件变量定义

格式:@{变量名}

@color:color;  .hello{    background-@{color}: red;  }

最终输出:

.hello{    background-color: red;  }

4.选择器定义

格式:@{变量名}

@dialog:.dialog;  @{dialog}{     width:80px;     height:80px;     background: green;  }

最终输出:

.dialog{    width: 80px;    height: 80px;    background: green;}

5.选择器部件定义

格式:@{变量名}

@fix:fix;  .d-@{fix}{    color:gold;  }

最终输出:

.d-fix{    color: gold;}

2.混合(Mixins)

less中允许将已有的class或者id运用在不同的选择器上

1.不带参数

.border{    border:2px solid blue;  }  .hello{    .border;  }

最终输出:

.hello{    border: 2px solid blue;}

2.可带参数

.border(@border-wdith){    border:@border-wdith solid palegreen;  }  .hello{    .border(20px);  }

最终输出:

.hello{    border: 20px solid palegreen;}

3.默认带值

.border(@border-width:10px){    border:@border-width solid blue;  }  .hello{    .border();  }

最终输出:

.hello{    border: 10px solid blue;}

如果不想要默认值,可以.border(参数值)

3.匹配模式

.pos(r){    position: relative;  }  .pos(a){    position: absolute;  }  .pos(f){    position: fixed;  }  .hello{    .pos(f);  }

最终输出:

.hello{    position: fixed;}

若:

.pos(@_){    width:100px;}

最终输出:

.hello{    width:100px;    position: fixed;}

@_表示所有的.pos都必须带上里面的属性

4.运算

@width:20px;  .hello{    width: @width*2+10;  }

最终输出:

.hello{    width: 50px;}

5.嵌套

.list{    li{      width:100px;    }  }

最终输出:

.list li{    width: 100px;}

less中悬浮:

.list{    &:hover{      background: red;    }  }

最终输出:

.list:hover{      background: red;  }

注意:&在less中是表示上一层选择器的意思

6.argument变量

.border(@border-width:3px,@x:solid,@c:black){     border:@arguments;  }  .box{    .border();  }

最终输出:

.box{    border: 3px solid black;}

@arguments就是表示()中所有参数值

7.转义

格式:~"" 或者 ~''

@min768: ~"(min-width: 768px)";  .hello {    @media @min768 {      font-size: 20px;    }  }

最终输出:

@media (min-width: 768px){    .hello{    font-size: 20px;}}

当less无法识别某个字符串的时候,就得用转义,防止编译错误

8.函数

less内置了很多用于转换颜色、处理字符串等函数,具体见官网地址:

9.when条件判断

.mixin (@flag) when (@flag){    font-weight: bold;  }  .hello{    .mixin(true);  }

最终输出:

.hello{     font-weight: bold;  }

当@flag为真的时候,就调用

转载地址:http://axpia.baihongyu.com/

你可能感兴趣的文章
Spring Cloud构建微服务架构:服务容错保护(Hystrix服务降级)
查看>>
ThinkSNS系统升级,版本多样化
查看>>
ecshop使用smtp发送邮件
查看>>
RubyInstaller
查看>>
21. SQL -- TSQL架构,系统数据库,文件,SQL 认证,TSQL语句
查看>>
CentOS6.0添加163和epel源
查看>>
使用组策略与脚本发布Office 2010
查看>>
Open××× 分配固定IP
查看>>
elk+redis centos6.6安装与配置
查看>>
linux下svn命令大全
查看>>
windows server 2008 在vm上安装
查看>>
我的友情链接
查看>>
谷果等手机刷机build.prop解析
查看>>
Vbox虚拟机下 Linux网络配置
查看>>
Vmware vsphere知识中易混淆和忽略的多个概念
查看>>
Android客户端和服务端如何使用Token和Session
查看>>
Python Pycharm导入第三方包
查看>>
Nginx源码安装
查看>>
我的友情链接
查看>>
提升方法---提升方法AdaBoost方法
查看>>