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. 约瑟夫环问题详解(java版)

    1 什么是约瑟夫环问题? 约瑟夫,是一个古犹太人,曾经在一次罗马叛乱中担任将军,后来战败,他和朋友及另外39个人躲在一口井里,但还是被发现了.罗马人表示只要投降就不死,约瑟夫想投降,可是其他人坚决不同 ...

  2. Pathon中numpy模块

    目录 numpy模块 切割矩阵 矩阵元素替换 矩阵的合并 通过函数创建矩阵 fromstring/fromfunctions 矩阵的运算 常用矩阵运函数 矩阵的点乘 矩阵的逆 矩阵的其他操作 nump ...

  3. Vue中Class与Style如何动态绑定

    Class 可以通过对象语法和数组语法进行动态绑定: 对象语法: <div v-bind:class="{ active: isActive, 'text-danger': hasEr ...

  4. leetcode 刷500道题,笔试/面试稳过吗?谈一谈这些年来算法的学习

    想要学习算法.应付笔试或者应付面试手撕算法题,相信大部分人都会去刷 Leetcode,有读者问?如果我在 leetcode 坚持刷它个 500 道题,以后笔试/面试稳吗? 这里我说下我的个人看法,我认 ...

  5. 学习笔记:flutter项目搭建(mac版)

    什么是flutter Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的 ...

  6. 计算机网络(2)-- URL、HTTP、HTTPS、HTML

    1.万维网WWW 万维网WWW(World Wide Web)是一个大规模的.联机式的信息储藏所,英文简称Web. 万维网用链接的方法能非常方便地从互联网上的一个站点访问另一个站点,从而主动地按需获取 ...

  7. JVM(2) Java内存溢出异常

    在Java虚拟机运行时数据区中,除了程序计数器之外,虚拟机栈.本地方法栈.方法区和Java堆都有发生OutOfMemoryError(简称OOM)异常的可能. 一.Java堆溢出 Java堆用于存储对 ...

  8. 实战--dango自带的分页(极简)

    注意,我将templates定义在项目的同级目录下: 在settings.py中配置 TEMPLATES = [ { 'BACKEND': 'django.template.backends.djan ...

  9. SpringBoot整合MybatisPlus3.X之SQL注入器(九)

    pom.xml <dependencies> <dependency> <groupId>org.springframework.boot</groupId& ...

  10. docker入门级详解

    Docker 1 docker安装 yum install docker [root@topcheer ~]# systemctl start docker [root@topcheer ~]# mk ...