一天一道面试题:CSS 引用与预编译器

in Web 前端 with 0 comment

CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题。它们提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。这不是锦上添花,而恰恰是雪中送炭。

002 · CSS 引用与预编译语言

问题(Question)

  1. CSS 中 link@import 的区别是
  2. CSS 预编译语言有什么用,有哪些
  3. 如何优雅实现 dark 模式

知识回顾

一、CSS @import 与 <link> 标签

  1. <link> 属于 HTML 标签,而 `@import 是 CSS 提供的
  2. 页面被加载的时,<link> 会同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载
  3. import 只在 IE5 以上才能识别,而 <link> 是 HTML 标签,无兼容问题

二、CSS 预编译器

目前主流的 CSS 预编译器有 Less, Scss, Sass, Stylus 等

Less 的基本语法属于 CSS 风格,而 Sass、Stylus 相比之下激进一些,利用缩进、空格和换行来减少需要输入的字符。不过区别在于 Sass、Stylus 同时也兼容 CSS 风格代码。多一种选择在更灵活的同时,在团队开发中也免不了增加更多约定来保持风格统一。而对个人而言,语法风格按自己口味选择即可。

三、如何优雅实现 dark 模式

利用预编译器的变量功能。


-EOF-

Responses