less整理

1.什么是less?

less是一门CSS预处理语言（不能直接渲染页面，要编译成CSS文件才可以），它是对CSS的扩充，增加了变量、函数、嵌套的功能，让网页开发中的CSS更容易维护，提高开发效率。

2.如何安装less？

1. 在命令行：npm install -g less
2. 验证less有没有安装成功？lessc -v
3. 创建一个less文件，书写less代码 
4. .编译less文件

    方式1： 命令行  lessc  *.less  *.css

                lessc  *.less  *.css  -x  (压缩)

    方式2： 使用koala外部编译文件

              注意事项：可以选择压缩；

              可以监听less文件的变化，自动编译；

              可以生成资源地图文件

 方式3：针对于webstorm配置自动编译而来

             File->setting->File watcher->右上角加号（新建）

Less的语法

注释

注释：

//单行注释

/**/多行注释

 

单行注释编译之后不保留，多行注释编译之后会保留

 

变量

1. 为什么使用变量？

          将重复使用的CSS属性定义为变量，可以重复使用，方便后期CSS的维护。

    2. 定义变量的语法

        @ 变量名称：变量值（css的值）

            注意：变量值必须符合CSS的规范

   3. 变量的使用

   在选择器中属性的名称：@变量

生成的CSS代码

 注意事项：

    变量与字符串拼接时，需要使用{}将变量名称包裹起来，并且@符号放在{}外面

混合

Mixins有点像函数，在定义之后，可以通过名称调用。（也支持动态传参）。

混合可以将一个定义好的classA轻松的调用到另一个classB中，从而简单实现classB继承classA中的所有属性。我们还可以带参数的调用，就像调用函数一样。

1.什么是Mixins混合？

  简单来说就是函数，可以封装CSS，在别的选择器中调用，提高代码的重用性和可用性。

2.定义混合的语法：

定义混合：

.混合名（）{

   //封装的CSS代码

}

.混合名（@参数名称：默认值）{

   //封装的CSS代码

}

调用混合

h1{

   .混合名称（）；

}

h2{

   .混合名称（参数的值）；

}

3.示例

生成的CSS代码

模式匹配

1. 模式匹配的含义

相当于定义相同的混合名称，根据分支的值决定执行哪个分支，但是有一个公共的分支（任何分支都会调用）。

@_表示匹配所有，通常用于定义公共部分。

2. 模式匹配的使用形式

生成的CSS代码

颜色函数

1. 色彩三要素：色相（颜色的名称）、饱和度（鲜艳程度）、明度（明暗程度）
2. 颜色函数

亮度

lighten(@color，10%)     //比@color亮10%的颜色

darken(@color，10%)     //比@color暗10%的颜色

饱和度

saturate（@color, 10%）   //比@color浓10%的颜色

desaturate (@color ，10%)   //比@color淡10%的颜色

色相

spin(@color ,10)    //色相值增加10

spin(@color ,-10)    //色相值增加10

mix(@color1, @color2)    //混合两种颜色

3. 示例

生成的CSS代码：

嵌套

1. 什么是嵌套？

   具有层级关系的CSS样式，CSS的层级最终是由HTML的结构决定的。

2. 嵌套用在哪里？

用在具有后代关系和父子关系的选择器中，这样很大程度上减少了代码量，并且代码结构看起来更加清楚。

3. 如何使用嵌套？

爷爷容器{

  //爷爷的样式

  大伯容器{

//大伯自己的样式

&>*{

  大伯所有儿子的样式

}

大伯儿子容器{

}

}

  爸爸容器{

  //爸爸自己的样式

儿子容器{

}

}

二叔容器{

  //二叔自己的样式

   二叔儿子{

}

}

}

使用&符号表示父元素：父子、兄弟、邻居、伪类

  4.示例

@width_header: 1000px;
@height_header: 100px;
@bgColor: green;
@bgImage: '../img';

*{
    margin: 0;
    padding: 0;
}
header{
   margin: 0 auto;
   width:@width_header;
   height: @height_header; 
   background-color: @bgColor;
   display: flex;
   
   #logo{
       width: 180px;
       height: @height_header;
       background: url('@{bgImage}/bg.jpg') no-repeat;
   }
       
   ul{
       list-style-type: none;
       width: @width_header - 180px;
       display: flex;
       justify-content: space-around;
      
       
       li{
           width: (@width_header - 180px)/10;
           height: @height_header;
           background-color: pink;
           line-height: @height_header;
           text-align: center;
           
           a{
               text-decoration: none;
               font-size: 50px;
               &:link{
                   color: red;
               }
               &:visited{
                   color: yellow;
               }
               &:hover{
                   color: blue;
               }
               &:active{
                   color: purple;
               }
           }
       }
   }
}

生成的CSS代码

* {
  margin: 0;
  padding: 0;
}
header {
  margin: 0 auto;
  width: 1000px;
  height: 100px;
  background-color: #008000;
  display: flex;
}
header #logo {
  width: 180px;
  height: 100px;
  background: url('../img/bg.jpg') no-repeat;
}
header ul {
  list-style-type: none;
  width: 820px;
  display: flex;
  justify-content: space-around;
}
header ul li {
  width: 82px;
  height: 100px;
  background-color: pink;
  line-height: 100px;
  text-align: center;
}
header ul li a {
  text-decoration: none;
  font-size: 50px;
}
header ul li a:link {
  color: red;
}
header ul li a:visited {
  color: yellow;
}
header ul li a:hover {
  color: blue;
}
header ul li a:active {
  color: purple;
}

运算符

1. 运算符的作用：可以对角度,颜色，宽度，高度等进行运算。
2. 运算符的分类：加法，减法，乘法，除法。
3. 示例：

注意：如果运算之间含有常数，需要空格将运算符空开。

综合练习