博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
LESS
阅读量:5750 次
发布时间:2019-06-18

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

less是什么

less css是一种动态样式语言,属于css预处理语言的一种,它使用类似css的语法,为css赋予了动态语言的特性,如变量、继承、运算、函数等,更方便css的编写和维护

less于css,相当于jquery于JavaScript

编译工具

koala --初学者推荐 m可以去官网下载:http://koala-app.com/

Node.js库

浏览器端

less语法

less注释

1. /**/ 会被编译出来

2. // 不会被编译

main.less/* 我会被编译出来 */// 我不会被编译出来复制代码

main.css/* 我会被编译出来 */复制代码

变量

用@声明变量

main.less@width: 300px;.box {  width: @width;  height: @width;  background: pink;}复制代码
main.css.box {    width: 300px;    height: 300px;    background: pink;}复制代码

混合

1. 可直接引用 class

main.less.border {    border: 1px solid #ddd;}.box {    width: @width;    height: @width;    background: pink;    .border;}复制代码

main.css.box {  width: 300px;  height: 300px;  background: pink;  border: 1px solid #ddd;}复制代码

2. 可带参数,并且可以设置默认值

main.less.padding(@padding) {  padding:@padding;}.margin_left(@margin_left:10px) {  margin-left: @margin_left;}.border_radius(@radius:10px) {  -webkit-border-radius: @radius;  -moz-border-radius: @radius;  border-radius: @radius;}.box {  width: @width;  height: @width;  background: pink;  .border;  .padding(10px); // 无默认值时 必须指定值  .margin_left(20px); // 指定值时 用指定的值  .border_radius(); // 不指定值时 用默认值}复制代码
main.css.box {  width: 300px;  height: 300px;  background: pink;  border: 1px solid #ddd;  padding: 10px;  margin-left: 20px;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}复制代码

匹配模式

1. @_ 全部匹配

main.less// 匹配模式 写各个方向的三角形.triangle(top, @w: 10px, @c: red) {  border-width: @w;  border-color: transparent transparent @c transparent;  border-style: dashed dashed solid dashed;}.triangle(bottom, @w: 10px, @c: red) {  border-width: @w;  border-color: @c transparent transparent transparent;  border-style: solid dashed dashed dashed;}.triangle(left, @w: 10px, @c: red) {  border-width: @w;  border-color: transparent @c transparent transparent;  border-style: dashed solid dashed dashed;}.triangle(right, @w: 10px, @c: red) {  border-width: @w;  border-color: transparent transparent transparent @c;  border-style: dashed dashed dashed solid;}.triangle(@_, @w: 10px, @c: red) {  width: 0;  height: 0;  overflow: hidden;}.triangle_example {  .triangle(top)}复制代码
main.css.triangle_example {  border-width: 10px;  border-color: transparent transparent #ff0000 transparent;  border-style: dashed dashed solid dashed;  width: 0;  height: 0;  overflow: hidden;}复制代码

运算

main.less// 运算@width: 300px;.box_3 {  width: @width - 100;  height: @width;  background: pink;}复制代码
main.css.box_3 {  width: 200px;  height: 300px;  background: pink;}复制代码

嵌套规则

1.  对尾类的使用  - &:hover 或 &:focus  (& 代表上一级选择器)

main.html
  • 王俊凯
  • 王源
  • 易洋千玺
复制代码
main.less// 嵌套规则.list {  background: paleturquoise;  li {    line-height: 45px;    color: #333;    list-style: none;    &:hover {      color: #fff;    }  }}复制代码
main.css.list {  background: paleturquoise;}.list li {  line-height: 45px;  color: #333;  list-style: none;}.list li:hover {  color: #fff;}复制代码

@arguments变量

@arguments包含了所有传递进来的参数

如果你不想单独处理每一个参数的话就可以这样写

main.less.border_arg(@w: 2px, @type: solid, @c: #ddd) {
border: @arguments;}.test_arg { .border_arg();}复制代码
main.css.test_arg {  border: 2px solid #dddddd;}复制代码

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法

要输出这样的值我们可以在字符串前加上一个~''

main.less// 其实我们的本意是 要浏览器计算calc.box_4 {  width: calc(100% - 30px);  height: 300px;  background: paleturquoise;}.box_5 {  width: ~'calc(100% - 30px)';  height: 300px;  background: palegoldenrod;}复制代码
main.css.box_4 {  width: calc(70%);  height: 300px;  background: paleturquoise;}.box_5 {  width: calc(100% - 30px);  height: 300px;  background: palegoldenrod;}复制代码

!important关键字

main.less.border_radius(@radius:10px) {  -webkit-border-radius: @radius;  -moz-border-radius: @radius;  border-radius: @radius;}.box_6 {  width: 300px;  height: 300px;  background: pink;    .border_radius()!important;}复制代码
main.css.box_6 {  width: 300px;  height: 300px;  background: pink;  -webkit-border-radius: 10px !important;  -moz-border-radius: 10px !important;  border-radius: 10px !important;}复制代码

注:以上css均为对应less编译后的样子,html中引入的样式文件为css文件

更多

lesscss网站: 

lesscss中文网:

转载于:https://juejin.im/post/5c1a09025188251f1f32087d

你可能感兴趣的文章
求职准备 - 收藏集 - 掘金
查看>>
Linux-Centos启动流程
查看>>
php 设计模式
查看>>
后端技术精选 - 收藏集 - 掘金
查看>>
Laravel 服务容器
查看>>
mac安装kubernetes并运行echoserver
查看>>
多页架构的前后端分离方案(webpack+express)
查看>>
算法(第4版) Chapter 1
查看>>
前端技术选型的遗憾和经验教训
查看>>
“亲切照料”下的领域驱动设计
查看>>
SRE工程师到底是做什么的?
查看>>
解读:Red Hat为什么收购Ansible
查看>>
Ossim下的安全合规管理
查看>>
DelphiWebMVC框架下BPL热部署实现
查看>>
C++与MySQL的冲突
查看>>
siki学习之观察者模式笔记
查看>>
spring.net 继承
查看>>
ES6:模块简单解释
查看>>
JavaScript indexOf() 方法
查看>>
ZJU PAT 1023
查看>>