LESS 的介紹
學(xué)習(xí)網(wǎng)站：快速入門 | Less.js 中文文檔
LESS ? 一種動(dòng)態(tài)樣式語言
image.png
image.png
Less的安裝
image.png
image.png
//全局安裝 less
cnpm install -g less
image.png
//查看 less 命令是否可用--查看所有的命令
less --help
//之后退出
q
image.png
image.png
image.png
image.png
Less的應(yīng)用
image.png
Example1
在桌面新建一個(gè) test.less 文件并進(jìn)行編輯
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
在命令行中進(jìn)入該目錄下進(jìn)行編譯
image.png
cd Desktop
//這個(gè)命令是將 less 文件的源碼進(jìn)行編譯达椰，之后輸出到命令行中 下圖1
lessc test.less
//這個(gè)命令是將 less 文件的源碼進(jìn)行編譯后在桌面生成一個(gè) ok.css 的文件 下圖2 & 3
lessc test.less > ok.css
image.png
image.png
image.png
image.png
Example2
- 桌面新建一個(gè) lesstest 的文件夾粒氧，將之前下載的 less.min.js 文件復(fù)制到該文件夾下
image.png
- 將該文件夾拖拽至編輯器 sublime 中，新建一個(gè) index.html 和 index.less 文件
image.png
- 編輯文件
- index.html
<div class="test">Hello Less</div>
image.png
<link rel="stylesheet/less" type="text/css" href="index.less">
<script src="less.min.js" type="text/javascript"></script>
<div class="test">Hello Less</div>
- index.less
@color: #4D926F;
.test {
color: @color;
}
- 鼠標(biāo)在 index.html 文件中右鍵選擇 在瀏覽器中打開
image.png
-
需要注意的是這里直接運(yùn)行的時(shí)候并沒有任何的效果
image.png- 而且在控制臺(tái)也爆出了錯(cuò)誤：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
跨源請(qǐng)求只支持協(xié)議方案：HTTP妨猩、數(shù)據(jù)燕差、Chrome遭笋、Chrome擴(kuò)展、HTTPS徒探、Chrome擴(kuò)展資源瓦呼。- 報(bào)錯(cuò)原因：
image.png
-
修復(fù)上面的報(bào)錯(cuò)：將桌面的整個(gè) lesstest 文件夾復(fù)制到了 xampp 軟件的 \htdocs 文件夾下
image.png- 之后啟動(dòng) Apache
image.png- 再在瀏覽器中訪問 lesstest 目錄這一次成功了，頁面中的文字也有了顏色的變化
image.png
上面只是非常簡(jiǎn)單的示例测暗，接下來深入了解
混合
image.png
- 接下來還是在 sublime 中編輯桌面上的 lesstest 文件夾中的文件央串，把文件中之前寫的代碼都給注釋掉
- 編輯 index.less 文件
.rounded-corners (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 20px;
}
- 編輯 index.html 文件
<link rel="stylesheet/less" type="text/css" href="index.less">
<script src="less.min.js" type="text/javascript"></script>
<!-- <div class="test">Hello Less</div> -->
<div id="header">Hello Less--HEADER</div>
<div class="rounded-corners">Hello Less</div>
<div id="footer">Hello Less--FOOTER</div>
- 之后這里不再將文件夾放置到 htdocs 文件夾中，這次選擇直接在命令行中將 index.less 文件編譯成 css 文件
ls
lessc index.less > index.css
image.png
- 然后再編輯 index.html
<link rel="stylesheet" type="text/css" href="index.css">
<div id="header">Hello Less--HEADER</div>
<div class="rounded-corners">Hello Less</div>
<div id="footer">Hello Less--FOOTER</div>
image.png
- 之后再在瀏覽器中打開頁面
image.png
嵌套規(guī)則
image.png
- 編輯文件碗啄，把文件中之前寫的代碼都給注釋掉
- index.less
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
- index.html
<link rel="stylesheet" type="text/css" href="index.css">
<div id="header">
<h1>SXC</h1>
<p>
you are very <a href="">happy</a>
</p>
</div>
- 之后再在命令行中編譯 index.less 文件
lessc index.less > index.css
- 查看 index.css 文件
image.png
- 刷新瀏覽器頁面
image.png
函數(shù) & 運(yùn)算
image.png
- 編輯文件
index.less
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}
#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
div{
width: 100px;
height: 100px;
background: orange;
margin: 20px;
border: 1px solid red;
}
- index.html 這里使用第二次的示例代碼质和，將其解注釋，將第三次修改的給注釋掉
<link rel="stylesheet" type="text/css" href="index.css">
<div id="header">Hello Less--HEADER</div>
<div class="rounded-corners">Hello Less</div>
<div id="footer">Hello Less--FOOTER</div>
- 在控制臺(tái)中編譯 index.less 文件
lessc index.less > index.css
- 之后再刷新瀏覽器頁面
image.png
監(jiān)視模式
image.png
image.png
other
image.png
image.png
image.png
image.png
http://www.bootcss.com/p/lesscss/#docs LESS 詳細(xì)語法
