筆記:less的三種使用方法

?

直接在瀏覽器端使用

?


?

第一步,引入 .less 文件(注意要將 rel 屬性設置為“stylesheet/less”)

<link rel="stylesheet/less" type="text/css" href="styles.less" />

第二步,引入Less.js文件

<script src="less.js" type="text/javascript"></script>

(這里的js文件可以去官網下載)

?

需要特別注意的是:

1).less 樣式文件一定要在 Less.js之前引入,這樣才能保證 .less 文件被正確編譯。

2)由于瀏覽器端使用Less時,是使用 ajax 來拉取 .less 文件,如果直接在本機文件系統打開(即地址是file://開頭)或者是有跨域的情況下,會拉取不到 .less 文件,導致樣式無法生效。因此,必須在http(s)協議下使用,即必須在服務器環境下使用。

3)還有一種情況容易導致樣式無法生效,就是部分服務器(以IIS居多)會對未知后綴的文件返回404,導致無法正常讀取 .less文件。解決方案是,在服務器中為 .less 文件配置MIME值為 text/css。一種更簡單的方法,就是直接將 .less 文件改名為 .css 文件即可。

在開發階段,在頁面中嵌入一個 Less.js 將Less在線編譯成CSS樣式,確實很方便。但是,在線編譯會產生加載延遲,即便在瀏覽器中有不足一秒的加載延遲,也會降低性能。如果Javascrip執行錯誤,還會引起美觀問題。因此,在生產環境中,并不推薦這種方式,而是推薦在服務器端使用Less。


我在直接使用瀏覽器引用的時候,出現了第二種情況的錯誤,一直沒找到解決方案。

再考慮到實際運用性,故采用在服務器端使用的方式。

?

在服務器端Node.JS中使用


?1. 安裝Less編譯器

為了方便使用 Lessc 這個全局命令,建議采用全局安裝。安裝命令如下:

$ npm install Less -g

如果想安裝指定版本,也非常方便,只需在安裝包后添加 @VERSION即可。如,安裝1.6.2版本的命令如下:

$ npm install Less@1.6.2 -g

當然,如果你想安裝最新版本,可以嘗試以下命令:

$ npm install Less@latest -g

2. 編譯less文件并輸出標準格式的css文件

$ lessc styles.less styles.css

注:要輸出最小化的CSS可以使用clean-css插件。當插件安裝時,用-clean css選項指定一個縮小的css輸出:

$ lessc --clean-css styles.less styles.min.css

?

代碼中用法


?

只要安裝了 Less,就可以在Node中像這樣調用編譯器:

var Less = require('Less');
Less.render('.class { width: 1 + 1 }', function (e, css) {console.log(css);
});

經過編譯生成的 CSS 代碼為:

.class {width: 2;
}

你也可以手動調用解析器和編譯器:

var parser = new(Less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {if (err) { return console.error(err) }console.log(tree.toCSS());
});

?

轉載于:https://www.cnblogs.com/amcy/p/9784705.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/250494.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/250494.shtml
英文地址,請注明出處:http://en.pswp.cn/news/250494.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

koa --- nunjucks在Koa中的使用、中間件的配置

Nunjucks在Koa中的應用 app.js const koa require(koa); const app new koa(); const router require(./router) const nunjucks require(koa-nunjuncks-2); app.use(nunjucks({ext: html, // 指定視圖文件默認后綴path: path.join(__dirname, views), // 指定視圖目錄…

2018福大軟工實踐第六次作業

目錄 NABCD分析引用N(Need&#xff0c;需求)&#xff1a;A(Approach&#xff0c;做法)&#xff1a;B(Benefit&#xff0c;好處)&#xff1a;C(Competitors&#xff0c;競爭)&#xff1a;D(Delivery&#xff0c;交付)&#xff1a;初期中期個人貢獻分評定原則評定細則本組現場答辯…

day32—CSS多列布局學習

轉行學開發&#xff0c;代碼100天——2018-04-17 關于多列布局&#xff0c;前期已經梳理過&#xff0c;今天的培訓課程學習中再次提及&#xff0c;趁此也做個總結和檢驗。 多列布局的介紹參考&#xff1a; day08—css布局解決方案之多列布局關于多列布局的類型和方法&#xff1…

JDBC 事物處理

JDBC 事物處理 ?事務&#xff1a;指構成單個邏輯工作單元的操作集合 ?事務處理&#xff1a;保證所有事務都作為一個工作單元來執行&#xff0c;即使出現了故障&#xff0c;都不能改變這種執行方式。當在一個事務中執行多個操作時&#xff0c;要么所有的事務都被提交(commit…

centos6上安裝mysql8.0版本

本博客是采用yum源的方式安裝&#xff0c;非常的方便和快捷。(redhat 與centos7 等操作系統都可以采用此方法&#xff0c;步驟大體一致) mysql官網地址: https://dev.mysql.com 開始安裝&#xff1a; 1.清理環境&#xff0c;查看有沒有之前安裝過的mysql記錄&#xff0c;清理…

koa --- 使用koa-multer上傳文件+elementUI

核心代碼 const upload require(koa-multer) ({dest: ./public/images}); router.post(/upload, upload.single(file), ctx>{console.log(file, ctx.req.file);console.log(body, ctx.req.body);ctx.body 上傳成功; })目錄結構如下 基本思路 1.通過瀏覽器訪問url: http:…

[bzoj4003][JLOI2015]城池攻占_左偏樹

城池攻占 bzoj-4003 JLOI-2015 題目大意&#xff1a;一顆n個節點的有根數&#xff0c;m個有初始戰斗力的騎士都站在節點上。每一個節點有一個standard&#xff0c;如果這個騎士的戰斗力超過了這個門檻&#xff0c;他就會根據城池的獎勵增加自己的戰斗力。具體地&#xff1a;每一…

Java Web Servlet

Java Web Servlet Servlet是在服務器上運行的小程序。一個Servlet就是一個Java類&#xff0c;并且可以通過“請求-響應”編程模型來訪問的這個駐留在服務器內存里的Servlet程序。 Servlet可完成以下功能&#xff1a; 讀取客戶端&#xff08;瀏覽器&#xff09;發送的顯式的數…

第二篇 python基礎知識總結:數據、運算符

引子 我們跟任何人交流&#xff0c;說的每一句都是都一些文字組成&#xff0c;包含名詞、動詞、語句、標點符號等&#xff0c;組成我們說普通話構成的基本要素。同理我們學習python語言也要明白這些基本要素&#xff0c;也就是我們常說的基本語法&#xff0c;這是我們必須掌握的…

【BZOJ1797】[AHOI2009]最小割(網絡流)

【BZOJ1797】[AHOI2009]最小割&#xff08;網絡流&#xff09; 題面 BZOJ洛谷 題解 最小割的判定問題&#xff0c;這里就當做記結論吧。&#xff08;源自\(lun\)的課件&#xff09; 我們先跑一遍最小割&#xff0c;求出殘量網絡。然后把所有還有流量的邊拿出來跑\(Tarjan\)縮\(…

koa --- 使用Sequelize連接mysql

Sequelize介紹 為了快捷開發,社區出現了一系列的ORM(Object Relational Mapping)類庫ORM的字面意思為對象關系映射,它提供了概念性的、易于理解的模型化數據的方法。通過ORM,可以降低操作數據庫的成本。開發者不需要通過編寫SQL腳本來操作數據庫,直接通過訪問對象的方式來查詢…

Java Web Jsp

Java Web Jsp JSP全稱Java Server Pages&#xff0c;是一種動態網頁開發技術。它使用JSP標簽在HTML網頁中插入Java代碼。標簽通常以<%開頭以%>結束。 JSP是一種Java servlet&#xff0c;主要用于實現Java web應用程序的用戶界面部分。網頁開發者們通過結合HTML代碼、XHT…

Android gravity和layout_gravity的區別

一、gravity和layout_gravity相同處 兩者都是設置對齊方式的屬性。內部的屬性值相同。 根據英文意思也能理解其中的意思。如center_horizontal表示在水平方向上的位置為中間。 二、gravity和layout_gravity的不同處 gravity是設置自身內部元素的對齊方式。比如一個TextView&…

koa --- mongoose連接mongoDB

使用Mongoose對MongoDB進行操作 const mongoose require(mongoose); mongoose.connect(mongodb://localhost/test,{ })Mongoose中的Schema 定義Schema categorySchema const categorySchema new mongoose.Schema({name:String,description: String,createdAt:{type: Date,…

Java Web 請求轉發與請求重定向

Java Web 請求轉發與請求重定向 請求轉發 服務器行為&#xff0c;即用戶向服務器發送了一次http請求&#xff0c;該請求可能會經過多個信息資源處理以后菜返回給用戶&#xff0c;各個信息資源使用請求轉發機制互相轉發請求&#xff0c;但是用戶是感覺不到請求轉發的。通過req…

05.RDD詳解

05.Spark--RDD詳解 RDD詳解--groupByKey--reduceByKey [MapPartitionRDD單詞統計] 單詞統計 import org.apache.spark.{SparkConf,SparkContext} object WordCountScala{def main(args:Array[String]):Unit{//創建spark配置對象val confnew SparkConf()conf.setAppName("W…

Mininet

首先&#xff0c;我折騰了兩周多的東西終于弄出一點眉目了。 有以下幾個內容需要學習記憶一下。 1.虛擬機&#xff0c;弄不出來共享文件夾&#xff0c;就用U盤吧&#xff0c;賊快還不用安裝配置各種東西&#xff0c;virtualbox和VMware都支持。 2.ubantu安裝軟件中途失敗&#…

docker --- 使用docker-compose.yml生成redis,并連接redis-cli

docker.compose.yml 配置 version: 3.1 services:redis:image: redisports:- 6379:6379命令行:docker-compose up 查看: docker ps 進入redis-cli,輸入以下 docker exec -it 7dc0a redis-cli -h localhost -p 6379 操作Redis數據 設置 namemarron set name marron 獲取nam…

淺談javaweb三大框架和MVC設計模式

淺談javaweb三大框架和MVC設計模式轉載自&#xff1a;http://blog.csdn.net/sunpeng19960715/article/details/50890705 小序&#xff1a;博主以前在學javaweb的時候開始總不理解javaweb三大框架和MVC框架模式&#xff0c;雖然沒有把兩者混為一談&#xff0c;但是也是很暈菜。…

win下配置nginx

1.下載:http://nginx.org/en/download.html 2.在安裝目錄cmd: start nginx.exe 啟動nginx 3.修改默認運行端口80(nginx.conf): HTTP 數據分發 修改配置文件nginx.conf相應節點: 修改完后重啟服務: nginx -s reload TCP 數據分發: nginx 1.9以上版本支持tcp轉發 配置文件中增加:…