公司要求會less 看完上項目（一個後期維護很強的框架）

近期總結了一下less入門的代碼案例 註釋不多 需要點基礎的能看懂 也在考驗你的理解能力，希望你仔細理解一下，能體會到less 的方便，並勤加練習，真正體會less的精髓。less的函數部分我只寫了常用的。如果感興趣可以再去less中文網去深研究。一下這些 我認為是在項目中常用到的，大家可能會有理解不到位的地方，請大家提出來，我會一一為大家解釋。

Less

Less 是css預處理語言 增加了變量 混合 函數等特性 是css更易維護和擴展

Less可以運行在node或瀏覽器端

<script src="less.js" type="text/javascript"></script> 放置在head中

Less。Js cdn

<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

在頁面中加入.less 樣式表的鏈接，將rel屬性設置為 stylesheet/less

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="less.js" type="text/javascript"></script> 放置在head中

注意： 確保在less。Js 加載之前 加載你的less 樣式表

變量

同一個值，可以用在多個地方 但是 變量只能定義一次，其本質就是 常量

變量可以 運算 加減乘除

變量的作用就是 把值定義在一個地方，然後再各處使用，這樣能讓代碼更易維護。

語法

@variableName: value;

如：

@textColor: white;

@bgColor: #333;

@border: 2px solid red;

@content: “this is the sample content from less”

P{

color: @textColor;

background-color: @bgColor;

border: @border;

&:after{

content：@content；

}

}

@base: 5%;

@filler: @base * 2;

@other: @base + @filler;

color: #888 / 4;

background-color: @base-color + #111;

height: 100% / 2 + @filler;

@var: 1px + 5;

混合

.mystyle{

color: #333;

border: 1px solid #444;

}

.myDiv{

.mystyle

}

嵌套

.style {

color:#333;

&:styleAdd {

border: 1px solid #333;

}

P{

background-color: #111;

}

}

註釋

/* 一個註釋塊

style comment! */

// 這一行被註釋掉了！

導入：

@import "library"; // library.less 。less 擴展名可以省略

@import "typo.css";

屬性

如

@property：color；

.weight{

@{property}: #0ee;

background-@{property}: #999;

}

選擇器

如

@mySelector：banner；

.@{myselecter} {

font-weight: bold;

line-height: 40px;

}

路徑

@images：”../img”;

body{

background:url(“@{images}/backgroundImg.png”);

}

引入

@themes：”../../src/themes”;

@import “@{themes}/styles.less”

定義變量名

//定義變量內容

@fnord： “I am fnord.”;

//定義變量名

@var: “fnord”;

content: @@var;

結果為

content: "I am fnord.";

變量懶加載 並在使用之前不需要生命

.lazy-eval-scope {

width: @var;

@a: 9%;

}

@var: @a;

@a: 100%;

結果

.lazy-eval-scope {

width: 9%;

}

擴展類

nav ul {

&:extend（.inline）;

background: blue;

}

.inline {

color:red;

}

結果

nav ul {

background: blue;

}

.inline,

nav ul {

color: red;

}

擴展語法

.a:extend(.b){}

和下面的這段代碼一樣

.a{

&:extend(.b);

}

nth 語法

:nth-child(1n+3) {

color: blue;

}

[title=identifier] {

color: blue;

}

[title='identifier'] {

color: blue;

}

[title="identifier"] {

color: blue;

}

@variable: .bucket;

@{variable} { // interpolated selector

color: blue;

}

媒體查詢

@media screen {

.selector { /* ruleset inside nested media - top level extend works */

color: blue;

}

@media (min-width: 1023px) {

.selector { /* ruleset inside nested media - top level extend works */

color: blue;

}

}

}

結果

@media screen {

.selector,

.topLevel { /* ruleset inside media was extended */

color: blue;

}

}

@media screen and (min-width: 1023px) {

.selector,

.topLevel { /* ruleset inside nested media was extended */

color: blue;

}

}

!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;

}

帶參數的mixin

.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;

}

結果:

5px

混合

重新指定參數

.mixin(@color: black; @margin: 10px; @padding: 20px) {

color: @color;

margin: @margin;

padding: @padding;

}

.class1 {

.mixin(@margin: 20px; @color: #33acfe);

}

.class2 {

.mixin(#efca44; @padding: 40px);

}

@arguments 可以代表所有的參數

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {

-webkit-box-shadow: @arguments;

-moz-box-shadow: @arguments;

box-shadow: @arguments;

}

.big-block {

.box-shadow(2px; 5px);

}

參數的變量

.mixin(dark; @color) {

color: darken(@color, 10%);

}

.mixin(light; @color) {

color: lighten(@color, 10%);

}

.mixin(@_; @color) {

display: block;

}

@switch: light;

.class {

.mixin(@switch; #888);

}

結果

.class {

color: #a2a2a2;

display: block;

}

利用返回的值 做一個運算的方法

.average(@x, @y) {

@average: ((@x + @y) / 2);

}

div {

.average(16px, 50px); // "call" the mixin

padding: @average; // use its "return" value

}

判斷

.mixin (@a) when (@a > 10), (@a < -10) { ... }

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }

.mixin (@a) when (@media = desktop) { ... }

.max (@a; @b) when (@a > @b) { width: @a }

.max (@a; @b) when (@a < @b) { width: @b }

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }

.mixin (@a; @b: black) when (iscolor(@b)) { ... }

iscolor

isnumber

isstring

iskeyword

isurl

ispixel

ispercentage

isem

isunit

如果@a>0 執行{} 如果@a<=0 則會執行第二條語句 default 其實就是第二種情況

.mixin (@a) when (@a > 0) { ... }

.mixin (@a) when (default()) { ... } // matches only if first mixin does not, i.e. when @a <= 0

.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

.mixin (@b) when not (@b > 0) { ... }

& when (@my-option = true) {

button {

color: white;

}

a {

color: blue;

}

}

循環

混合可以被自己調用

.loop(@counter) when (@counter > 0) {

.loop((@counter - 1)); // next iteration

width: (10px * @counter); // code for each iteration

}

div {

.loop(5); // launch the loop

}

div {

width: 10px;

width: 20px;

width: 30px;

width: 40px;

width: 50px;

}

一個用於生成css柵格類的遞歸循環的實例;

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {

.column-@{i} {

width: (@i * 100% / @n);

}

.generate-columns(@n, (@i + 1));

}

結果

.column-1 {

width: 25%;

}

.column-2 {

width: 50%;

}

.column-3 {

width: 75%;

}

.column-4 {

width: 100%;

}

合併屬性

.mixin() {

box-shadow+: inset 0 0 10px #555;

}

.myclass {

.mixin();

box-shadow+: 0 0 20px black;

}

.myclass {

box-shadow: inset 0 0 10px #555, 0 0 20px black;

}

父選擇符

a {

color: blue;

&:hover {

color: green;

}

}

.button {

&-ok {

background-image: url("ok.png");

}

&-cancel {

background-image: url("cancel.png");

}

&-custom {

background-image: url("custom.png");

}

}

結果

a {

color: blue;

}

a:hover {

color: green;

}

.button-ok {

background-image: url("ok.png");

}

.button-cancel {

background-image: url("cancel.png");

}

.button-custom {

background-image: url("custom.png");

}

&使用

.link {

& + & {

color: red;

}

& & {

color: green;

}

&& {

color: blue;

}

&, &ish {

color: cyan;

}

}

結果

.link + .link {

color: red;

}

.link .link {

color: green;

}

.link.link {

color: blue;

}

.link, .linkish {

color: cyan;

}

注意,& 代表所有父選擇器(不僅僅是最近的祖先)所以下面的例子:

.grand {

.parent {

& > & {

color: red;

}

& & {

color: green;

}

&& {

color: blue;

}

&, &ish {

color: cyan;

}

}

}

結果：

.grand .parent > .grand .parent {

color: red;

}

.grand .parent .grand .parent {

color: green;

}

.grand .parent.grand .parent {

color: blue;

}

.grand .parent,

.grand .parentish {

color: cyan;

}

data-uri

案例

data-uri('image/jpeg;base64', '../data/image.jpg');

輸出

url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');

less 中的變量 具有計算功能

如

@nice-blue:#5b83ad;

@light-blue:@nice-blue + #111;

注意 less 的變量實際上應該為 常量,不存在二次賦值的情況

saturate(顏色值,百分比) 函數

在原色飽和度基礎上增加飽和度

desaturate(顏色值,百分比); 函數

在原色飽和度基礎上減少飽和度

lighten(顏色值,百分比);

明度 變亮

darken(顏色值,百分比)

暗度 是變暗

.box-shadow (@x: 0, @y: 0, @blur: 1px, @alpha) {

@val: @x @y @blur rgba(0, 0, 0, @alpha);

box-shadow: @val;

-webkit-box-shadow: @val;

-moz-box-shadow: @val;

}

在less 中的變量 實際上就是一個常量 因為他們只能被定義一次

@color: #253636;

@highlight: "color";

@color: #ff3636;

#header {color: @@highlight;}

可以用兩個@ 進行組合

變量的值可以是字符串

你可以用一個類 定義css

然後把整個當做 一個變量來使用 嵌入到另一個類中當做他的屬性

另外混入 也像一個帶有參數地functions

.roundedCorners(@radius:5px) {

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

border-radius: @radius;

}

＃header {

.roundedCorners;

}

#footer {

.roundedCorners(10px);

}

這裡的& 很重要, 在less 中嵌套書寫中有沒有&區別是完全不一樣的效果,有&時解析的是用一個元素的偽類,沒有&解析是後代元素.

#header {

&.fl{

float: left;

}

.mln {

margin-left: 0;

}

}

解析後

#header.fl{float: left;}

#header .mln {margin-left: 0;}