一杂腰,less (是一門基于node.js的預(yù)處理css語言)
less文件中支持:數(shù)學(xué)運(yùn)算垃你,嵌套(嵌套結(jié)構(gòu)的標(biāo)簽),變量聲明喂很,直接定義樣式并調(diào)用惜颇,給公共樣式設(shè)置參數(shù)
二,less基本操作
1少辣,新建 XXX .less 文件
2凌摄,在 less文件中可以直接放心寫css代碼
3,less文件中支持css中不支持的語法 例:
div{
? ? width: 100%;
? ? a{
? ? ? ? color: red;
? ? }
}? ?只有嵌套結(jié)構(gòu)的標(biāo)簽漓帅,才可以使用less的這種嵌套寫法
4锨亏,html只能引用.less生成的.css文件 代碼的修改直接在.less文件中修改痴怨,.less中的注釋不會保存到生成的.css文件中
5,less中支持變量聲明器予, @自定義變量名:值浪藻; 例:
@mycolor:red;
a{
? ? color: @mycolor;
}
6,可以任意進(jìn)行加減乘除運(yùn)算 例:
div{
? ? width: 200px*10;
}
7乾翔,可以直接定義樣式并調(diào)用 例:
.txst(){
? ? width: 100px;
? ? height: 100px;
}
div{
? ? .txst();
}
8爱葵,樣式調(diào)用的更高級寫法 例:
.txst(@mycolor,@mywidth,@height){
? ? ? ? color:@mycolor;
? ? ? ? width:@mywidth;
? ? ? ? height:@myheight反浓;
? ? }
? ? div{
? ? ? ? .txst(red,200px,200px)
? ? }? ?調(diào)用時(shí) 變量要按照順序給值