LESS 預處理器

維護 CSS 的弊端

css本質上不是一門語言,是一個簡單的樣式表,代碼維護相對老套,不夠靈活.

Less介紹

less預處理器 : 依然使用css語法, 引入了變量, 混合, 運算, 嵌套等功能, 
              大大簡化了css 的編寫,而且  下降了 css 的維護成本


常見的css預處理器 : Less | SASS | stylus 等
複製代碼

變量

☞@自定義變量名: 值;
    例如:
    @nav_bgcolor: red;
    nav {
        color: @nav_bgcolor;
    }

☞變量的運算:
	@width: 10;
    nav {
		width: @width * 3px;
    }
複製代碼

混合

☞ 定義一個公共的樣式(能夠式類選擇的語法,能夠是ID選擇器的語法)

例如:
	.test() {
        width: 50px;
        height: 50px;
    }

    nav {
        調用樣式
        .test();
    }

    header {
        .test();
    }


☞ 能夠設置參數
例如:
.test(@width) {
    width: @width;
}

nav {
    .test(100px);
}


☞ 能夠爲參數設置默認值
例如:
.test(@width: 100px) {
    width: @width;
}
nav {
    .test();
}
header {
    .test(50px);
}
複製代碼

嵌套

例如:
nav {
    ul {
        li {

        }
    }
}
複製代碼

在瀏覽器中預覽LESS文件(瞭解)

1. HTML頁面直接溝通link標籤引用 less文件
 <link rel="stylesheet/less" type="text/css" href="less文件.less">

2. HTML頁面中引用用來解析less文件的一個js文件
 <script type="text/javascript" src="less.js"></script>

備註:
1. 以上執行過程須要在服務器環境下進行
2. webstorm開發工具下,能夠執行運行,由於webstorm自帶一個服務器環境
複製代碼