less引用其他less檔案
示例
//radius.less #header,#footer{ -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
//example6.less @import "radius.less"; @the-border:1px; @base-color:#111; @red:#842210; #header{ color:(@base-color * 3); border-left:(@the-border*10); border-right:(@the-border * 2); } #footer{ color:(@base-color + #003300); border-color:desaturate(@red,10%); }
說明
@import "radius.less" 表示通過import引入一個名字叫radius的less檔案
生成的csss檔案(example6.css)
#header, #footer { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } #header { color: #333333; border-left: 10px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; }
在html檔案中使用css(less6.html)
</html>
本文轉自 素顏豬 51CTO部落格,原文連結:
http://blog.51cto.com/suyanzhu/1900689
相關文章
- 如何在前端專案中引用bootstrap less?前端boot
- less 全域性變數使用 引用變數
- postcss支援vue/less/css/sass檔案CSSVue
- 【Less】Less基本用法總結
- Linux下用less瀏覽大檔案Linux
- vue專案安裝lessVue
- 命令:less
- Less tips:宣告變數之前可以引用變數!變數
- Sqli-Labs:Less2-Less4SQL
- Less 入門
- less巢狀巢狀
- Less 簡介
- LESS簡介
- Less-1
- 有用的javascript外部檔案或其他外部檔案引用JavaScript
- 規模化敏捷LeSS(二):LeSS*隊實踐指南敏捷
- vite中配置less,vue3中配置lessViteVue
- 規模化敏捷LeSS(二):LeSS團隊實踐指南敏捷
- SQLI-LAB 的 實戰記錄(Less 1 - Less 10)SQL
- less用法總結
- Linux Less 命令Linux
- less學習一
- JAVASCRIPT. BUT LESS IFFYJavaScript
- less 語法教程
- vue-cli構建專案使用 lessVue
- vue3專案中安裝lessVue
- 規模化敏捷 LeSS(三):LeSS Huge 是怎樣煉成的?敏捷
- sqli-less 筆記SQL筆記
- 在webstorm中配置lessWebORM
- VUE學習之lessVue
- webstrom配置sass與lessWeb
- Less程式碼規範
- Less函式說明函式
- 瀏覽器端Less瀏覽器
- CSS/LESS tips and snippetsCSS
- vscode的gulp-less自動把less編譯成cssVSCode編譯CSS
- 你所不知道的用 less 檢視檔案的高階用法
- Less is richness,基於less is more的部落格園寬屏主題魔改