首页 > 代码库 > LESS笔记

LESS笔记

2024-10-10 15:03:02   231人阅读

1.Less是基于JS编译的，不能直接使用的样式表

2.Less可以定义变量，在作用域中使用，并且部分变量可进行运算

@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header {  color: @light-blue;}

 

　　输出：

#header {  color: #6c94be;}

3.可以在一个类名中引用另一个类名来复用它的样式

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

4.为了代码的可读性可以进行类名声明时嵌套

　　未嵌套前：

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

　　嵌套后：

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

5.在类名嵌套声明时可以使用“&”符号来表示它的父级

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

6.进行运算时的规律

// numbers are converted into the same units@conversion-1: 5cm + 10mm; // result is 6cm@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm// conversion is impossible@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

7.颜色运算时规律

@color: #224488 / 2; //results in #112244background-color: #112244 + #111; // result is #223355

8.Less内置了多种函数用于转换颜色、处理字符串、算术运算等。

@base: #f04615;@width: 0.5;.class {  width: percentage(@width); // 将0.5转换为50%  color: saturate(@base, 5%);    //将颜色饱和度增加5%  background-color: spin(lighten(@base, 25%), 8);  //亮度降低25%,色相增加8}

9.作用域问题，和JS一样，就近原则

@var: red;#page {  @var: white;  #header {    color: @var; // white  }}
@var: red;#page {  #header {    color: @var; // white  }  @var: white;}

10.选择器也可以预定义

// Variables@mySelector: banner;// Usage.@{mySelector} {  font-weight: bold;  line-height: 40px;  margin: 0 auto;}

　　输出后

.banner {  font-weight: bold;  line-height: 40px;  margin: 0 auto;}

11.URLs预定义和调用

// Variables@images: "../img";// 用法body {  color: #444;  background: url("@{images}/white-sand.png");}

12.在一个Less中可以引用另一个Less，但是小心会有属性复写问题

// library@base-color: green;@dark-color: darken(@base-color, 10%);// use of library@import "library.less";@base-color: red;   //base-color被重写，dark-color也被覆盖为dark-red

13.继承属性Extend，必须被写在最后

nav ul {  &:extend(.inline);  background: blue;}.inline {  color: red;}

　　上例也可以写成

nav ul:extend(.inline) {}

 

　　输出后：

nav ul {  background: blue;}.inline,nav ul {  color: red;}

14.继承外部使用!important的时候所有属性都将加上!important

.foo (@bg: #f5f5f5, @color: #900) {  background: @bg;  color: @color;}.unimportant {  .foo(1);}.important {  .foo(2) !important;}

　　输出后：

.unimportant {  background: #f5f5f5;  color: #900;}.important {  background: #f5f5f5 !important;  color: #900 !important;}

15.类名后面加括号只能挡模板，不能被输出使用

.mixin(@color: black; @margin: 10px; @padding: 20px) {  color: @color;  margin: @margin;  padding: @padding;}.class1 {  .mixin(@margin: 20px; @color: #33acfe);}.class2 {  .mixin(#efca44; @padding: 40px);}

　　输出后：

.class1 {  color: #33acfe;  margin: 20px;  padding: 20px;}.class2 {  color: #efca44;  margin: 10px;  padding: 40px;}The

 

LESS笔记


联系
我们