LESS的基礎運用 – 原意筆記本

LESS是目前在開發網站時所用的比較上手的css編寫動態樣式語言，目前也只能粗略大約針對css的架構利用嵌套來簡化原本編寫css的內容，主要是因為如果全使用css寫的話內容會很多也比較花時間，若在大型架構下的網站要開發與管理的話可真的就頭疼了。此外，如果要更深化與了解的話就需要打好基礎，了解後才能加與運用。

import LESS – 引用式匯入(referntial import)
可以 import 別隻 less 的檔案，最後一起輸出成 CSS，在下面的例子就是把 tt.less 這隻檔案引入使用。
@import ' 外連檔名.less ';

@import "tt.less";

1	@import "tt.less";

摻入/混合

.t-color { color:#693905;}
.hand {
	h1 { 
		font-size: 40px; 
		.t-color; 
	}
}

.t-color { color:#693905;}

.hand {

h1 {

font-size: 40px;

.t-color;

}

＆繼承
&:extend (指定class);，

.a{
		&:hover{
				color:red;
		}
}
.p, .a, .ul, .li {
	border-top: 2px dotted #366;
	&& {
		border-top: 0;
	}
	& + & {
		border-top: 0;
	}
}

.a{

&:hover{

color:red;

}

.p, .a, .ul, .li {

border-top: 2px dotted #366;

&& {

border-top: 0;

}

& + & {

border-top: 0;

}

.a:hover {
    color: red;
}

.p, .a, .ul, .li {
    border-top: 2px dotted #366;
}
/*&& output*/
.p.p, .p.a, .p.ul, .p.li, .a.p, .a.a, .a.ul, .a.li, .ul.p, .ul.a, .ul.ul, .ul.li, .li.p, .li.a, .li.ul, .li.li {
    border-top: 0;
}
/*&+& output*/
.p + .p, .p + .a, .p + .ul, .p + .li, .a + .p, .a + .a, .a + .ul, .a + .li, .ul + .p, .ul + .a, .ul + .ul, .ul + .li, .li + .p, .li + .a, .li + .ul, .li + .li {
    border-top: 0;
}

.a:hover {

color: red;

}

.p, .a, .ul, .li {

border-top: 2px dotted #366;

}

/*&& output*/

.p.p, .p.a, .p.ul, .p.li, .a.p, .a.a, .a.ul, .a.li, .ul.p, .ul.a, .ul.ul, .ul.li, .li.p, .li.a, .li.ul, .li.li {

border-top: 0;

}

/*&+& output*/

.p + .p, .p + .a, .p + .ul, .p + .li, .a + .p, .a + .a, .a + .ul, .a + .li, .ul + .p, .ul + .a, .ul + .ul, .ul + .li, .li + .p, .li + .a, .li + .ul, .li + .li {

border-top: 0;

}

除了可繼承class，也可以接偽類 (Pseudo-classes) 與偽元素 (Pseudo-elements)，但偽類 (Pseudo-classes) :需要接在 & 之後不能有空白，例如： a:hover。

.a{
		&:hover{
				color:red;
		}
}

.div {
	font-size: 30px;
	
	& a {
		color: #eee;
	}	
}

.a{

&:hover{

color:red;

}

.div {

font-size: 30px;

& a {

color: #eee;

}

.a:hover {
  color: red;
}
.div {
  font-size: 30px;
}
.div a {
  color: #eee;
}

.a:hover {

color: red;

}

.div {

font-size: 30px;

}

.div a {

color: #eee;

}

參數型的摻入件

.foo (@bg: #f5f5f5, @color: #900) {
	background: @bg;
	color: @color;
}
.unimportant {
	.foo(1);
}
.important {
	.foo(2) !important;
}

.foo (@bg: #f5f5f5, @color: #900) {

background: @bg;

color: @color;

}

.unimportant {

.foo(1);

}

.important {

.foo(2) !important;

}

.unimportant {
	background: #f5f5f5;
	color: #900;
}
.important {
	background: #f5f5f5 !important;
	color: #900 !important;
}

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.unimportant {

background: #f5f5f5;

color: #900;

}

.important {

background: #f5f5f5 !important;

color: #900 !important;

}

.border-radius(@radius) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

}

#header {
	.border-radius(4px);
}
.button {
	.border-radius(6px);
}

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
	.border-radius;
}

#header {

.border-radius(4px);

}

.button {

.border-radius(6px);

}

.border-radius(@radius: 5px) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

}

#header {

.border-radius;

}

#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

#header {

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

.button {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

}

#header {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}

資料源：用 LESS 寫 CSS ( 入門、Import、變數 )

標籤雲