less 使用

less 根据屏幕大小适配

.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
  @media tv {
    color: black;
  }
}

output:

@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}
@media tv {
  .screen-color {
    color: black;
  }
}

参考链接:
http://lesscss.cn/features/#variables-feature


混合(Mixins)

"mix-in" properties from existing styles

You can mix-in class selectors and id selectors, e.g.

.a, #b { color: red; } 
.mixin-class { .a(); } 
.mixin-id { #b(); }

which results in:

.a, #b { color: red; } 
.mixin-class { color: red; }
.mixin-id { color: red; }

参考链接:
https://less.bootcss.com/#-mixins-

https://less.bootcss.com/#-variables-


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • LESS 的介绍 学习网站:快速入门 | Less.js 中文文档LESS « 一种动态样式语言 Less的安装 ...
    神秘者007阅读 717评论 0 0
  • less是什么 less是一种动态的样式语言。拓展了css的动态行为,比如变量、混合书写模式、操作和功能等,兼容先...
    Addy_Zhou阅读 545评论 1 3
  • 在使用Bootstrap為樣式框架的專案上,如果要改樣式: 1.自己新建一個css (什麼custom.css.....
    YNC再寫一篇阅读 318评论 0 1
  • 在使用Bootstrap為樣式框架的專案上,如果要改樣式: 1.自己新建一個css (什麼custom.css.....
    YNC再寫一篇阅读 1,335评论 0 2
  • 搜索功能### 当时用 less 打开文件后,可以使用搜索功能:1.前向搜索 此时会列出匹配到字符串“string...
    赵者也阅读 1,952评论 0 0