CSS 预处理器—less

css预处理器有：sass/scss、less、stylus 

说明：

  1. 预处理处理器常用的功能 ： 计算功能，变量（variables），代码混合（ mixins），继承 ，嵌套（nested rules）以及 模块化(Modules) 
    参考： https://www.jianshu.com/p/9f64b62e8e65
  2. less 的语法比较接近css，学习成本也最低。预处理常用的几种功能  less 都有，所以我们这里只是介绍下 less 中常用的几种功能。   
    参考：https://www.jianshu.com/p/885b74482d81 或 https://less.bootcss.com/【推荐，官网】
  3. 在线 less 编译 网站： http://www.matools.com/less

一、计算功能：

  • 说明：
    // 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
    • 使用计算功能的好处就是，直接把计算过程写在这里了。后面要调整只要调整 算式的关键部分（不变的值有时不知道也不用再去其它地方找了），不需要我们出现计算下。
    • 原生css也有 计算功能cacl()，但过多地使用calc()函数可能会导致CSS文件的体积增加，从而增加页面的加载时间。预处理的计算编译成css就是确定的值。
      所以原生cacl()函数，只用在相对单位的计算上，如百分比。预处理器的 计算 可以随意使用，不会对css有任何影响。

  • 常用计算功能：

    • 四则运算：不需要使用函数辅助，直接可以使用
    • floor()：向下取整
    • ceil()：向上取整
    • round()：四舍五入
    • percentage()函数：
        .item {
    width: percentage(1/3); // 计算 1/3 转百分比，结果 ~33.333%
  }
    • sqrt()：平方根
    • abs()：绝对值

二、变量（variables）：https://zhuanlan.zhihu.com/p/161182573 

　　变量有：属性值变量、选择器变量、属性变量、url变量（可以变量插值）、声明变量 等），我们用的比较多的就是值变量 和 url变量。               

   　　　　　　　　　　　在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。

  1. 值变量：
    是指 对某  一个属性值设置一个变量 ，一个变量就表示一个属性值，没有其他的属性。所以 使用这个变量 的地方，都是放在属性值的地方。如下： 
    // 定义变量
@bgColor: #f5f5f5;

// 使用变量
body{
    background-color: @bgColor;
}
  2. 变量插值：
    • 选择器变量：
      变量可以把选择器变为一个动态的选择器，也可以复用选择器中重复的字符。在使用选择器变量时，变量名需要放在用 @ 符号前缀的花括号 {} 内。 
      @name: xkd_top;

.@{name} {
    font-size: 14px;

}
#@{name} {
    color: #aaa;
}
.div_@{name} {
    padding: 10px;
}

      选择器变量  声明方式 和 值变量是一样的，但是使用方式有点区别。选择器变量，使用格式是  @{name}，可以做字符串拼接。

    • 属性名变量：
      属性名变量的使用其实和选择器变量的使用差不多，都是通过 {} 将变量名括起来

      @fz:font-size;

h3{
    @{fz}:18px;
}

p{
    @{fz}:12px;
}

      使用方法同 选择器变量一样，也是 @{name} 

    • url变量： 
      使用场景，当项目结构改变时，修改其变量即可。使用格式同选择器变量  @{name}，做字符串拼接。 
      /* Less 代码 */
      @images: "../img";//需要加引号
      body {
        background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
      }
    
      /* 生成的 CSS 代码*/
      body {
        background: url("../img/dog.png");
      }

总结：less中变量声明的格式都一样，但是使用方式有差异。除了属性值变量的使用格式 @name，其它使用格式都是 @{name}。

三、代码混合（ mixins）：

　　混合本质就是一种 less函数， 可以理解为 上面 变量功能的升级，变量只是对一个 属性值 的重复使用；而混合是对多个 属性 的重复使用。所以混合是放在属性名那个地方的。

　 （亲测）混合中，复用的选择器本身只能是一个选择器，不能是混合选择器的组合，因为这个复用的选择器本质上一个函数名。可以在嵌套内声明，就相当于局部函数。

  1. 非函数写法  - -  继承：less混合 的 继承 写法， less编译后，这个 被继承的选择器本身 是会保留的。 
          .borde_style {
          border-top: solid 1px #595959;
          border-bottom: solid 2px #595959;
      }
      #header span {
          height: 16px;
          .borde_style;
      }
  2. 函数写法 - - 无参数：less混合 的 函数 写法， less编译后，这个 复用的选择器本身 是不会被保留的。 非继承的情况下，推荐这种写法。 
          .borde_style() {
          border-top: solid 1px #595959;
          border-bottom: solid 2px #595959;
      }
      #header span {
          height: 16px;
          .borde_style;  // 这里.borde_style带上括号也可以，即.borde_style();
      }
  3. 函数写法 - - 带参数：less的混合和  JS 函数 很像 
        .border-radius(@radius) {
      -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
              border-radius: @radius;
    }
    #header {
      .border-radius(4px);
    }

    参数同样可以设置默认值：

    // 定义带默认值的混合（默认圆角8px）
.radius(@size: 8px) {
  border-radius: @size;
  -webkit-border-radius: @size;
}

.card {
  .radius(); // 调用默认值，生成8px圆角
}
.btn-small {
  .radius(4px); // 传参，生成4px圆角
}

    条件混合：

    .bg-color(@type) when (@type = primary) {
  background: #1890ff;
}
.bg-color(@type) when (@type = success) {
  background: #52c41a;
}

.btn-primary { .bg-color(primary); } // 生效primary样式

四、嵌套（nested rules）：

　　less嵌套还是比较简单的。表示上一层选择器用 & 表示，一般伪类都会用到外层的选择器。

    .container {
        padding: 0;
        .header {
            background-color: red;
        }
    }
    #header {
      &:after {        /* 这里使用 & 代表上一层的选择器 */
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }
    }

五、模块化(Modules)  ：

　　模块化，就是引入外面的less文件。

@import ‘./main.less ’;

 注意：@import 引入时，后面必须带上分号；。

 

 上面是 css 预处理器中经常用到的功能，下面介绍下 预处理的其它功能。 还是介绍 less 的功能                      https://blog.csdn.net/pedrojuliet/article/details/72887490

 一、变量 运算：四则运算

　　1、作用域：就近原则

二、颜色函数：CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，例如加亮、变暗、颜色梯度等。直接把一个颜色  变成  高亮时对应的色值 或  算出 几个颜色合并后的色值。

lighten(@color, 10%); 
darken(@color, 10%);  
saturate(@color, 10%);  
desaturate(@color, 10%); 
spin(@color, 10); 
spin(@color, -10); 
mix(@color1, @color2);
/*  less  */
@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 10%);
}

/*  生成css  */
h1 {
  background: #0982c1;
  border: 3px solid #076190;
}

 

posted @ 2019-11-15 10:14  吴飞ff  阅读(654)  评论(0)    收藏  举报