- less後綴爲" .less "
- less中的註釋有兩種
// 這種註釋不會編譯到CSS文件
/* 這種註釋會編譯到CSS文件*/
div {
font-size: 14px;
}
複製代碼
- 使用link標籤引用less.min.js(官網下載),注意rel="stylesheet/less"
- 這種方式不生成css文件,直接在瀏覽器查看
/*css 寫法*/
div {
font-size: 14px;
}
div p {
margin: 0 auto;
}
div p a {
color: red;
}
// less寫法
div {
font-size: 14px;
p {
margin: 0 auto;
a {
color: red;
}
}
}
複製代碼
//css寫法
.bgcolor {
background: #fff;
}
.bgcolor a {
color: #888888;
}
.bgcolor a:hover {
color: #ff6600;
}
//less寫法
.bgcolor {
background: #fff;
a {
color: #888888;
&:hover {
color: #ff6600;
}
}
}
複製代碼
ul {
li {
.color &{
background: #fff;
}
}
}
//編譯結果
.color ul li {
background: #fff;
}
複製代碼
.div1, .div2 {
color: red;
& & {
border-top: 1px solid blue;
}
}
//編譯結果
.div1, .div2 {
color: red;
}
.div1 .div2,
.div2 .div1,
.div1 .div1,
.div2 .div2 {
border-top: 1px solid blue;
}
複製代碼
- 常規使用:@name
- 做爲選擇器或屬性名:@{name}
- 做爲URL:"@{name}"
/* 1.常規使用 */
@black: #000000;
div {
color: @black
}
//編譯結果
div {
color: #000000;
}
/* 2.做用選擇器和屬性名 */
@selName: container;
@proName: width;
.@{selName} {
@{proName}: 100px;
}
//編譯結果
.container {
width: 100px;
}
/* 3.做爲URL */
@imgUrl: "./images/logo.png"
div {
background: #FFF url("@{imgUrl}")
}
//編譯結果
div {
background: #FFF url("./images/logo.png")
}
複製代碼
div {
color: @black
}
@black: #000000;
//編譯結果
div {
color: #000000;
}
複製代碼
- less會從當前做用域沒找到,將往上查找(相似js)
- 若是在某級做用域找到多個相同名稱的變量,使用最後定義的那個(相似css)
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var;
@var: 3;
}
one: @var; //相似js,沒法訪問.brass內部
}
//編譯結果
.class {
one: 1;
}
.class .brass {
three: 3; //使用最後定義的 @var: 3
}
複製代碼
//混合
.border {
border-top: solid 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #eee;
.border;
}
//編譯結果
.border {
border-top: solid 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #eee;
border-top: solid 1px black;
border-bottom: solid 2px black;
}
複製代碼
//加括號但不帶參數的混合
.border() {
border-top: solid 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #eee;
.border; //加不加括號均可以
}
//編譯結果
#menu a {
color: #eee;
border-top: solid 1px black;
border-bottom: solid 2px black;
}
複製代碼
//帶參數的混合
.border(@color) {
border-top: solid 1px @color;
border-bottom: solid 2px @color;
}
#menu a {
color: #eee;
.border(#fff);
}
//編譯結果
#menu a {
color: #eee;
border-top: solid 1px #ffffff;
border-bottom: solid 2px #ffffff;
}
複製代碼
//帶參數且有默認值的混合
.border(@color: #fff) {
border-top: solid 1px @color;
border-bottom: solid 2px @color;
}
#menu a {
color: #eee;
.border;
}
#menu p {
.border(#000);
}
//編譯結果
#menu a {
color: #eee;
border-top: solid 1px #ffffff;
border-bottom: solid 2px #ffffff;
}
#menu p {
border-top: solid 1px #000000;
border-bottom: solid 2px #000000;
}
複製代碼
- 兩個參數,而且每一個參數都是逗號分隔的列表:.name(1,2,3; something, ele)
- 三個參數,而且每一個參數都包含一個數字:.name(1,2,3)
- 使用分號,調用包含一個逗號分割的css列表(一個參數): .name(1,2,3; )
- 逗號分割默認值(兩個參數):.name(@param1:red, blue)
//less編寫
.mixin(@color, @padding: xxx, @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.div {
.mixin(1,2,3; something, ele); //2個參數
}
.div1 {
.mixin(1,2,3); //3個參數
}
.div2 {
.mixin(1,2,3; ); //1個參數
}
//編譯輸出
.div {
color-3: 1, 2, 3;
padding-3: something, ele;
margin: 2 2 2 2;
}
.div1 {
color-3: 1;
padding-3: 2;
margin: 3 3 3 3;
}
.div2 {
color-3: 1, 2, 3;
padding-3: xxx;
margin: 2 2 2 2;
}
複製代碼
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding: 3; @margin) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000); //第二個mixins也被調用了,由於 @padding 有默認值
}
.some .selector p {
.mixin(#008000, 5); //只有第二個mixins被調用
}
//編譯結果
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}
.some .selector p {
color-2: #008000;
padding-2: 5;
}
複製代碼
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin:20; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
//編譯輸出
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
複製代碼
.border(@x: solid, @c: red) {
border: 21px @arguments;
}
.div1 {
.border;
}
.div2 {
.border(solid, black)
}
//編譯輸出
.div1 {
border: 21px solid #ff0000;
}
.div2 {
border: 21px solid #000000;
}
複製代碼
.border(all, @w: 5px) {
border-radius: @w;
}
.border(t_l, @w: 5px) {
border-top-left-radius: @w;
}
.border(b_l, @w: 5px) {
border-bottom-left-radius: @w;
}
.border(b_r, @w: 5px) {
border-bottom-right-radius: @w;
}
.border {
.border(all, 50%);
}
//編譯結果
.border {
border-radius: 50%;
}
複製代碼
.average(@x, @y) {
@average((@x + @y)/2);
}
div {
.average(16px, 50px);
padding: @average;
}
//編譯結果
div {
padding: 33px;
}
/* 一、將16px 和 50px 賦值給混合 .average進行計算 二、計算結果賦值給變量 @average 三、而後在div中調用@average的值 四、編譯後就獲得了average的值33px */
複製代碼
.wp {
width: (450px - 50)*2;
}
//編譯輸出
.wp {
width: 900px;
}
複製代碼
.content {
color: #000000 + 8;
}
//rgb(0,0,0) + 8
//rgb(8,8,8)
//十六進制:#080808
//編譯輸出
.content {
color: #080808;
}
複製代碼
//混合集
#bgcolor() {
background: #fff;
.a() {
color: #888;
&:hover {
color: #ff6600;
}
.b() {
background: #ff0000;
}
}
}
.bgcolor1 {
background: #fdfee0;
#bgcolor>.a; //只使用.a()
}
.bgcolor2 {
#bgcolor>.a>.b; //只使用.b()
}
//編譯輸出
.bgcolor1 {
background: #fdfee0;
color: #888;
}
.bgcolor1:hover {
color: #ff6600;
}
.bgcolor2 {
background: #ff0000;
}
複製代碼
//混合集
#bgcolor() {
background: #fff;
.a() {
color: #888;
&:hover {
color: #ff6600;
}
.b() {
background: #ff0000;
}
}
}
.bgcolor1 {
background: #fdfee0;
#bgcolor .a; //只使用.a()
}
.bgcolor2 {
#bgcolor .a .b; //只使用.b()
}
//編譯輸出
.bgcolor1 {
background: #fdfee0;
color: #888;
}
.bgcolor1:hover {
color: #ff6600;
}
.bgcolor2 {
background: #ff0000;
}
複製代碼
//main.less
@wp: 960px;
.color {
color: #fff;
}
//當前less文件
@import "main"; //能夠不加後綴
.content {
width: @wp;
}
//編譯輸出
.color {
color: #fff
}
.content {
width: 960px;
}
複製代碼
//main.css
.color {
color: #ff6600;
}
@import "main.css" ;
.content {
width: @wp;
height: @wp;
}
//編譯輸出
@import "main.css"; //原樣輸出,但有效,css有這條語句
.content {
width: 960px;
height: 960px;
}
複製代碼
@wp: 960px;
.color {
color: #fff;
}
//當前less文件
@import (reference) "main";
.content {
width: @wp;
}
//編譯輸出
.content {
width: 960px;
}
複製代碼
@wp: 960px;
.color {
color: #fff;
}
//當前less文件
@import (inline) "main";
.content {
width: @wp;
}
//編譯輸出
@wp: 960px; //報錯,@wp未知
.color {
color: #fff;
}
複製代碼
//main.css文件
.color {
color: #ff6600;
}
//當前less
@import (less) "main.css";
.content {
.color;
}
//編譯輸出
.color {
color: #ff6600;
}
.content {
color: #ff6600;
}
複製代碼
//當前less文件
@import (css) "main.less";
.content {
color: red;
}
//編譯輸出
@import "main.less";
.content {
color: red;
}
複製代碼
//當前less
@import (multiple) "main.less";
@import (multiple) "main.less";
@import (multiple) "main.less";
.content {
width: @wp;
}
//編譯輸出
.color {
color: #fff;
}
.color {
color: #fff;
}
.color {
color: #fff;
}
.content {
width: 960px;
}
複製代碼
.foo(@bg: #fdfdfd, @color: #900) {
background: @bg;
color: @color;
}
.important {
.foo() !important
}
//編譯輸出
.important {
background: #fdfdfd !important;
color: #990000 !important;
}
複製代碼
// lightness() 是檢測亮度的函數,用%度量
.mixin(@a) when(lightness(@a) >= 50% ) {
background-color: black;
}
.mixin(@a) when(lightness(@a) < 50% ) {
background-color: white;
}
.mixin(@a) {
color: @a;
}
.class1 {
.mixin(#ddd);
}
.class2 {
.mixin(#555);
}
//編譯輸出
.class1 {
background-color: black;
color: #dddddd;
}
.class2 {
background-color: white;
color: #555555;
}
複製代碼
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
.mixin(@a: #fff; @b: 0) when(isnumber(@b)) {
color: @a;
font-size: @b;
}
.mixin(@a; @b: black) when(iscolor(@b)) {
font-size: @a;
color: @b;
}
複製代碼
- ispixel
- ispercentage
- isem
- isunit
.mixin(@a) when(ispixel(@a)) {
width: @a;
}
.mixin(@a) when(ispercentage(@a)) {
width: @a;
}
.class1 {
.mixin(960px);
}
.class2 {
.mixin(95%);
}
//編譯輸出
.class1 {
width: 960px;
}
.class2 {
width: 95%;
}
複製代碼
.loop(@counter) when(@counter > 0) {
.h@{counter} {
padding: (10px*@counter);
}
.loop((@counter - 1)); //遞歸調用自身
}
div{
.loop(5);
}
//編譯輸出
div .h5 {
padding: 50px;
}
div .h4 {
padding: 40px;
}
div .h3 {
padding: 30px;
}
div .h2 {
padding: 20px;
}
div .h1 {
padding: 10px;
}
複製代碼
.mixin() {
box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin;
box-shadow+: 0 0 20px black;
}
//編譯輸出
.myclass {
box-shadow: inset 0 0 10px #555, 0 0 20px black; //逗號分隔兩個屬性值
複製代碼
.mixin() {
background+_: #f66;
background+_: url("/sss.jpg")
}
.class {
.mixin;
}
//編譯輸出
.class {
background: #f66 url("/sss.jpg"); //空格分隔
}
複製代碼
.mixin() {
background+_: #f66;
background+: url("/sss.jpg");
background+_: no-repeat;
background+: center;
}
.class {
.mixin;
}
//編譯輸出
.class {
background: #f66, url("/sss.jpg") no-repeat, center;
}
複製代碼
less中封裝了很是多函數庫,例如顏色定義、顏色操做、顏色混合、字符串處理等等css
例如color():用於解析顏色,將表明顏色的字符串轉換爲顏色值跨域
body {
color: color("#f60");
background: color("red");
}
//編譯輸出
body {
color: #ff6600;
background: #ff0000;
}
複製代碼
- 長度單位:m, cm, mm, in, pt, px, pc
- 時間單位:s, ms
- 角度單位:rad(弧度), deg(度), grad(梯度), tum(圓)
body {
width: convert(20cm, px);
}
//編譯輸出
body {
width: 755.90551181px;
}
複製代碼
感謝你的閱讀和點贊!瀏覽器