LESS 的介紹
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的應用
image.png
Example1
在桌面新建一個 test.less 文件并進行編輯
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
在命令行中進入該目錄下進行編譯
image.png
cd Desktop
//這個命令是將 less 文件的源碼進行編譯，之后輸出到命令行中 下圖1
lessc test.less
//這個命令是將 less 文件的源碼進行編譯后在桌面生成一個 ok.css 的文件 下圖2 & 3
lessc test.less > ok.css
image.png
image.png
image.png
image.png
Example2
- 桌面新建一個 lesstest 的文件夾，將之前下載的 less.min.js 文件復制到該文件夾下
image.png
- 將該文件夾拖拽至編輯器 sublime 中，新建一個 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;
}
- 鼠標在 index.html 文件中右鍵選擇 在瀏覽器中打開
image.png
-
需要注意的是這里直接運行的時候并沒有任何的效果
image.png- 而且在控制臺也爆出了錯誤：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
跨源請求只支持協議方案：HTTP、數據、Chrome、Chrome擴展、HTTPS、Chrome擴展資源。- 報錯原因：
image.png
-
修復上面的報錯：將桌面的整個 lesstest 文件夾復制到了 xampp 軟件的 \htdocs 文件夾下
image.png- 之后啟動 Apache
image.png- 再在瀏覽器中訪問 lesstest 目錄這一次成功了，頁面中的文字也有了顏色的變化
image.png
上面只是非常簡單的示例，接下來深入了解
混合
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
嵌套規則
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
函數 & 運算
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>
- 在控制臺中編譯 index.less 文件
lessc index.less > index.css
- 之后再刷新瀏覽器頁面
image.png
監視模式
image.png
image.png
other
image.png
image.png
image.png
image.png
http://www.bootcss.com/p/lesscss/#docs LESS 詳細語法
