什么是預(yù)處理CSS
- CSS語(yǔ)言的超集港令，比CSS更豐滿
- 用專門的語(yǔ)言編寫CSS，但是這種語(yǔ)言支持變量秕磷、混合诵闭、函數(shù)、嵌套澎嚣、循環(huán)等特性疏尿，然后再編譯成正常的CSS文件
- 常見的CSS預(yù)處理器語(yǔ)言
- Sass（SCSS）、LESS易桃、Stylus褥琐、Turbine、Swithch CSS晤郑、CSS Cacheer敌呈、DT CSS等
LESS
使用
- 安裝
- npm install -g less
- sublime less高亮插件
- LESS
- lessc
- less compiler
- 開發(fā)階段編譯Less文件輸出CSS內(nèi)容
- lessc main.less 直接在命令輸出
- lessc main.less > main.css 輸出到指定文件
- less.js
- 網(wǎng)頁(yè)運(yùn)行階段解析Less文件
- 開發(fā)可用，生產(chǎn)環(huán)境由于存在性能問題造寝，建議使用編譯后的css文件
項(xiàng)目中引用
- 引入.less樣式表的鏈接
<link rel="stylesheet/less" type="text/css" href="main.less" />
- 引入less.js
<script src="less.js" type="text/javascript"></script>
- tips
- 在引入less.js之前加載所有的樣式表
- 使用運(yùn)行時(shí)編譯一定要使用http方式訪問
- 引入less文件rel="stylesheet/less",而引入css文件rel="stylesheet"
語(yǔ)法
注釋
// 模板注釋磕洪，這里的注釋轉(zhuǎn)換成CSS后將會(huì)刪除
/* CSS 注釋語(yǔ)法 轉(zhuǎn)換為CSS后任然保留 */
定義變量
1、將需要重復(fù)使用或經(jīng)常修改的值定義為變量诫龙，需要使用的地方引用
2析显、變量具有計(jì)算功能
3、定義一個(gè)變量名為變量
4赐稽、變量范圍采用就近原則
- less
// @變量名: 變量值;
@backgroundColor: #f5f5f5;
// 變量計(jì)算
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #666;
// 定義一個(gè)變量名為變量
@fontSize: 30px;
@bottomFontSize: "fontSize";
body {
// css屬性：@變量名叫榕；
background-color: @backgroundColor;
color: @light-blue;
font-size: @@bottomFontSize;
}
- css
body {
background-color: #f5f5f5;
color: #c1e9ff;
font-size: 30px;
}
- tips
- 在Less中變量只能被定義一次，類似常量姊舵，之后定義的會(huì)覆蓋前面定義的變量
嵌套Nested Rules
如果在CSS中經(jīng)常使用子代選擇器晰绎，那么使用Less的嵌套語(yǔ)法會(huì)更方便
- less
.container {
width: @containerWidth;
height: 100px;
> .row {
height: 100px;
width: 100px;
background-color: @mainColor;
a {
color: #f40;
&:hover {
color: #f90;
}
}
}
div {
.hello {
background-color: pink;
height: 30px;
}
}
}
- css
.container {
width: 1024px;
height: 100px;
}
.container > .row {
height: 100px;
width: 100px;
background-color: #999;
}
.container > .row a {
color: #f40;
}
.container > .row a:hover {
color: #f90;
}
.container div .hello {
background-color: pink;
height: 30px;
}
- tips
- 在Less中
&區(qū)別很大，有&時(shí)解析的是同一個(gè)元素或此元素的偽類括丁，沒有&解析的是后代元素
- 在Less中
Mixin
混入也叫”混入?yún)?shù)“荞下，混合其實(shí)就是一種嵌套，允許將一個(gè)類嵌入到另一個(gè)類中史飞，而被嵌入的類稱為一個(gè)變量（混合液像一個(gè)帶有參數(shù)的function）
- less
// 用一個(gè)類定義CSS尖昏，然后把整個(gè)類作為一個(gè)變量來使用，嵌入到另一個(gè)類中當(dāng)屬性
// 不定義任何參數(shù) .roundedCorners() {}
.roundedCorners(@radius: 20px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
background-color: green;
}
@circleR: 80px;
.circle {
width: @circleR;
height: @circleR;
.roundedCorners(@circleR);
}
.circle1 {
width: @circleR;
height: @circleR;
// 無參數(shù)方式可直接寫.roundedCorners;
.roundedCorners();
}
- css
.circle {
width: 80px;
height: 80px;
border-radius: 80px;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
background-color: green;
}
.circle1 {
width: 80px;
height: 80px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
background-color: green;
}
- tips
- 任何CSS的類或ID下的樣式都可以當(dāng)做變量构资，使用混合模式用來當(dāng)做另一個(gè)元素的屬性值
@arguments 當(dāng)Mixins引入這個(gè)參數(shù)時(shí)抽诉，將表示所有的變量，當(dāng)不想處理個(gè)別參數(shù)時(shí)吐绵，這個(gè)參數(shù)將很有用
- less
// @arguments
.boxShadow(@x: 0, @y:0, @blur: 1px, @color: #000) {
-mox-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
.bottom {
.boxShadow(2px, 2px, 3px, red);
}
- css
.bottom {
-mox-box-shadow: 2px 2px 3px red;
-webkit-box-shadow: 2px 2px 3px red;
box-shadow: 2px 2px 3px red;
}
import
通過@import將多個(gè)less文件合并
- less
// main_p.less
.center {
// @h在main_v.less定義
height: @h;
background-color: yellow;
}
@import url('main_v.less');
// main_v.less
@h: 100px;
- css
.center {
height: 100px;
background-color: yellow;
}
Functions & Operations
Operations 可以讓我們對(duì)元素的屬性值迹淌、顏色進(jìn)行加減乘除運(yùn)算河绽，主要針對(duì)任何數(shù)字、顏色唉窃、變量的操作
Functions 就像JavaScript中的function一樣可以進(jìn)行我們想要的值操作耙饰，主要針對(duì)Color functions，Less提供了多種變化顏色的功能
- less
@header-border: 4px;
@base-color: #111;
@red: #842210;
#header {
height: 100px;
color: @base-color * 3;
border: 5px solid desaturate(@red, 100%);
border-width: @header-border @header-border * 2 @header-border * 3 @header-border;
border-color: desaturate(@red, 100%) @red lighten(@red, 10%) darken(@red, 30%);
}
- css
#header {
height: 100px;
color: #333333;
border: 5px solid #4a4a4a;
border-width: 4px 8px 12px 4px;
border-color: #4a4a4a #842210 #b12e16 #000000;
}
Operation使用
- less
#nav {
color: #888 / 4;
background-color: green;
// 簡(jiǎn)單四則運(yùn)算 同單位操作
@base: 5%;
@filter: @base * 2;
@other: @base + @filter;
height: 100% / 2 + @other;
// 不同單位操作
@borderW: 1px + 6;
border: @borderW solid yellow;
// 使用() 改變運(yùn)算的先后順序
@width: 20px;
width: (@width + 5) * 3;
}
- css
#nav {
color: #222222;
background-color: green;
height: 65%;
border: 7px solid yellow;
width: 75px;
}
Color Functions
提供多種變換顏色的函數(shù)纹份，先把顏色轉(zhuǎn)換成HSL色苟跪，然后在此基礎(chǔ)上進(jìn)行操作
- lighten：將一個(gè)顏色變亮
- lighten(#000, 10%) = #1a1a1a
- darken：將一個(gè)顏色變暗
- darken(#000, 10%) // #e6e6e6
命名空間Namespaces
將公共的內(nèi)容封裝起來，在其他地方調(diào)用蔓涧，類似如下樣式
#common > .button
- less
#common {
.button {
display: block;
border: 1px solid black;
width: 100px;
height: 30px;
background-color: grey;
&:hover {
background-color: white;
}
}
}
#header {
.button {
#common > .button;
}
}
#nav {
a {
#common > .button;
}
}
- css
#common .button {
display: block;
border: 1px solid black;
width: 100px;
height: 30px;
background-color: grey;
}
#common .button:hover {
background-color: white;
}
#header .button {
display: block;
border: 1px solid black;
width: 100px;
height: 30px;
background-color: grey;
}
#header .button:hover {
background-color: white;
}
#nav a {
display: block;
border: 1px solid black;
width: 100px;
height: 30px;
background-color: grey;
}
#nav a:hover {
background-color: white;
}
Loops
在Less中件已，混合可以調(diào)用它自身。所以蠢笋，Less中的混合遞歸調(diào)用自己拨齐，就形成了循環(huán)結(jié)構(gòu)
- less
@counter: 5;
.loop(@counter) when(@counter > 0) {
.loop((@counter - 1)); // 遞歸調(diào)用自身
width: (20px * @counter); // 每次調(diào)用時(shí)產(chǎn)生的樣式代碼
}
div.loop {
background-color: green;
height: 50px;
.loop(5);
}
- css
div.loop {
background-color: green;
height: 50px;
width: 20px;
width: 40px;
width: 60px;
width: 80px;
width: 100px;
}
使用遞歸循環(huán)最常見的情況就是生成柵格系統(tǒng)的CSS
- less
div.row {
height: 100px;
}
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
.column-@{i} {
width: (@i * 100% / @n);
height: 100%;
float: left;
background-color: #369 + @i * 15;
}
.generate-columns(@n, (@i + 1));
}
- css
div.row {
height: 100px;
}
.column-1 {
width: 25%;
height: 100%;
float: left;
background-color: #4275a8;
}
.column-2 {
width: 50%;
height: 100%;
float: left;
background-color: #5184b7;
}
.column-3 {
width: 75%;
height: 100%;
float: left;
background-color: #6093c6;
}
.column-4 {
width: 100%;
height: 100%;
float: left;
background-color: #6fa2d5;
}
