本備忘單旨在快速理解 所涉及的主要概念,顯示了它的常用方法使用清單
Less(Leaner Style Sheets 的縮寫)是一門向后兼容的 CSS
擴展語言
在 Node.js 環境中使用 Less
$ npm install -g less
$ lessc styles.less styles.css
在瀏覽器環境中使用 Less
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdn.jsdelivr.net/npm/less@4" ></script>
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
編譯 css 為:
#header {
width: 10px;
height: 20px;
}
另見:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
另見:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
???? 更改為 less 的寫法 ? ????
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
.button {
color: blue;
&-ok {
background-image: url("ok.png");
}
&:hover {
color: green;
}
}
編譯 css 為:
.button {
color: blue;
}
.button-ok {
background-image: url("ok.png");
}
.button:hover {
color: green;
}
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/icon2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
編譯 css 為:
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/icon2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
算術運算符 +
、-
、*
、/
對任何數字、顏色或變量進行運算
@conversion-1: 5cm + 10mm; // 結果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 結果 -1.5cm
@incompatible-units: 2 + 5px - 3cm;
// 結果是 4px
@base: 5%;
@filler: @base * 2; // 結果是 10%
@other: @base + @filler; // 結果是 15%
@base: 2cm * 3mm; // 結果是 6cm
@color: (#224488 / 2); // 結果是 #112244
background-color: #112244 + #111;
// 結果是 #223355
@color: #222 / 2;
// 結果是 `#222 / 2`, not #111
background-color: (#FFFFFF / 16);
// 結果是 #101010
為了與 CSS
保持兼容,calc()
并不對數學表達式進行計算,但是在嵌套函數中會計算變量和數學公式的值
@var: 50vh/2;
width: calc(50% + (@var - 20px));
// 結果是 calc(50% + (25vh - 20px))
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
編譯 css 為:
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
從 Less 3.5 開始,可以簡寫為
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
在 Less 3.5+ 版本中,許多以前需要“引號轉義”的情況就不再需要了
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // 返回 `50%`
color: saturate(@base, 5%);
background-color:
spin(lighten(@base, 25%), 8);
}
Less 內置了多種函數用于轉換顏色、處理字符串、算術運算等
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
把 .button
類混合到 #header a
中,我們可以這樣做
#header a {
color: orange;
#bundle.button();
// 還可以書寫為 #bundle > .button 形式
}
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
輸出符合預期(css):
.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;
}
另見:
/* 一個塊注釋
* style comment! */
@var: red;
// 這一行被注釋掉了!
@var: white;
塊注釋和行注釋都可以使用
@import "library"; // library.less
@import "typo.css";
另見:
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
編譯 css 為:
nav ul {
background: blue;
}
.inline,
nav ul {
color: red;
}
@bg: black;
@bg-light: boolean(luma(@bg) > 50%);
div {
background: @bg;
color: if(@bg-light, black, white);
}
編譯 css 為:
div {
background: black;
color: white;
}
:- | :- |
---|---|
escape | 將 應用于輸入字符串中的特殊字符 |
e | 字符串轉義 |
% | 第一個參數是帶有占位符的字符串 |
escape('a=1') // 輸出 a%3D1
@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()"
filter: e(@mscode);
// 輸出 filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
// 輸出 format-a-d: "repetitions: 3 file: "directory/file.less"";
replace("Hello, Mars?", "Mars\?", "Earth!");
replace("One + one = 4", "one", "2", "gi");
replace('This is a string.', "(string)\.$", "new $1.");
replace(~"bar-1", '1', '2');
預期輸出
"Hello, Earth!";
"2 + 2 = 4";
'This is a new string.';
bar-2;
@list: "banana", "tomato", "potato", "peach";
n: length(@list);
預期輸出
n: 4;
返回值列表中的元素數
@list: apple, pear, coconut, orange;
value: extract(@list, 3);
預期輸出
value: coconut;
返回列表中指定位置的值
value: range(4);
// 輸出 value: 1 2 3 4;
value: range(10px, 30px, 10);
// 輸出 value: 10px 20px 30px;
生成跨越一系列值的列表
@selectors: blue, green, red;
each(@selectors, {
.sel-@{value} {
a: b;
}
});
預期輸出
.sel-blue {
a: b;
}
.sel-green {
a: b;
}
.sel-red {
a: b;
}
每個列表成員的每個規則集都綁定到 @value
、@key
和 @index
變量
@set: {
one: blue;
two: green;
three: red;
}
.set {
each(@set, {
@{key}-@{index}: @value;
});
}
預期輸出
.set {
one-1: blue;
two-2: green;
three-3: red;
}
將規則集的評估綁定到列表的每個成員
set-2() {
one: blue;
two: green;
three: red;
}
.set-2 {
// 調用 mixin 并迭代每個規則
each(.set-2(), .(@v, @k, @i) {
@{k}-@{i}: @v;
});
}
預期輸出
.set-2 {
one-1: blue;
two-2: green;
three-3: red;
}
range
和 each
創建一個 for
循環each(range(4), {
.col-@{value} {
height: (@value * 50px);
}
});
預期輸出
.col-1 {
height: 50px;
}
.col-2 {
height: 100px;
}
.col-3 {
height: 150px;
}
.col-4 {
height: 200px;
}
:- | :- |
---|---|
ceil(2.4) (輸出 3) | 向上舍入到下一個最大整數 |
floor(2.6) (輸出 2) | 向下舍入到下一個最小整數 |
percentage(0.5) (輸出 50%) | 將浮點數轉換為百分比字符串 |
round(1.67) (輸出 2) | 應用舍入 |
sqrt(25cm) (輸出 5cm) | 計算數字的平方根。保持單位不變 |
abs(25cm) (輸出 25cm) | 計算數字的絕對值。 保持單位不變 |
sin(1deg) (輸出 0.01745240643728351) | 計算正弦函數 |
asin(-0.8414709848078965) (輸出 -1rad) | 計算反正弦(正弦的倒數)函數 |
cos(1deg) (輸出 0.9998476951563913) | 計算余弦函數 |
acos(0.5403023058681398) (輸出 1rad) | 計算反余弦(余弦的倒數)函數 |
tan(1deg) (輸出 0.017455064928217585) | 計算正切函數 |
atan(-1.5574077246549023) (輸出 -1rad) | 計算反正切(正切的倒數)函數 |
pi() (輸出 3.141592653589793) | π (pi) |
pow(0cm, 0px) (輸出 1cm) | 返回第一個參數的第二個參數次冪的值 |
mod(11cm, 6px) (輸出 5cm) | 返回第一個參數模數第二個參數的值 |
min(5, 10) (輸出 5) | 返回一個或多個值中的最小值 |
max(5, 10) (輸出 10) | 返回一個或多個值中的最大值 |
:- | :- |
---|---|
rgb | |
rgba | |
argb | |
hsl | |
hsla | |
hsv | |
hsva |
:- | :- |
---|---|
isnumber | 值是否為數字 |
isstring | 值是否為字符串 |
iscolor | 值是否為顏色值 |
iskeyword | 值是否為 keyword |
isurl | 值是否為 url 值 |
ispixel | 值是否為像素值 |
isem | 值是否為 em 值 |
ispercentage | 值是否為 百分百 值 |
isunit | 值是是否為指定單位的數字 |
isruleset | 值是否為規則集 |
isdefined | 值是否為 defined |
:- | :- |
---|---|
color | |
image-size | |
image-width | |
image-height | |
convert | |
data-uri | |
default | |
unit | |
get-unit | |
svg-gradient |
:- | :- |
---|---|
hue | |
saturation | |
lightness | |
hsvhue | |
hsvsaturation | |
hsvvalue | |
red | |
green | |
blue | |
alpha | |
luma | |
luminance |
:- | :- |
---|---|
saturate | |
desaturate | |
lighten | |
darken | |
fadein | |
fadeout | |
fade | |
spin | |
mix | |
tint | |
shade | |
greyscale | |
contrast |
:- | :- |
---|---|
multiply | |
screen | |
overlay | |
softlight | |
hardlight | |
difference | |
exclusion | |
average | |
negation |