小可爱_3486
小可爱_3486

学习less看这篇就可以了

less概述

Lesscss 是一门 CSS 预处理语言，简称less。它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 服务端 或浏览器端。

less使用方式

直接使用：官网下载less.js（http://lesscss.cn/#download-options）
编写less（类似于css）,当为内部组样式时，style标记的type属性必须为text/less。
为外部样式时,link标记为rel属性必须写为stylesheet/less。
vscode:直接安装 Easy Less;
在less后链接进less.js
编译为css后使用：
安装node.
安装lessec (npm install -g less)

变量

1.less中使用@定义变量。例：@width = 100px;然后在需要的时候调用变量。如：width:@width;
2.变量不仅可以用于值，还可以用于选择器，样式属性，变量嵌套URL;

  1. less中变量的使用没有js那样严格的规定。如@font-size @123。但建议按照规范起名字。less中的变量可以先使用再定义
less:
@w : 100px;
@h : 100px;
@color : red;
@prop:color;
@selector : select;
. @{selector}{
  width: @w;
  height: @h;
  background-@{prop}: @color;
}
生成
.select {
  width: 100px;
  height: 100px;
  background-color: red;
}

注意：除了简单变量外，其它的变量调用时都需要加{}

变量的嵌套

less
@a:50px;
@b:a;
@c:@a;
div{
    width:@@b;
    height: @c;
}
生成：
div {
  width: 50px;
  height: 50px;
}

混合MIXIN

在less中我们可以定义一些通用的属性集为一个class,然后在另一个class中去调用这些属性、
如：

less
.mix{
    width:100px;
    height:100px;
}
div{
    .mix;
    background-color: red;
    color: #fff;
}
生成：
.mix {
  width: 100px;
  height: 100px;
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  color: #fff;
}

混合可以将一个定义好的class轻松的引入到另一个class中。从而实现样式的复用。

在Less中可以定义带一个或者多个带参的属性集合，并指定缺省值，在调用可以传递缺省值。就像编程函数一样调用。

less:
test(@color){
    color:@color;
    background-color:@color;
}
div{
    .test(red);
    
}
h1{
    .test(green)
}
生成:
div {
  color: red;
  background-color: red;
}
h1 {
  color: green;
  background-color: green;
}

导引表达式：当我们想根据表达式匹配，而非根据值和参数匹配时。这时你可以使用导引表达式。而为了尽可能地保留css的可声明性。less通过导引混合而非if/else来实现条件判断。
如：

mix(@a) when (unit(@a) > 30){
    font-size: unit(@a,px);
    color:red;
}
.mix(@a) when (unit(@a) <= 30){
    font-size: unit(@a,px);
    color:green;
}
.mix(@a){
    background-color: orange;
}
.div{
    .mix(35)
}
}

运算

任何数字，颜色，变量都可以参与运算

@num:100px;
@num1: 100px;
@color:#666;
div{
    width: @num*100;
    height:@num + @num1;
    background-color: @color / 3;
}

单位函数unit:改变或移除单位，如：

 unit(15,px) 结果为15px;
 unit(15px,rem):结果15rem
 unit(15px) 结果为15

函数

单位转换函数convert: 在单位类型一致的情况下进行转换，否则返回原始数据：如：

 convert(500ms,s) 
  covert(14m,px)
  convert(30deg,rad)

其它函数： color(red) darken( ）lignten() data-uri() default() not length() extract() replace()等等

嵌套和继承

ess可以让我们以嵌套的方式编写层叠样式，这样写让代码更简洁。如：

#header{
    color:black;
    .navgator{
        width: 1226px;
        .left .content{
            float:left;
        }
        .right{
            float:right;
            &:hover{
                text-decoration: underline;
            }
        }
    }
}

继承被符在选择器后面或者规则集中（具体的样式）&。如：

.inline{
    color:red;
    font-size:12px;
}
nav ul{
    &:extend(.inline);
    background-color: red;
}
h5:extend(.inline){
    background-attachment: fixed;
}
h1{
    font-size:30px;
}
.h2{
    color:red;
}
.h3{
    &:extend(.h1,.h2);
}

import

这里link与@import介绍的是[html引入css的语法单词。两者均是引入css到html]的单词。link和import语法结构不同，前者是html标签，只能放入html源代码中使用，后者可看作为css样式，作用是引入css样式功能。import在html使用时候需要