NodeJs管理Less/Sass_html/css_WEB-ITnose
预计阅读时间: 5 分钟
介绍
less官网 http://lesscss.org/
sass官网 http://sass-lang.com/
可以命令行安装也可以直接下载,其中less可以通过Nodejs的npm包管理去下载管理,sass则需要ruby去下载安装。
通过命令行,npm安装less
npm install -g less
Less知识点
- Variables变量定义
- Nested Rules嵌套规则(&代表当前元素的父元素)
- Operations算数表达式
- Functions函数
- Scope作用域
- import引用文件
变量
@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue;}
output输出
#header { color: #6c94be;}
嵌套规则
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; }}//相当于下面代码#header { color: black;}#header .navigation { font-size: 12px;}#header .logo { width: 300px;}
算数表达式
// example with variables@base: 5%;@filler: @base * 2; // result is 10%@other: @base + @filler; // result is 15%
函数
@base: #f04615;@width: 0.5;//percentage, saturate, lighten, spin等都是函数.class { width: percentage(@width); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8);}
作用域
@var: red;#page { #header { color: @var; // white } @var: white;}
引用文件
@import "library"; // library.less@import "typo.css";
怎么编译less呢?
命令行进入存放less文件的文件夹,用下述命令编译less,下面是在当前文件夹下输出css。lessc命令后面是less的存放路径和css的存放路径
$ lessc styles.less styles.css
less中间件用法
less-middleware官网: https://www.npmjs.com/package/less-middleware,进入项目文件夹,用命令行安装
npm install less-middleware --save

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

熱門話題

本文討論了HTML< Progress>元素,其目的,樣式和與< meter>元素。主要重點是使用< progress>為了完成任務和LT;儀表>對於stati

本文討論了html< datalist>元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

本文討論了HTML< meter>元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了< meter>從< progress>和前

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

本文討論了< iframe>將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...
