less的基础学习

💕less的基础学习

Less 是一门 CSS 预处理语言，它扩充了 CSS语言，增加了诸如变量、混合（mixin）、函数等的功能。让css更以维护。 但他不能直接的渲染，要转换为css进行渲染。

sass的环境配置

node.js和less环境的配置

• 1：先下载node.js安装包进行安装
• 2：安装完成后，打开cmd命令窗口，输入node -v,或者 npm -v来检查是否安装成功
• 3：然后输入npm install less -g安装sass环境(有的输入后安装不成功，那么需要先输入(npm config set registry registry.npm.taobao.org)命令
• 4：环境安装好以后输入less -v(或者less --version)检查一下版本
• 5：然后便可以使用了

如何将less中的.less文件渲染成.css文件

//例如:建立了一个文件名.less，想将此文件转化为css文件进行渲染,
//首先打开cmd命令窗口,在窗口输入以下代码即可转换
lessc 文件名.less 文件名.css

less 变量

//💖用一个@加上变量名即可定义，然后进行引用，具体用法如下：
@color:red;//定义变量
#header{
  color: @color;//使用变量
}
div{
  color: @color;//使用变量
}

less 混入

//�可先定义一个类名，将公共的样式，或者想要定义的样式放入其中
//然后在下面的类中可直接引入，使用方法如下：
//less文件中💖
.temp{
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}
#header{
  .temp;
  color: palevioletred;
}
div{
  background: peru;
  .temp;
}

//💖渲染后，css文件中，将会实现以下代码
.temp {
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}
#header {
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  color: palevioletred;
}
div {
  background: peru;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}

less 带参数的混入

//💖给与类名定义一个参数，在下面使用的时候，定义参数的值即可，具体使用方法如下
.border-radius(@radius){
  border-radius: @radius;
  -moz-border-radius:@radius;
  -webkit-border-radius:@radius;
  -o-border-radius:@radius;
}
div{
  .border-radius(4px);
  background: goldenrod;
}
div.home{
  .border-radius(7px)
}


//💖渲然后
div {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  background: goldenrod;
}
div.home {
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  -o-border-radius: 7px;
}

less 嵌套

//💖 后代选择器
#footer{
  color: gray;
  ul{
    font-size: 20px;
    li{
      //&符号代表着父类本身
      &:hover{
        color: lavender;
        a{
          color:rgb(0, 255, 13);
        }
      }
      a{
        color:yellow;
        &:hover{
          color: rgb(20, 20, 34);
        }
      }
    }
  }
}


//💖子代选择器
#footer{
  color: gray;
  ul{
    font-size: 20px;
    li{
      //&符号代表着父类本身
      &:hover{
        color: lavender;
        a{
          color:rgb(0, 255, 13);
        }
      }
      a{
        color:yellow;
        &:hover{
          color: rgb(20, 20, 34);
        }
      }
    }
  }
}


//💖渲染后结果为
#footer {
  color: gray;
}
#footer ul {
  font-size: 20px;
}
#footer ul li:hover {
  color: lavender;
}
#footer ul li:hover a {
  color: #00ff0d;
}
#footer ul li a {
  color: yellow;
}
#footer ul li a:hover {
  color: #141422;
}

less 运算

@width:300px;
div{
  width: @width;
  height: @width / 2;
}

//渲染后页面为
div {
  width: 300px;
  height: 150px;
}

less 内置函数

**
lighten(@color, 10%);     // 返回一个比@color低10％更轻的颜色
darken(@color, 10%);      // 返回一个比@color高10％较暗的颜色
saturate(@color, 10%);    // 返回比@color多饱和度10％的颜色
desaturate(@color, 10%);  // 返回一个比@color少饱和度10％的颜色
fadein(@color, 10%);      // 返回一个比@color少10％透明度的颜色
fadeout(@color, 10%);     // 返回一个比@color多10％透明度的颜色
fade(@color, 50%);        // 返回一个颜色透明度为50％的颜色
spin(@color, 10);         // 返回色调比@color大10度的颜色
spin(@color, -10);        // 返回一个比@color小10度色调的颜色
mix(@color1, @color2);    // 返回一个混合@ color1和@ color2的颜色
**
@color:#e9232c;
div{
  color: lighten(@color,10%);
}

less 导入文件

@import "./import.less";
.home{
  color: @color;
  background: greenyellow;
}

//import.less的代码
@color:red;
@width:200px;
div{
  color: @color;
}


//渲染后的结果为
div {
  color: red;
}
.home {
  color: red;
  background: greenyellow;
}