中文网 http://lesscss.cn/
https://less.bootcss.com/
http://lesscss.org/
1.为什么需要less?
1.1CSS的语法虽然简单, 但它同时也带来一些问题
1.2CSS需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用, 造成这些原因的本质源于CSS是一门非程序式的语言, 没有变量/函数/作用域等概念
2.什么是less?
2.1Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。
2.2它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展
2.3一句话：用类似JS的语法去写CSS
3.less特点
作为CSS的一种扩展，LESS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS语法。这样的设置使得学习LESS非常轻松，而且你可以在任何时候回退到CSS。
4.less基本使用:
4.1在客户端直接运行
编写less文件-->引入less文件-->引入less.js-->运行
注意点:
一定要先引入less.css再引入less.js
一定要在服务端运行才能生效, 本地运行无效
引入less.js就是让网页在运行的时候动态的区解析less的css,动态的设置给元素
1 使用方式
1 cdn
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
注意：link 标签一定要在 Less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less
<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>
2 使用npm安装
npm install -g less
编译
lessc styles.less > styles.css
2 功能介绍
1 变量
1.1 值变量：变量是常量 ，所以只能定义一次，不能重复使用
以 @ 开头 定义变量，并且使用时 直接 键入 @名称
/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引号
@width: 50%;
#wrap {
color: @color;
width: @width;
}
/* 生成后的 CSS */
#wrap {
color: #999;
width: 50%;
}
1.2 选择器变量：让选择器变成动态
/* Less */
@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
color: #999;
width: 50%;
}
.@{Wrap}{
color:#ccc;
}
#@{Wrap}{
color:#666;
}
/* 生成的 CSS */
#wrap{
color: #999;
width: 50%;
}
.wrap{
color:#ccc;
}
#wrap{
color:#666;
}
1.3 属性变量：减少代码书写
/* Less */
@borderStyle: border-style;
@Soild:solid;
#wrap{
@{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
#wrap{
border-style:solid;
}
1.4 url 变量：项目结构改变时，修改其变量即可
/* Less */
@images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}
/* 生成的 CSS */
body {
background: url("../img/dog.png");
}
1.5 声明变量：类似混合方法
- 结构: @name: { 属性: 值 ;};
- 使用：@name();
/* Less */
@background: {background:red;};
#main{
@background();
}
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#con{
@Rules();
}
/* 生成的 CSS */
#main{
background:red;
}
#con{
width: 200px;
height: 200px;
border: solid 1px red;
}
1.6 变量运算
- 加减法时 以第一个数据的单位为基准
- 乘除法时 注意单位一定要统一
/* Less */
@width:300px;
@color:#222;
#wrap{
width:@width-20;
height:@width-20*5;
margin:(@width-20)*5;
color:@color*2;
background-color:@color + #111;
}
/* 生成的 CSS */
#wrap{
width:280px;
height:200px;
margin:1400px;
color:#444;
background-color:#333;
}
1.7 变量的作用域，就近原则
/* Less */
@var: @a;
@a: 100%;
#wrap {
width: @var;
@a: 9%;
}
/* 生成的 CSS */
#wrap {
width: 9%;
}
1.8 用变量去定义变量
/* Less */
@fnord: "I am fnord.";
@var: "fnord";
#wrap::after{
content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
content: "I am fnord.";
}
未完待续。。。
- 必须在服务器下运行,意思是直接打开你的html文件，用文件名路径的话会报错的，可以利用webstrom IDE或者sublime server插件
2 类的使用
.hengguoguo{
width:20px;
height:20px;
background:red;
}
div{
.hengguoguo;
}
2.1 传参
//.hengguoguo(@w:50px){ //默认参数
.hengguoguo(@w){
width:@w;
height:20px;
background:red;
}
div{
// .hengguoguo();
.hengguoguo(300px);
}
3 嵌套
.box1{
//&代表自己
&:hover{}
&>.box2{}
.box2{
with:100px;
}
}
