当前位置: 首页 > news >正文

Less 日常用法

Less 日常用法

你需要了解的

less 和 sass 是两种 css 预编译语言,其目的是为了更快、更结构的编写 css 文件,是一种强大的 css 编译语言,能使用 变量、运算符、判断、方法等等。

本文我只写一些自己常用的方法,要看全部的帮助文档,参阅这里: http://lesscss.cn/features/

看个小例子

写一个 .btn 类并支持 :hover :active 样式

CSS

.btn {
/* btn 初始样式 */
}
.btn:hover{
/* :hover 样式 */
}
.btn:active{
/* :active 样式 */
}

Less

.btn{
// btn 初始样式
    &:hover{
        // hover 样式
    }
    &:active{
        // active 样式
    }
}

可以看出 less 的结构要比 css 清晰,并且写的也要更少。
下面的 less 在使用中就会生成上面的 css。
而这还只是皮毛,保证你用过 less 之后就不会再用 css 写样式了。

变量

less 是支持变量的,因为有了变量,让 less 在改变全局样式的时候更加方便了。
一般使用中,颜色是最常用的。其次是单位长度。

@变量名: 变量值
// 如:
// Colors
@red:       #CD594B;
@yellow:    #F8CE5E;
@green:     #4B9E65;
@yellow:    #5A8DEE;

// Unites
@btn-padding: 4px;
@btn-lineheight: 26px;

实际使用中:

less

.btn-success {
    background-color: @green;
    line-height: @btn-lineheight;
    color: #fff;
}

生成 css

.btn-success {
    background-color: #4B9E65;
    line-height: 26px;
    color: #fff;
}

混合

可以直接在其它类中插入其它类的内容。

less

.bg-yellow {
    background-color: @yellow;
}

.btn-warn {
    line-height: @btn-lineheight;
    .bg-yellow;
}

会生成 css

.bg-yellow {
    background-color: #F8CE5E;
}

.btn-warn {
    line-height: 26px;
    background-color: #F8CE5E;
}

运算符

less 支持 + - * / ( ) 运算,看例子

@width-20: 20px;
@count: 3;
@per-10: 10%;

.card{
    width: @width-20 * @count;
    min-width: @per-10 * 7;
}
// 注意,运算的时候,要在运算符两边留空格,因为可能会有横线连接的变量,造成混淆。
// 单位 less 可以自动识别,不用担心单位。

输出

.card{
    width: 60px;
    min-width: 70%;
}

less 的内置函数

参阅 : http://lesscss.cn/functions/#...

完整的函数有:
杂项函数字符串函数列表函数数学函数类型函数颜色定义函数颜色通道函数颜色操作函数颜色混合函数

这里只说一此关于颜色的常用方法,因为其它的我现在也没怎么用到。

lighten(颜色, 百分比)
// 调高颜色的亮度

darden(颜色, 百分比)
// 调低颜色的亮度

saturate(颜色, 百分比)
// 调高饱和度

desaturate(颜色, 百分比)
// 调低饱和度

clipboard.png

@green: #4B9E65;


.green{
  background-color: @green;
}

.green-lighten{
  background-color: lighten(@green,20%);
}

.green-darken{
  background-color: darken(@green,20%);
}

.green-saturate{
  background-color: saturate(@green,20%);
}

.green-desaturate{
  background-color: desaturate(@green,20%);
}

输出

.green {
  background-color: #4B9E65;
}
.green-lighten {
  background-color: #88c79c;
}
.green-darken {
  background-color: #2a5939;
}
.green-saturate {
  background-color: #34b55c;
}
.green-desaturate {
  background-color: #62876e;
}

函数方法的使用

有时候,比如,你需要写一个按钮类 .btn-success, .btn-danger, .btn-default, .btn-warning,如果单个定义的话,会很麻烦,现在用了方法,就可以直接填参数完成了。

less

@green:     #4B9E65;
@blue:      #5A8DEE;
@yellow:    #F8CE5E;
@red:       #CD594B;

.btn-template(@bgcolor,@fcolor:white){
// 定义了两个参数,第二个参数有默认值
// 也就是说这个方法可以值一个或两个参数
// 另外 带 () 参数的方法不会把自身渲染到 css 中,只有调用才会渲染
  color: @fcolor;
  border-color: darken(@bgcolor, 3%);
  background-color: @bgcolor;
  &:hover {
    color: @fcolor;
    background-color: darken(@bgcolor, 5%);
  }
  &:active {
    color: @fcolor;
    background-color: darken(@bgcolor, 10%);
  }
}

.btn-success{
  .btn-template(@green)
}
.btn-primary{
  .btn-template(@blue)
}

.btn-warning{
  .btn-template(@yellow)
}

.btn-danger{
  .btn-template(@red)
}

上面的 less 输出为下面的内容,有没有很厉害



.btn-success {
  color: white;
  border-color: #46945e;
  background-color: #4B9E65;
}
.btn-success:hover {
  color: white;
  background-color: #438d5a;
}
.btn-success:active {
  color: white;
  background-color: #3b7b4f;
}
.btn-primary {
  color: white;
  border-color: #4c83ed;
  background-color: #5A8DEE;
}
.btn-primary:hover {
  color: white;
  background-color: #437dec;
}
.btn-primary:active {
  color: white;
  background-color: #2c6de9;
}
.btn-warning {
  color: white;
  border-color: #f7ca4f;
  background-color: #F8CE5E;
}
.btn-warning:hover {
  color: white;
  background-color: #f7c746;
}
.btn-warning:active {
  color: white;
  background-color: #f6bf2d;
}
.btn-danger {
  color: white;
  border-color: #ca4e3f;
  background-color: #CD594B;
}
.btn-danger:hover {
  color: white;
  background-color: #c74737;
}
.btn-danger:active {
  color: white;
  background-color: #b34032;
}

文件拆分,文件引用

像 js 和其它高级开发语言一样, less 也可以引用外部的 less 文件

引用格式:

@import "variables.less"

这样就把外部的 variables.less 引入到当前文件中了

variables.less
// colors
@green:     #4B9E65;
@blue:      #5A8DEE;
@yellow:    #F8CE5E;
@red:       #CD594B;

// units
@common-height: 30px;
@input-height: 26px;
@input-padding: 4px;
主体less文件
@import "variables.less"

// 主文件里面就可以引用 variables.less 中的变量了。

学习 Less 最好的例子

就是去看 bootstrap 3.4 的样式源码,bootstrap 3.4 就是用 less 写的,这也是我后来用 less 没用 sass 的主要原因。

下载 bootstrap 3.4 的 less 源码,看里面怎么写的,进步很快的。


是我孤陋寡闻了,原来 bootstarp 4 已经换作 SCSS 了,我也要转向 SCSS 了,学习完了再来分享给大家。

点这里去 github 查看 【 Bootstrap 分支 】 ,目前好像已经开始 v5.0 的开发了。

相关文章:

  • 手机端车牌号码键盘的vue组件
  • 回归生活:清理微信公众号
  • Cisco Nexus 系列交换机NX-OS升级
  • React开发实战
  • 工作中总结前端开发流程--vue项目
  • Java各种IO流的总结
  • MySQL-事务管理(基础)
  • Vultr 教程目录
  • Navicat
  • HTML-表单
  • mahout的数据文件格式
  • 微信小程序开发总结
  • 编码占用字节数
  • spring boot 整合mybatis 无法输出sql的问题
  • 小程序上传图片到七牛云(支持多张上传,预览,删除)
  • [ JavaScript ] 数据结构与算法 —— 链表
  • Android 控件背景颜色处理
  • Android框架之Volley
  • JAVA_NIO系列——Channel和Buffer详解
  • Js基础知识(一) - 变量
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • Linux后台研发超实用命令总结
  • MQ框架的比较
  • MyEclipse 8.0 GA 搭建 Struts2 + Spring2 + Hibernate3 (测试)
  • npx命令介绍
  • Redis的resp协议
  • spring cloud gateway 源码解析(4)跨域问题处理
  • Sublime Text 2/3 绑定Eclipse快捷键
  • 微信小程序开发问题汇总
  • 微信小程序设置上一页数据
  • 运行时添加log4j2的appender
  • Nginx实现动静分离
  • 阿里云ACE认证学习知识点梳理
  • 不要一棍子打翻所有黑盒模型,其实可以让它们发挥作用 ...
  • ​ssh免密码登录设置及问题总结
  • #define,static,const,三种常量的区别
  • ()、[]、{}、(())、[[]]命令替换
  • (zt)最盛行的警世狂言(爆笑)
  • (第27天)Oracle 数据泵转换分区表
  • (附程序)AD采集中的10种经典软件滤波程序优缺点分析
  • (附源码)计算机毕业设计SSM基于健身房管理系统
  • (一)ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • (一)u-boot-nand.bin的下载
  • .NET BackgroundWorker
  • .NET Core 2.1路线图
  • .net 获取url的方法
  • .NET大文件上传知识整理
  • .net反编译的九款神器
  • .NET与java的MVC模式(2):struts2核心工作流程与原理
  • /etc/sudoers (root权限管理)
  • @Transactional注解下,循环取序列的值,但得到的值都相同的问题
  • []新浪博客如何插入代码(其他博客应该也可以)
  • [AIGC] Java 和 Kotlin 的区别
  • [BZOJ] 2006: [NOI2010]超级钢琴
  • [iHooya]2023年1月30日作业解析