CSS-预处理器

Rsquo
207 阅读4分钟

1. 常见的预处理器介绍

1.1 Sass/Scss

  • 2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持，是属于Haml（一种模板系统）的一部分

  • 目前受LESS影响，已经进化到了全面兼容CSS的SCSS

1.2 Less

  • 2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者更容易上手

  • 比起SASS来，可编程功能不够，不过优点是使用方式简单、便捷，兼容CSS，并且已经足够使用

  • 另外反过来也影响了SASS演变到了SCSS的时代

  • 著名的Twitter Bootstrap就是采用LESS做底层语言的，也包括React的UI框架AntDesign

1.3 Stylus

  • 2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持

  • 语法偏向于Python, 使用率相对于Sass/Less少很多

2. Less

2.1 less介绍

  • 什么是Less呢? 我们来看一下官方的介绍:

    It's CSS, with just a little more.

  • Less （Leaner Style Sheets 的缩写） 是一门CSS 扩展语言, 并且兼容CSS

    • Less增加了很多相比于CSS更好用的特性

    • 比如定义变量、混入、嵌套、计算等等

  • Less最终需要被编译成CSS运行于浏览器中（包括部署到服务器中）

  • 编写less

    .container {
  width: 200px;
  height: 200px;
  background-color: orange;

  .box {
    width: 100px;
    height: 100px;
    background-color: #f00;
  }
}

  • less如何转成CSS?

    1. 下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译

    2. 通过VSCode插件（Easy LESS） 来编译成CSS或者在线编译

    3. 引入CDN的less编译代码，对less进行实时的处理

      <link rel="stylesheet/less" href="./less的基本使用.less">
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

    4. 将less编译的js代码下载到本地，执行js代码对less进行编译

2.2 less语法

  • 兼容CSS

    .box {
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 20px;
  color: #fff;
}

  • 定义变量：@变量名: 变量值;

    @mainColor: #a40011;

@smallFontSize: 12px;
@normalFontSize: 14px;
@bigFontSize: 18px;

  • 嵌套

    .box {
  .pel {
    color: @mainColor;
    font-size: @normalFontSize;
  }

  h1 {
    .keyword {
      color: @mainColor;
      font-size: @bigFontSize;
    }
  }

  p {
    a.link {
      color: @mainColor;
      font-size: @smallFontSize;

      background-color: #0f0;

      &:hover {
        color: #00f;
      }
    }
  }
}

// &符号的练习
.list {
  .item {
    font-size: 20px;

    &:hover {
      color: @mainColor;
    }

    &:nth-child(1) {
      color: orange;
    }

    &:nth-child(2) {
      color: #00f;
    }
  }
}

/* &符号转换成css */
.list .item {
  font-size: 20px;
}
.list .item:hover {
  color: #a40011;
}
.list .item:nth-child(1) {
  color: orange;
}
.list .item:nth-child(2) {
  color: #00f;
}

  • 计算：在Less中，算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。

    • 算术运算符在加、减或比较之前会进行单位换算，计算的结果以最左侧操作数的单位类型为准

    • 如果单位换算无效或失去意义，则忽略单位

      .box {
  font-size: 20px;
  /* 计算值为 60% */
  width: 10% + 50px;
  height: 100px;
  background-color: #ff0000 + #00ff00;
}

  • 混入mixins：可以将相同的代码进行抽取到一个独立的地方，任何选择器都可以进行复用

    // 混入的基本使用
.nowrap_ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// 混入传递参数(定义变量)
.box_border(@borderWidth: 5px, @borderColor: purple) {
  border: @borderWidth solid @borderColor;
}

// 混入和映射(Map)结合使用
// 作用: 弥补less中不能自定义函数的缺陷
.box_size {
  width: 100px;
  height: 100px;
}

.box1 {
  // 映射的使用
  width: .box_size()[width];
  background-color: #f00;

  // 基本使用：加 ()
  .nowrap_ellipsis();
  .box_border();
}

.box2 {
  width: 150px;
  background-color: #0f0;

  .nowrap_ellipsis();
  // 传入变量
  .box_border(10px, orange);
}

  • 额外补充

    • extend继承

      • 和mixins作用类似，用于复用代码

      • 和mixins相比，继承代码最终会转化成并集选择器

        .box_border {
  border: 5px solid #f00;
}

.box {
  width: 100px;
  background-color: orange;

  // .box_border();
  &:extend(.box_border);
}


// 转换后的css，并集选择器
.box_border,
.box {
  border: 5px solid #f00;
}
.box {
  width: 100px;
  background-color: orange;
}

    • 内置函数：Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

      .box {
  // 将 'red' 转成 rgb格式
  color: color(skyblue);
  // 单位转换
  width: convert(100px, "in");
  // 数学函数：19px
  font-size: ceil(18.5px);
  background-color: orange;
}

    • 作用域：查找一个变量时，首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承

      @mainColor: #f00;

.box_mixin {
  @mainColor: orange;
}

.box {
  // @mainColor: #0f0;

  .item {
    span {
      color: @mainColor;

      .box_mixin();
      // @mainColor: #00f;
    }
  }
}

    • 注释

      // 单行注释
/* 多行注释 */

    • 导入

      • 导入的方式和CSS的用法是一致的

      • 导入一个 .less 文件，此文件中的所有变量就可以全部使用了

      • 如果导入的文件是 .less 扩展名，则可以将扩展名省略掉

3. Scss

  • Sass的语法使用的是类似于Ruby的语法，没有花括号，没有分号，具有严格的缩进

  • Sass的语法和CSS区别很大，后来官方推出了全新的语法SCSS，意思是Sassy CSS，他是完全兼容CSS的SCSS的语法也包括变量、嵌套、混入、函数、操作符、作用域等

    • 通常也包括更为强大的控制语句、更灵活的函数、插值语法等；

    • 可以根据之前学习的less语法来学习一些SCSS语法；

    • scss官网

avatar
文章
阅读
粉丝