less学习笔记

less基础内容

使用@来声明变量

`url`变量

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

/* 生成的 CSS */
body {
    background: url("../img/dog.png");
}

变量用于字符拼接使用方法：

@className: box;
@mainColor: #e92323;
.@{className} {
    color: @mainColor;
}

等价于

.box{
    color: #e92323;
}

嵌套使用：
- &，当需要连接时使用&，代表上层选择器的名字，如：
```
.class {
    &:hover{
        cursor: pointer;
    }
    img {
        ...
    }
}
```
  此时 &:hover 等同于 .class:hover{} ;
  
  此时 img 等同于 .class img{} ;

媒体查询 `@media`

.container{
     750px;
    @media screen {
        @media (max- 768px){
            background-color: red;
        }
    }
    @media tv {
        background-color: yellow;
    }
}

等同于

@media screen and (max- 768px){
    .container{
        background-color: red;
    }
}
@media tv{
    .constainer{
        background-color: yellow;
    }
}

函数

一些内置函数

判断： isnumber, iscolor, isurl, 分别判断是否是一个数字，颜色，url

颜色操作：lighten增加颜色亮度，darken降低颜色亮度，fade增加透明度，mix根据比例混合两种颜色，saturate增加颜色饱和度等等

数学函数：ceil向上取整，floor向下取整，round四舍五入，sqrt平方根，abs绝对值，pow幂，percentage浮点数转换为百分比字符串等

自己写函数

.fun(){
     100px;
}
.container{
    .fun();
}

等同于

.container{
     100px;
}

方法的条件筛选

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;
}

  - 比较运算有： > >= = =< <。
  - = 代表的是等于
  - 除去关键字 true 以外的值都被视为 false：

数量不定的参数

如果你希望你的方法接受数量不定的参数，你可以使用... ，犹如 ES6 的扩展运算符。

  /* Less */
  .boxShadow(...){
      box-shadow: @arguments;
  }
  .textShadow(@a,...){
      text-shadow: @arguments;
  }
  #main{
      .boxShadow(1px,4px,30px,red);
      .textShadow(1px,4px,30px,red);
  }

  /* 生成后的 CSS */
  #main{
    box-shadow: 1px 4px 30px red;
    text-shadow: 1px 4px 30px red;
  }

循环方法

Less 并没有提供 for 循环功能，可以使用递归去实现。

/* Less */
.generate-columns(4);
.generate-columns(@n, @i:1) when (@i =< @n) {
    .column-@{i} {
         (@i * 100% / @n);
    }
    .generate-columns(@n, (@i + 1));
}

/*生成后的CSS*/
.column-1 {
     25%;
}
.column-2 {
     50%;
}
.column-3 {
     75%;
}
.column-4 {
     100%;
}

混入: 一堆属性从一个规则集到另一个规则集。

组合样式混入
类混入

函数混入

/*混入*/
/*组合样式的例子*/
.w50{
     50%;
}
.f_left{
    float: left;
}
.f_right{
    float: right;
}
/*类混入*/
.w50-f_left{
    .w50();
    .f_left();
}
/*函数混入*/
/*定义函数*/
.w50(){
     50%;
}
.f_left(){
    float: left;
}
.f_right(){
    float: right;
}
/*
1. 定义了参数(无默认值)，调用时必须传参
2. 怎么定义默认值 和定义变量值是一样的
3. 定义了参数(有默认值)，可传可不传
*/
.f(@direction:left){
    float: @direction;
}
.borderRadius(@100px){
    border-radius: @width;
}
.w50-f_left{
    .w50();
    .f(right);
    .borderRadius(20px);
}

输出的css为：


/*混入*/
/*组合样式的例子*/
.w50 {
   50%;
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
/*类混入*/
.w50-f_left {
   50%;
  float: left;
}
/*函数混入*/
/*定义函数*/
/*
1. 定义了参数(无默认值)，调用时必须传参
2. 怎么定义默认值 和定义变量值是一样的
3. 定义了参数(有默认值)，可传可不传
*/
.w50-f_left {
   50%;
  float: right;
  border-radius: 20px;
}

继承 extend

能够继承所匹配的所有样式，但不会继承其子元素的内容

.container{
     100px;
    .other{
        color: red;
    }
}
.content{
    &:extend(.container);
}
.span{
    &:extend(.container .other);
}

等同于

.container,
.content {
   100px;
}

.container .other,
.span {
  color: red;
}

运算

@num: 9;
ul{
     100%*@num;
    li{
         100%/@num;
        color: red+yellow+blue;
        background: gray*0.7;
        /*内置函数*/
        border-color: darken(red,20%);
    }
}

等同于

ul {
   900%;
}
ul li {
   11.11111111%;
  color: #ffffff;
  background: #5a5a5a;
  /*内置函数*/
  border-color: #990000;
}

导入@improt

less中可以通过@import来导入外部文件，@import可以放在代码中任意位置，导入文件时处理方式取决于文件的扩展名。

@import "style";      // 导入 style.less
@import "style.less";  // 导入style.less
@import "style.php";   //  style.php 作为LESS文件被导入
@import "style.css";   // 文件内容被原样输出

一个网站常常是有多个模块组成，如果只使用一个 .less 文件，编辑起来非常不便，也不利于分工协作。此时，就可以为每个模块单独创建 .less 文件，然后通过 @import指令将它们合并成一个文件。

其他

注释

/**/ CSS原生注释，会被编译在CSS文件中

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

避免编译

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

/* 生成后的 CSS */
#main{
    calc(300px-30px);
}

结构：` ~ '值' `

使用JS

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

/* 生成后的CSS */

// 弹出1
#wrap{
     随机值(0~100)px;
    height: 743px;
    background: 随机颜色;
}
#wrap:after{
    content: "AAA";
}

参考：https://segmentfault.com/a/1190000012360995?utm_source=tag-newest

相关阅读:
Analyzing the Go runtime scheduler from source code perspective
golang教材
 Kafka#4：存储设计分布式设计源码分析
 机器学习应该准备哪些数学预备知识？
Why does deep learning work?
Deep Reinforcement Learning
How do I learn machine learning?
What are some good books/papers for learning deep learning?
why deep learning works
AI 名校课程&书籍需要学习
原文地址：https://www.cnblogs.com/chengquanomg/p/11527437.html

less学习笔记

less基础内容

使用@来声明变量

url变量

变量用于字符拼接使用方法：

嵌套使用：

媒体查询 @media

函数

混入: 一堆属性从一个规则集到另一个规则集。

继承 extend

运算

导入@improt

其他

`url`变量

媒体查询 `@media`

导入`@improt`