一、什么是less
??????
~~~~~~
??????Less(Leaner Style Sheets 精簡(jiǎn)樣式表) 是一種動(dòng)態(tài)樣式語言，屬于 css 預(yù)處理器的范疇，它擴(kuò)展了 CSS 語言，增加了變量、Mixin、函數(shù)等特性，使 CSS 更易維護(hù)和擴(kuò)展，Less 既可以在 客戶端 上運(yùn)行 ，也可以借助 Node.js 在服務(wù)端運(yùn)行。
Less 編譯工具：
- Koala(opens new window)
- vscode 的 Easy LESS 插件
二、基本使用
2.1 基本語法
- 多行注釋保留
- 單行注釋不被保留在編譯生成的 CSS 中
- @ 聲明變量，作為普通屬性值使用
/*
多行注釋保留
*/
// 單行注釋不被保留在編譯生成的 CSS 中
@width:100px;
.outer{
width: @width+100px;
height: @width+100px;
border: 1px solid red;
.inner{
margin: 0 auto;
margin-top: 50px;
width: 50px;
height: 50px;
background-color: orange;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="../css/01.css"/>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
2.2 變量插值
- 變量用于選擇器名、屬性名、URL、@import語句
/*
變量用于選擇器名、屬性名、URL、@import語句
*/
@selector:outer;
// 需要添加 {}
.@{selector}{
height: 200px;
width: 200px;
background-color: orange;
}
@property: color;
.widget {
@{property}: #0ee;
background-@{property}: #999;
}
@images: '../img';
// Usage
body {
color: #444;
background: url('@{images}/white-sand.png');
}
@themes: '../../src/themes';
// Usage
@import '@{themes}/tidal-wave.less';
2.3 延遲加載
當(dāng)一個(gè)變量被聲明多次，會(huì)取最后一次的值，并從當(dāng)前作用域往外尋找變量。
//當(dāng)一個(gè)變量被聲明多次，會(huì)取最后一次的值，并從當(dāng)前作用域往外尋找變量。
@var:0;
.outer{
@var:1px;
.inner{
@var:2px;
height: 200px;
width: 200px;
background-color: orange;
border: @var solid black;
@var:3px;
}
width: 300 * @var;
height: 300 * @var;
}
.outer {
width: 300px;
height: 300px;
}
.outer .inner {
height: 200px;
width: 200px;
background-color: orange;
border: 3px solid black;
}
2.4 屬性名變量
您可以很容易地將屬性看作是使用$prop語法的變量
// 您可以很容易地將屬性看作是使用$prop語法的變量
.outer{
width: 200px;
height: @width;
border: 1px solid black;
}
2.5 嵌套
Less 提供了使用嵌套(nesting)代替層疊或與層疊結(jié)合使用的能力
//Less 提供了使用嵌套(nesting)代替層疊或與層疊結(jié)合使用的能力
.outer{
width: 200px;
height: 200px;
border: 1px solid black;
@width:50px;
@height:50px;
.inner1{
width: @width;
height: @height;
background-color: orange;
}
.inner2{
width: @width;
height: @height;
background-color: red;
}
}
2.6 父選擇器
在嵌套規(guī)則中， & 表示父選擇器，常用于給現(xiàn)有選擇器添加偽類。
//在嵌套規(guī)則中， &表示父選擇器，常用于給現(xiàn)有選擇器添加偽類。
// 如果沒有 &，會(huì)被編譯成后代選擇器 .inner1 :hover。
.outer{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 0 auto;
position: relative;
.inner1{
width: 100px;
height: 100px;
background-color: orange;
transition: 0.2s linear;
position: absolute;
top: 50px;
left: 50px;
&:hover{
box-shadow: 0 0 20px black;
}
}
}
如果沒有 &，會(huì)被編譯成后代選擇器 a :hover。
除此之外，& 還能用于生成重復(fù)類名：
//除此之外，& 還能用于生成重復(fù)類名：
.box{
&-demo{
width: 200px;
height: 200px;
background-color: red;
}
}
三、混合
3.1 普通混合
混合(Mixin)是一種將一組屬性從一個(gè)規(guī)則集包含(或混入)到另一個(gè)規(guī)則集的方式，可理解為復(fù)制粘貼
//混合(Mixin)是一種將一組屬性從一個(gè)規(guī)則集包含(或混入)到另一個(gè)規(guī)則集的方式，可理解為復(fù)制粘貼。
.test{
width: 100px;
height: 100px;
background-color: orange;
}
.outer{
width: 200px;
height: 200px;
border: 1px solid black;
.inner1{
.test()
}
}
.test {
width: 100px;
height: 100px;
background-color: orange;
}
.outer {
width: 200px;
height: 200px;
border: 1px solid black;
}
.outer .inner1 {
width: 100px;
height: 100px;
background-color: orange;
}
3.2 帶參數(shù)的混合
- 混合帶參數(shù)，參數(shù)需要按順序傳遞
//1.混合帶參數(shù)，參數(shù)需要按順序傳遞 .border1(@width,@style,@color){ border: @width @style @color; } .outer{ width: 200px; height: 200px; .border1(1px,solid,black); }.outer { width: 200px; height: 200px; border: 1px solid black; } - 混合帶參數(shù)并有默認(rèn)值
需注意的是，就算有默認(rèn)值，也要按順序傳遞
//2.混合帶參數(shù)并有默認(rèn)值
.border2(@width:2px,@style,@color:red){
border: @width @style @color;
}
.outer{
.inner1{
width: 100px;
height: 100px;
.border2(1px,solid);
}
}
3.3 命名參數(shù)
可以在向混合傳參是指定參數(shù)名稱，從而不需要按順序傳入
//可以在向混合傳參時(shí)指定參數(shù)名稱，從而不需要按順序傳入
.border1(@width:2px,@style,@color){
border: @width @style @color;
}
.outer{
width: 200px;
height: 200px;
.border1(@style:solid,@color:black);
}
3.4 @arguments 變量
@arguments 變量包含了傳入的所有參數(shù)
//@arguments 變量包含了傳入的所有參數(shù)
.box-shadow(@x: 0, @y: 0, @blur:20px, @color: #000){
box-shadow: @arguments;
}
.outer{
height: 200px;
width: 200px;
border: 1px solid black;
.box-shadow(0,0,@color:red);
}
3.5 匹配模式
在多個(gè)相同的混合中(參數(shù)個(gè)數(shù)必須相同)，匹配特定的混合。
.mixin(dark, @color) {
color: darken(@color, 10%);
}
.mixin(light, @color) {
color: lighten(@color, 10%);
}
// @_ 表示匹配所有
.mixin(@_, @color) {
display: block;
}
@switch: light;
.class {
.mixin(@switch, #888);
}
.class {
color: #a2a2a2;
display: block;
}
四、運(yùn)算
計(jì)算結(jié)果以操作數(shù)最左側(cè)的單位類型為準(zhǔn)
//計(jì)算結(jié)果以操作數(shù)最左側(cè)的單位類型為準(zhǔn)
@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm - 5mm; // -1.5cm
@conversion-3: 3.1 * 2cm; // 6.2cm
@conversion-4: 4px / 2; // 4px / 2
// conversion is impossible
@incompatible-units: 1cm - 1px; // 0.97354167cm
// example with variables
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%
@color: #224488 / 2; // #112244
body{
background-color: #112244 + #111; // #223355
}
五、繼承
5.1 繼承格式
繼承可讓多個(gè)選擇器應(yīng)用同一組屬性，最終編譯為并集選擇器
其性能比混合高，但靈活性比混合低
/*
繼承可讓多個(gè)選擇器應(yīng)用同一組屬性，最終編譯為并集選擇器
其性能比混合高，但靈活性比混合低
*/
.inner1{
&:extend(.inner);
background-color: orange;
}
.inner{
width: 50px;
height: 50px;
}
.inner1 {
background-color: orange;
}
.inner,
.inner1 {
width: 50px;
height: 50px;
}
5.2 繼承all
可理解為把 all 前的選擇器出現(xiàn)的地方全都替換為 extend 前的選擇器
即把 .test 替換為 .replacement 生成一個(gè)新的選擇器應(yīng)用樣式，且不破壞原有的選擇器
/*
可理解為把 all 前的選擇器出現(xiàn)的地方全都替換為 extend 前的選擇器
即把 .test 替換為 .replacement 生成一個(gè)新的選擇器應(yīng)用樣式，且不破壞原有的選擇器
*/
.box.inner1{
width: 200px;
height: 200px;
background-color: orange;
}
.inner2:extend(.inner1 all){
}
.box.inner1,
.box.inner2 {
width: 200px;
height: 200px;
background-color: orange;
}
六、避免編譯
通過加引號(hào)可以避免 Less 編譯，直接把內(nèi)容輸出到 CSS 中
//通過加引號(hào)可以避免 Less 編譯，直接把內(nèi)容輸出到 CSS 中
.outer{
width: '200px + 100px';
height: 200px;
background-color: orange;
}
.outer {
width: '200px + 100px';
height: 200px;
background-color: orange;
}
七、命名空間和訪問符
有時(shí)，出于組織結(jié)構(gòu)或僅僅是為了提供一些封裝的目的，你希望對(duì)混合（mixins）進(jìn)行分組。你可以用 Less 更直觀地實(shí)現(xiàn)這一需求。假設(shè)你希望將一些混合（mixins）和變量置于 #bundle 之下，為了以后方便重用或分發(fā)：
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
現(xiàn)在，如果我們希望把 .button 類混合到 #header a 中，我們可以這樣做：
#header a {
color: orange;
#bundle.button(); // 還可以書寫為 #bundle > .button 形式
}
八、映射
從 Less 3.5 版本開始，你還可以將混合（mixins）和規(guī)則集（rulesets）作為一組值的映射（map）使用。文章來源：http://www.zghlxwxcb.cn/news/detail-666954.html
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
.button {
color: blue;
border: 1px solid green;
}
learn more文章來源地址http://www.zghlxwxcb.cn/news/detail-666954.html
到了這里，關(guān)于CSS預(yù)處理器-Less的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
