<commit_before>---
layout:     post
title:      Less学习笔记
subtitle:   CSS预处理
date:       2017-07-19
author:     Ywg
header-img: img/home-bg-o.jpg
catalog:    true
tags: CSS
---

## 前言
Less是CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。后缀名.less

## Less语法

#### 注释
在less文件中使用`/**/`注释的内容在导出的css文件里面会显示出来，而使用`//`注释的内容在导出的css文件里面不会显示出来。
``` 
/*我是会被编译的*/
//我是不会被编译的
``` 

#### 变量
@变量名: 值;
``` 
@box_width: 300px;
.box {
	width: @box_width;
	height: @box_width;
	background-color: red;
}
``` 

#### 混合
``` 
.box {
	width: 300px;
	height: 300px;
	background-color: red;
	//.box_border; //没带参数可不加括号
	//.box_border2(2px); //没默认带值一定要加上值
	.box_border3(); //默认带值可不加
}

/* 混合 */
.box_border() {
	border: 2px solid #00f;
}

/* 混合- 可带参数 */
.box_border2(@border_width) {
	border: @border_width solid #00f;
}

/* 混合- 默认带值 */
.box_border3(@border_width:2px) {
	border: @border_width solid #00f;
}
``` 
混合例子：
``` 
.box {
	width: 300px;
	height: 300px;
	background-color: red;
	.border_radius();
}
.border_radius(@radius: 6px) {
   -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
	   border-radius: @radius;
}
``` 

#### 匹配模式 类似重载函数
@_表示调用的时候都带上 <br>
三角形的例子：
``` 
.triangle {
    .triangle(down, 20px, #00f);
}

.triangle(@_, @w: 6px, @c: #f00) {
    width: 0;
    height: 0;
    overflow: hidden;
}

.triangle(down, @w: 6px, @c: #f00) {
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

.triangle(up, @w: 6px, @c: #f00) {
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}

.triangle(left, @w: 6px, @c: #f00) {
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: dashed solid dashed dashed;
}
```

#### 运算
属性值可以进行加减乘除运算，包括颜色值
```
@box_width: 300px;
.box {
    width: (@box_width - 100)*2;
    height: 200px;
    background: (#f00 + 100)/2;
}
```

#### 嵌套规则
&代表上一层的选择器
```
.list {
    width: 300px;
    list-style: none;
    li {
        height: 30px;
        line-height: 30px;
        text-align: center;

        &:nth-child(even) {
            background: #eee;
        }

        &:hover {
        	background: #ccc;
        }
    }
}
```

#### arugments变量
<commit_msg>Update 2017-07-19-Less学习笔记.md<commit_after>---
layout:     post
title:      Less学习笔记
subtitle:   CSS预处理
date:       2017-07-19
author:     Ywg
header-img: img/home-bg-o.jpg
catalog:    true
tags: CSS
---

## 前言
Less是CSS预处理语言的一种，它使用类似CSS的语法，为CSS赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。后缀名.less

## Less语法

#### 注释
在less文件中使用`/**/`注释的内容在导出的css文件里面会显示出来，而使用`//`注释的内容在导出的css文件里面不会显示出来。
``` 
/*我是会被编译的*/
//我是不会被编译的
``` 

#### 变量
@变量名: 值;
``` 
@box_width: 300px;
.box {
	width: @box_width;
	height: @box_width;
	background-color: red;
}
``` 

#### 混合
``` 
.box {
	width: 300px;
	height: 300px;
	background-color: red;
	//.box_border; //没带参数可不加括号
	//.box_border2(2px); //没默认带值一定要加上值
	.box_border3(); //默认带值可不加
}

/* 混合 */
.box_border() {
	border: 2px solid #00f;
}

/* 混合- 可带参数 */
.box_border2(@border_width) {
	border: @border_width solid #00f;
}

/* 混合- 默认带值 */
.box_border3(@border_width:2px) {
	border: @border_width solid #00f;
}
``` 
混合例子：
``` 
.box {
	width: 300px;
	height: 300px;
	background-color: red;
	.border_radius();
}
.border_radius(@radius: 6px) {
   -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
	   border-radius: @radius;
}
``` 

#### 匹配模式 类似重载函数
@_表示调用的时候都带上 <br>
三角形的例子：
``` 
.triangle {
    .triangle(down, 20px, #00f);
}

.triangle(@_, @w: 6px, @c: #f00) {
    width: 0;
    height: 0;
    overflow: hidden;
}

.triangle(down, @w: 6px, @c: #f00) {
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}

.triangle(up, @w: 6px, @c: #f00) {
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}

.triangle(left, @w: 6px, @c: #f00) {
    border-width: @w;
    border-color: transparent @c transparent transparent;
    border-style: dashed solid dashed dashed;
}
```

#### 运算
属性值可以进行加减乘除运算，包括颜色值
```
@box_width: 300px;
.box {
    width: (@box_width - 100)*2;
    height: 200px;
    background: (#f00 + 100)/2;
}
```

#### 嵌套规则
&代表上一层的选择器
```
.list {
    width: 300px;
    list-style: none;
    li {
        height: 30px;
        line-height: 30px;
        text-align: center;

        &:nth-child(even) {
            background: #eee;
        }

        &:hover {
        	background: #ccc;
        }
    }
}
```

#### arugments变量
@arugments代表了所有传递进来的参数
如果你不想单独处理没有一个参数就可以这样写

{'fraction_non_alphanumeric': 0.17960851796085178, 'fraction_numerical': 0.03527640352764035, 'mean_word_length': 2.987993138936535, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1542339', 'n_tokens_mistral': 2392, 'n_tokens_neox': 2346, 'n_words': 387}