css編譯less
㈠ 小米官網css轉成less
應用程序中轉換。LESS是一種動態樣式表語言，擴展了CSS的功能，Less是一門CSS預處理語言，它擴展了CSS語言，增加了變數、Mixin、函數等特性。在小米官網中，在應用程序中完成css轉less，使CSS更易維護和擴展。
㈡ CSS中的預編譯語言less和sass
一個基礎的公用的less文件 名稱為 base.less 文件 內容如下:
在另一個 index.less文件 中使用
㈢ less樣式如何使用cssmole
1.Less
變數：@變數名
混合：在a類中使用b類的所有屬性， .a{ .b(); color:#fff}
嵌套：使用嵌套代替原始css的層疊，& 表示當前選擇器的父級
運算：+ - * /，可以對任何數字、顏色或變數進行運算
轉義：
函數：Less 內置了多種函數用於轉換顏色、處理字元串、算術運算等
命名空間和訪問符
作用域：首先在本地查找變數和混合（mixins），如果找不到，則從「父」級作用域繼承
注釋： // 行注釋，/.../塊注釋
導入：@import "library";可以導入一個 .less 文件，此文件中的所有變數就可以全部使用了, .less 擴展名，可以省略掉
2.css moles
CSS的規則都是全局的，任何一個組件的樣式規則，都對整個頁面有效。產生局部作用域的唯一方法，就是使用一個獨一無二的class的名字，不會與其他選擇器重名。 CSS Moles是通過哈希演算法將類名編譯，保證類名的唯一性。
聲明全局規則：
靈活按需導入以便復用代碼，避免樣式全局污染，但不利於寫組件單元測試
3.CSS bem規范
BEM - Block Element Modfier（塊，元素，編輯器）
在選擇器中用三種符號來表示擴展關系
-中劃線 ：僅作為連字元使用，表示某個塊或者某個子元素的多單詞之間的連接記號。
__ 雙下劃線：雙下劃線用來連接塊和塊的子元素
-- 雙中劃線：用來描述一個塊或者塊的子元素的一種狀態
type-block__element--modifier
Block:不是指html中的塊元素，任何獨立的頁面元素都可以視為一個塊，這個獨立的塊容器有一個唯一的css類名，也就是這個塊的名字
Element:屬於塊的某部分，任何的在Block中的DOM節點，都是一個element。在一個已知的block中，所有的element在語義上都是相等的，Block下的所有Element不考慮層級嵌套關系，扁平化處理都屬於Block，即連續的__下劃線只能出現一次
Modifier:用於修飾塊或元素，體現在外觀或行為上的改變，都可作為一個修飾器，如active狀態，add/edit的操作
注意事項：
1）保證各個部分只有一級B__E--M，修飾器需要和對應的塊或元素一起使用，避免單獨使用。不能有 .block__el1__el2 的格式
2）僅以類名作為選擇器，不使用ID或標簽名來約束選擇器
...import'./index.less'...<divclassName="article"><divclassName="article__body"><pclassName="article__title">title</p><buttonclassName="article__button--primary"></button><buttonclassName="article__button--success"></button></div></div>//index.less文件.article{max-width:1200px;&__body{padding:20px;}&__title{font-weight:700;}&__button{padding:5px8px;&--primary{background:blue;}&--success{background:green;}}}
㈣ 有沒有將 css 文件反編譯成 less 文件的腳本
在less文件中右鍵跳出的菜單中有一個叫編譯的，點一下，就會在less文件的目錄下生成一個css文件
㈤ less文件編譯css，css文件為什麼是空的呢
有些軟體有插件可以實時編譯，比如sublime。
我用的是gulp，方便前端自動化。你可以網上搜一下，用起來啊很方便。
舉個例子：
java">vargulp=require('gulp');
varless=require('gulp-less');
varnotify=require('gulp-notify');
varplumber=require('gulp-plumber');
varconcat=require('gulp-concat');
varminifycss=require('gulp-minify-css');
varrename=require('gulp-rename');
varwatch=require('gulp-watch');
varuglify=require('gulp-uglify');
varautoprefixer=require('gulp-autoprefixer');
varlessPath='./src/less/*.less';
varlessMainPath='./src/less/main.less';
varlessDist='./src/css/';
varcssPath='./src/css/*.css';
varjsSrcPath='./src/js/*.js';
vardistPath='./dist/';
//編譯less
gulp.task('lessCompile',function(){
gulp.src([lessMainPath])
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(less())
.pipe(gulp.dest(lessDist));
});
//監控less文件變化
gulp.task('watchLess',function(){
gulp.watch(lessPath,['lessCompile']);
});
//css合並壓縮加前綴
gulp.task('handleCss',function(){
returngulp.src(cssPath)
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(concat('app.css'))
.pipe(autoprefixer({
browsers:['last5versions','Android>=4.0'],
cascade:true,
remove:false
}))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(rename('app.min.css'))
.pipe(gulp.dest(distPath));
});
//監控css文件變化
gulp.task('watchCss',function(){
gulp.watch(cssPath,['handleCss']);
});
㈥ less混合
混合就是一種或者一系列屬性從一種規則集引入（混合）到另一種規則集的方法
1. 普通混合
一個普通的css樣式
我們發現 h1,h2的樣式中有很多重復的，而解決方式如下，將重復的放在一個類中：
定義一個.font_h類，在HTML文件對應的元素山添加class="font_h"屬性
less可以不這么寫，less寫法如下：
將定義好的類混入css樣式中，這樣就不用在HTML的元素中寫類了
編譯後的css，和下面不帶輸出的混合做對比
2. 不帶輸出的混合
編譯後的css文件，從中發現.font_h不見了
3. 帶選擇器的混合
編譯之後的css文件
其中， .my-hover-mixin():hover == &:hover
4. 帶參數的混合
編譯後的css文件
5. 帶參數並且有默認值
編譯後的css文件
調用後如果 .border_have(); 不帶參數，就用默認的參數；如果傳遞了參數，就用傳入的參數。而上邊帶參數但沒有默認值時，如果調用時不傳入參數就會報錯。
6. 帶多個參數的混合
編譯後的css文件
less文件（定義具有多個相同名稱和參數數量的混合）
編譯後的css文件
less文件
編譯後的css文件
如果使用mixin的時候只帶一個參數，比如.mixin(red)，這個屬性會導致所有的mixin都會強制使用這個明確的參數
7. 命名參數
編譯後的css文件
8. @arguments變數
編譯後的css文件
less文件
編譯後的css文件
這里的solid是默認值，但也必須寫上，否則會報錯。
9. 匹配模式
編譯後的css文件
注意：中間用逗號分割開
10. 得到混合中變數的返回值
編譯後的css文件
㈦ less文件編譯自動會轉出一個css嗎
是的，如果已經指定了編譯後文件的位置所在，如果沒有css文件，編譯後會自動生成一個css文件在該位置，不管是用less.js還是比如koala之類的編譯工具都是這樣的。
㈧ webstorm | 編譯 Less 保存自動生成 wxss/acss/css
因為感覺用 微信開發者工具 開發很不習慣，所以都是用 WebStorm 來開發，再用 微信開發者工具 預覽。本文主要記錄一下利用webstorm編譯less
配置方案
1、配置在當前目錄生成.wxss
2、less獨立文件夾，生成 .wxss 文件到指定的目錄中
1、配置在當前目錄生成.wxss
2、less獨立文件夾，生成 .wxss 文件到指定的目錄中
和微信步驟一樣，只是後綴不同
路徑 File | Settings | Tools | File Watchers | +
點加號，選擇less, 彈出下面的窗口，已經有默認配置了，點ok即可
㈨ css less 怎麼用呢怎麼讓html網頁支持less呢
在瀏覽器中使用less.js開發是很好的，但不推薦用於生產環境中。瀏覽器端使用是在使用LESS開發時最直觀的一種方式。如果是在生產環境中，尤其是對性能要求比較高的場合，建議使用node或者其它第三方工具先編譯成CSS再上線使用。
注意：
確保包涵.less樣式表在less.js腳本之前
當你引入多個.less樣式表時，它們都是獨立編譯的。所以，在每個文件中定義的變數、混合、命名空間都不會被其它的文件共享。
必須通過伺服器環境訪問頁面，否則報錯
瀏覽器選項：
你可以引入<script
src="less.js"></script>之前通過創建一個全局less對象的方式來指定參數！
㈩ less文件怎麼生成css webstorm
webstorm需要配置一下，可以自動編譯Less生成css。
進入設置界面
4.完成之後，直接創建less文件會自動生成css.