博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Less(v3.9.0)使用详解—基本用法
阅读量:6008 次
发布时间:2019-06-20

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

该系列:

其他待更新...

less是css的扩展,能通过特殊的语法写样式,然后自带工具编译为浏览器所能识别的css,下面是其一些基本用法,一般开发只需用到这些功能。

变量

@符号声明和引用,可写成表达式的形式

@width: 10px;@height: @width + 10px;#header {  width: @width;  height: @height;}复制代码

编译为

#header {  width: 10px;  height: 20px;}复制代码

混入(MIXINS)

minxins能够把一串样式规则封装起来,方便复用

.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}#menu a {  color: #111;  .bordered();}.post a {  color: red;  .bordered();}复制代码

编译后

.bordered {  border-top: dotted 1px black;  border-bottom: solid 2px black;}#menu a {  color: #111;  border-top: dotted 1px black;  border-bottom: solid 2px black;}.post a {  color: red;  border-top: dotted 1px black;  border-bottom: solid 2px black;}复制代码

注意不是非得类选择器(我看很多例子都用类选择器),也可以用id选择器

#ids{    color:red;}复制代码

嵌套

当css选择器存在父子关系时,可以像下面这样书写

#header {  color: black;  .navigation {    font-size: 12px;  }  .logo {    width: 300px;  }}复制代码

编译为

#header {  color: black;}#header .navigation {  font-size: 12px;}#header .logo {  width: 300px;}复制代码

注意&在嵌套里表示所有祖先选择器,下面是个清除浮动的例子

.clearfix {  display: block;  zoom: 1;  &:after {    content: " ";    display: block;    font-size: 0;    height: 0;    clear: both;    visibility: hidden;  }}复制代码

当遇到样式表规则比如@media或@supports时,他会冒泡寻找规则

.component {  width: 300px;  @media (min-width: 768px) {    width: 600px;    @media  (min-resolution: 192dpi) {      background-image: url(/img/retina2x.png);    }  }  @media (min-width: 1280px) {    width: 800px;  }}复制代码

编译成

.component {  width: 300px;}@media (min-width: 768px) {  .component {    width: 600px;  }}@media (min-width: 768px) and (min-resolution: 192dpi) {  .component {    background-image: url(/img/retina2x.png);  }}@media (min-width: 1280px) {  .component {    width: 800px;  }}复制代码

操作符

+, -, *, / 能用在数字,颜色,变量操作上,以最左边出现的单位为主,如果单位转换不了,无视右边单位,*和/单位无效

// 能够转换成同一单位@conversion-1: 5cm + 10mm; // result is 6cm@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm// px和cm转换不了,以px为单位,计算(2+5-3)@incompatible-units: 2 + 5px - 3cm; // result is 4px// example with variables@base: 5%;@filler: @base * 2; // result is 10%@other: @base + @filler; // result is 15%//*和/对单位没有意义@base: 2cm * 3mm; // result is 6cm@color: #224488 / 2; //results in #112244background-color: #112244 + #111; // result is #223355复制代码

calc(v3.0.0)

由于操作符的特性,导致直接在less在3.0版本下使用calc计算表达式会出现意向不到的现象

width: calc(50% + (25vh - 20px));  // result is calc(55%)复制代码

不过3.0版本就修复了这个问题,calc里的表达式编译会保持原样,变量会被替换

@var: 50vh/2;width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))复制代码

Escaping(转义)

当我们需要使用一个固定的值时,可以使用~“anything”或~‘anything’,比如上面的calc出现的问题就可以这样解决

@var: 50vh/2;width: calc(~"50% + (@{var} - 20px)");  // result is calc(50% + (25vh - 20px))复制代码

方法

less内置了很多方法

@base: #f04615;@width: 0.5;.class {  width: percentage(@width); // 百分比 returns `50%`  color: saturate(@base, 5%);   background-color: spin(lighten(@base, 25%), 8);}复制代码

Namespaces and Accessors

namespace类似mixin,是为了更好封装css,不会再像mixin一样在编译后出现

#bundle() {
.button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ... } .citation { ... }}#header a {
color: orange; #bundle.button(); // can also be written as #bundle > .button}复制代码

编译为

#header a {
color: orange; display: block; border: 1px solid black; background-color: grey;}#header a:hover{
background-color: white;}复制代码

注意namespace的(),不写的或就会在编译中出现

Map(v3.5.0)

#colors() {
primary: blue; secondary: green;}.button { color: #colors[primary]; border: 1px solid #colors[secondary];}复制代码

编译成

.button {  color: blue;  border: 1px solid green;}复制代码

作用域

@var: red;#page {
@var: white; #header {
color: @var; // white }}复制代码

从内向外找,具有变量提升

@var: red;#page {
#header {
color: @var; // white } @var: white;}复制代码

注释

/* One heck of a block * style comment! */@var: red;// Get in line!@var: white;复制代码

导入

导入的文件包含的变量可以正常范围,默认后缀是less

@import "library"; // library.less@import "typo.css";复制代码

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

你可能感兴趣的文章
php oop3乱七八糟的
查看>>
为什么编译tiny工程出错,提示"不兼容的类型"
查看>>
Linux学习之CentOS(十三)--CentOS6.4下Mysql数据库的安装与配置
查看>>
javax的NotBlank和Email注解失效
查看>>
Java设计模式百例 - 合成模式
查看>>
小细节入手巩固 wondows 2003 系统安全
查看>>
Mikro Tik ros脚本 if 判断
查看>>
TabBarItem的图片默认颜色
查看>>
scala学习(一)
查看>>
Python 学习笔记 (6)—— 读写文件
查看>>
RHCE7.0答案之用户创建与组创建
查看>>
Sublime快速入门-文本搜索
查看>>
Qt中的事件循环
查看>>
一大型工厂网络规划方案
查看>>
简化mysql –uroot –p登录 linux忘记mysql密码处理方法 解决root没有权限
查看>>
10月23日关于超链作弊的算法升级解读
查看>>
Jenkins + Git + Maven + tomcat集成环境搭建
查看>>
WordPress for BlackBerry使用攻略
查看>>
爆笑经典语录
查看>>
LazyMap.decorate()和ChainedTransformer的用处
查看>>