1.常见的CSS预处理器有哪些?

[!NOTE]
css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处

  • Sass(Scss):2007,ruby编写
  • Less: 2009,js编译

1.1 使用流程?

  1. 基于CSS的另外一种语言
  2. 通过工具编译成CSS
  3. 添加了很多CSS不具备的特性
  4. 同时CSS文件的组织方式

1.2 预处理器的作用有哪些?

  1. 帮助开发者更好组织CSS代码(变量,mixIn)
  2. 提高代码的复用性
  3. 代码的可维护性增强

2.Less/Sass预处理器的功能?

  1. 嵌套: 反映层级和约束
  2. 变量和计算: 减少重复代码
  3. Extend和mixIn: 代码片段的抽离
  4. 循环: 适用于复杂有规律的样式
  5. import:可以实现CSS文件的模块化

3.CSS预处理器的优缺点?

  • 优点: 提高代码的复用率和可维护性
  • 缺点: 引入了编译的过程,有一定的学习成本

前端工程化:预处理不再是唯一的手段了,可以使用工程化构建工具进行处理

4.scss和less的区别?

  1. 编译环境不一样
  2. 变量符不一样,Less是@,而Scss是$,而且变量的作用域也不一样。
  3. 输出设置,Less没有输出设置,Sass提供4种输出选项:
  4. Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。
  5. 引用外部CSS文件
  6. 工具库不同

【前端知识体系-CSS相关】CSS预处理器的更多相关文章

  1. 【前端知识体系-JS相关】对移动端和Hybrid开发的理解?

    1.hybrid是什么,为何使用hybrid呢? 概念: hybrid就是前端和客户端的混合开发 需要前端开发人员和客户端开发人员配合完成 某些环节也可能会涉及到server端 大前端:网页.APP. ...

  2. 【前端知识体系-JS相关】组件化和React

    1. 说一下使用jQuery和使用框架的区别? 数据和视图的分离,(jQuery数据和视图混在一起,代码耦合)-------开放封闭原则 以数据驱动视图(只关注数据变化,DOM操作被封装) 2.说一下 ...

  3. 【前端知识体系-HTML相关】HTML基础知识强化总结

    1.如何理解HTML? HTML类似于一份word"文档" 描述文档的"结构" 有区块和大纲 2.对WEB标准的理解? Web标准是由一系列标准组合而成.一个网 ...

  4. 【前端知识体系-JS相关】JS基础知识总结

    1 变量类型和计算 1.1 值类型和引用类型的区别? 值类型:每个变量都会存储各自的值.不会相互影响 引用类型:不同变量的指针执行了同一个对象(数组,对象,函数) 1.2 typeof可以及检测的数据 ...

  5. 【前端知识体系-JS相关】10分钟搞定JavaScript正则表达式高频考点

    1.正则表达式基础 1.1 创建正则表达式 1.1.1 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 1.1.2 调用RegExp对象的构 ...

  6. 前端知识体系-NodeJS相关】NodeJS基础知识全面总结

    NodeJS基础知识 1. Node的全局对象和全局变量 1.1 全局对象:所有模块都可以调用的 global:表示Node所在的全局环境,类似于浏览器的window对象. process:该对象表示 ...

  7. 【前端知识体系-NodeJS相关】对NodeJS模块机制的理解

    1. CommonJS模块规范 1.1 模块引用 var math = require('math'); 1.2 模块定义 [!NOTE] 上下文提供exports对象用于导出当前模块的方法和变量,并 ...

  8. 【前端知识体系-JS相关】你真的了解JavaScript编译解析的流程吗?

    1. JS编译解析的流程 1.1 JS运行分三步 语法分析(通篇扫描是否有语法错误),预编译(发生在函数执行的前一刻),解释执行(一行行执行). 1.2 预编译执行分五步 创建AO对象(Activat ...

  9. 【前端知识体系-JS相关】深入理解JavaScript异步和单线程

    1. 为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Jav ...

  10. 【前端知识体系-JS相关】深入理解MVVM和VUE

    1. v-bind和v-model的区别? v-bind用来绑定数据和属性以及表达式,缩写为':' v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 2. Vue 中三要素的是 ...

随机推荐

  1. 修改配置文件application.properties

    附录A.常用应用程序属性 可以在application.properties文件内部application.yml,文件内部或命令行开关中指定各种属性.本附录提供了常见Spring Boot属性的列表 ...

  2. c使用二叉链表创建二叉树遇到的一些疑问和思考

    二叉链表存储二叉树 学习的时候参考的是<大话数据结构>,书中是这样定义的 typedef char TElemType; typedef struct BiTNode { TElemTyp ...

  3. 问题:LinkedList 是原始类型。应该将对通用类型 LinkedList<E> 的引用参数化

    jdk1.5之后,引入了泛型,类似下面这种写法会出现类似警告,可以忽略,  LinkedList llist = new LinkedList();也可以修改一下,指定类型  LinkedList&l ...

  4. GDAL集成对KML文件的支持

    目录 1. 正文 1.1. 编译LibKML 1.1.1. 第三方库支持 1.1.2. 编译错误 1.2. 配置GDAL 1.3. 链接问题 2. 参考 1. 正文 GDAL可以支持将KML作为矢量文 ...

  5. epoll--IO多路复用

    理解 epoll 过程 #include <stdio.h> #include <stdlib.h> #include <string.h> #include &l ...

  6. mysql数据备份之 xtrabackup

    上一篇简单介绍了一下mysqldump进行数据库的备份和恢复,这一篇说一下另一种备份工具xtrabackup,在InnoDB事务引擎泛滥的时代,xtrabackup可以很好的支持数据库的热备份,这就很 ...

  7. Javascript对this对象的理解

    在JavaScript中this表示函数运行的时候自动生成的一个内部对象,只能在函数内部使用,下面是一个简单的例子: function test(){ alert(this == window); } ...

  8. oc基本知识

    (一)构造函数 h文件 #import <Foundation/Foundation.h> @interface Student : NSObject { NSString *_name; ...

  9. django-模板之模板变量(二)

    将views中的变量传递给html界面 book/views.py from django.views import View from django.shortcuts import render ...

  10. 本地客户端(自己的电脑)连接远程Oracle数据库(服务器端),客户端安装步骤

    如果本地自己的电脑没有安装Oracle(服务器端数据库),那就要单独安装HA-Instant Client-v11.2.0.3.0.exe(oracle_client客户端) 如果本地安装了Oracl ...