前端入门23-CSS预处理器(Less&Sass)

声明

本篇内容梳理自以下几个来源:

  • Github:smyhvae/web
  • Bootstrap网站的 less 文档
  • Sass中文网

感谢大佬们的分享。

正文-CSS预处理(less&Sass)

CSS预处理

什么是 CSS 预处理?为什么要有 CSS 预处理?

这里就讲讲这两个问题,写过 CSS 应该就会比较清楚,虽然我才刚入门,但在写一些练手时就已经有点感觉了:写 CSS 后,很难维护,维护基本要靠注释来,而且由于 HTML 文档中标签的嵌套层次复杂,导致写 CSS 的选择器时也很费劲,尤其是在后期为某部分标签新增样式时,总会不知道到底应该在 CSS 文件中哪里写这个选择器,这个选择器是否会与前面冲突。

最有感觉的一点是,CSS 代码基本没法复用,一个页面一份 CSS,每次都需要重写,只是很多时候,可以直接去旧的里面复制粘贴。

有这么些问题是因为 CSS 本身并不是一门编程语言,它只是一个标记语言,静态语言,不具备编程语言的特性,所以写容易,但维护会比较难。

这个时候,CSS 预处理器就出现了,其实应该是说 Sass 和 Less 这类语言出现了。

Sass 和 Less 这类语言,其实可以理解成 CSS 的超集,也就是它们是基于 CSS 原本的语法格式基础上,增加了编程语言的特性,如变量的使用、逻辑语句的支持、函数等。让 CSS 代码更容易维护和复用。

但浏览器最终肯定是只认识 CSS 文件的,它并无法处理 CSS 中的那些变量、逻辑语句,所以需要有一个编译的过程,将 Sass 或 Less 写的代码转换成标准的 CSS 代码,这个过程就称为 CSS 预处理。

所以,CSS 预处理器其实只是一个过程的称呼,主要工作就是将源代码编译并输出标准的 CSS 文件,而这个源代码可以用 Sass 写,也可以用 Less,当然还有其他很多种语言。

那么,到底哪一种语言好,我还没能力来讨论,反正存在即有理,每种语言总它的优缺点、总有它的适用场景。

下面,主要就来介绍下其中的两种语言:Less 和 Sass。

我觉得,掌握 CSS 预处理的关键,其实也就两点,一是掌握语言的语法、二是清楚怎么编译成标准的 CSS 文件;语法基本都不会很难,编译一般需要配置一些环境,因为我使用的开发工具是 WebStrom,所以会介绍下 WebStrom 上的配置。

Less

使用

Less 写的 CSS 文件后缀名为 .less,但浏览器并不认识 less 文件,所以最后需要转换成 css 文件,有两种方式:

  • 借助 less.js,程序运行期间,浏览器会自动借助 less.js 来解析 less 文件内的代码,转成 css 标准语法

这种方式,不需要配置任何其他环境,只需要下载 less.js,并在项目中使用即可,但有几点需要注意:


    
    
    
    

HTML 文档通过 link 标签引入 less 文件时,需要将 link 标签的 rel 属性设置为 stylesheet/less,否则无效;

而且,用

你可能感兴趣的:(前端入门23-CSS预处理器(Less&Sass))