less知识点汇总_牛客博客

一、使用方式

1.1 安装

两种使用方式：第一种全局安装 less，利用命令编译 less;第二种直接引入 less.js.
npm 安装

    npm install -g less
    npm install -g less-plugin-clean-css

命令行

lessc styles.less styles.css  // 编译成css
lessc --clean-css styles.less styles.min.css  // 编译压缩css

引入 less.js
这里注意要在 less.js 引入前引入.less 样式文件

<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>

二、使用

2.1 变量

1. 值变量
  less 的变量声明是以@开头

/* less */
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

2.2 选择器变量

选择器也可使用变量,变量需要用@{}包括

@mySelector: .wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
  color: #999;
  width: 50%;
}

2.3. 属性变量

属性名称使用变量

@borderStyle: border-style;
@Soild:solid;
#wrap{
  @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
}

2.4. url 变量

@images: "../img";//需要加引号
body {
  background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}

2.5. 声明变量

类似于 mixins,用于引入公共代码块

结构: @name: { 属性: 值 ;};
使用：@name();

// less
@background: {background:red;};
#main{
    @background();
}

// css
#main{
  background:red;
}

2.6. 变量作用域

less 中变量的作用域是采用就近原则

/* Less */
@var: @a;
@a: 100%;
#wrap {
  width: @var;
  @a: 9%;
}
@a: 8%;

/* 生成的 CSS */
#wrap {
  width: 9%;
}

三、Mixins

可以直接引入定义好的类的样式直接混入到当前

3.1. 无参混入

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered;  // 等价于.bordered()
}

3.2. 默认参数方法

Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。
@arguments 犹如 JS 中的 arguments 指代的是全部参数。
传的参数中必须带着单位。

.border(@a:10px,@b:50px,@c:30px,@color:#000){
    border:solid 1px @color;
    box-shadow: @arguments;//指代的是 全部参数
}
#main{
    .border(0px,5px,30px,red);//必须带着单位
}

四、条件语句 when

Less 没有 if else，它有 when 用于做条件判断

/* Less */
#card{

    // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
    .border(@width,@color,@style) when (@width>100px) and(@color=#999){
        border:@style @color @width;
    }

    // not 运算符，相当于 非运算 !，条件为 不符合才会执行
    .background(@color) when not (@color>=#222){
        background:@color;
    }

    // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
    .font(@size:20px) when (@size>50px) , (@size<100px){
        font-size: @size;
    }
}
#main{
    #card>.border(200px,#999,solid);
    #card .background(#111);
    #card > .font(40px);
}
/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}

五、嵌套

less 支持嵌套写法

5.1. 基本层级嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

5.2. 父选择&符

a {
  color: blue;
  &:hover {
    color: green;
  }
}

5.3. 嵌套指令冒泡

// less
.screen-color {
  @media screen {
    color: green;
    @media (min-width: 768px) {
      color: red;
    }
  }
}

/* css */
@media screen {
  .screen-color {
    color: green;
  }
}
@media screen and (min-width: 768px) {
  .screen-color {
    color: red;
  }
}

六、运算符

@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15%

七、继承

extend 是 Less 的一个伪类。它可继承所匹配声明中的全部样式

7.1. extend 关键字的使用

/* Less */
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/*  CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

7.2. all 全局搜索替换

使用选择器匹配到的全部声明

/* Less */
#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/*  CSS */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

八、导入

8.1. 导入 less 文件可省略后缀

import "main";
//等价于
import "main.less";

8.2. @import 的位置可随意放置

#main{
  font-size:15px;
}
@import "style";

8.3. reference

使用@import (reference)导入外部文件，但不会添加把导入的文件编译到最终输出中，只引用。

/* Less */
@import (reference) "bootstrap.less";

#wrap:extend(.navbar all){}

九、函数

less 提供多种函数可以使用

9.1. 判断类型

isnumber(#ff0);     // 判断给定的值 是否 是一个数字
iscolor(#ccc)      //判断给定的值 是否 是一个颜色
isurl("")         // 判断给定的值 是否 是一个 url

9.2. 颜色操作

rgb(90, 129, 32)   //  #5a8120
mix(#ff0000, #0000ff, 50%)   // #800080
hsl(90, 100%, 50%)   // #80ff00
argb(rgba(90, 23, 148, 0.5)) // #805a1794
darken(hsl(90, 80%, 50%), 20%)  // #4d8a0f

9.3. 数学函数

ceil(2.4)  // 3
floor(2.6)  // 2
percentage(0.5) // 50%
round(1.67, 1) // 1.7
sqrt(25cm)   // 5cm
abs(-18.6%)  // 18.6%

十、其他

10.1 注释

/* */ CSS 原生注释，会被编译在 CSS 文件中。
/ / Less 提供的一种注释，不会被编译在 CSS 文件中

10.2 避免编译

-使用 ~' 值 ' 结构可以避免被编译 -结构： ~' 值 '

/* Less */
#main{
  width:~'calc(300px-30px)';
}

/*  CSS */
#main{
  width:calc(300px-30px);
}

10.3 量拼串

在平时工作中，这种需求太常见了。在下面例子中，实现了不同的 transtion-delay、animation、@keyframes
结构： ~"字符@{变量}字符";

.judge(@i) when(@i=1){
  @size:15px;
}
.judge(@i) when(@i>1){
  @size:16px;
}
.loopAnimation(@i) when (@i<16) {

  .circle:nth-child(@{i}){
      .judeg(@i);
      border-radius:@size @size 0 0;
      animation: ~"circle-@{i}" @duration infinite @ease;
      transition-delay:~"@{i}ms";
  }
  @keyframes ~"circle-@{i}" {
      // do something...
  }
  .loopAnimation(@i + 1);
}

10.4 使用 JS

因为 Less 是由 JS 编写，所以 Less 有一得天独厚的特性：代码中使用 Javascript

/* Less */
@content:`"aaa".toUpperCase()`;
#randomColor{
  @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";
}
#wrap{
  width: ~"`Math.round(Math.random() * 100)`px";
  &:after{
      content:@content;
  }
  height: ~"`window.innerHeight`px";
  alert:~"`alert(1)`";
  #randomColor();
  background-color: @randomColor;
}
/* 生成后的 CSS */

// 弹出 1
#wrap{
  width: 随机值（0~100）px;
  height: 743px;//由电脑而异
  background: 随机颜色;
}
#wrap::after{
  content:"AAA";
}

less知识点汇总