前端入门23-CSS预处理器(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,并在项目中使用即可,但有几点需要注意:

<head>
    <!--link标签需要设置 rel=stylesheet/less, less.js的加载需要放在所有 link 标签后面-->
    <link rel="stylesheet/less" type="text/css" href="css/src/main.less"/>
    <link rel="stylesheet/less" type="text/css" href="css/src/test.less"/>
    <script src="js/lib/less.js"></script>
</head>

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

而且,用 <script> 标签加载 less.js 的代码需要放在最后,即所有用 link 标签引入 less 文件的后面,因为 less.js 文件加载成功后就会去将 less 转成 css 标准样式,在 <script> 标签后面才用 link 标签引入的那些 less 文件就无法被转换了。

less.js 下载地址:https://github.com/less/less.js/releases

  • 借助 node.js 环境,安装完 less 后,执行 lessc 命令

第一种方式,虽然便捷,但会让页面的渲染多了一个转换步骤,延长页面渲染时长,所以,还可以用第二种方式,直接在本地将 less 转成 css 文件后,项目直接使用转换后输出的 css 文件。

假设你已经在电脑上安装了 node.js 了,如果还没有,先去网上自行搜索下教程,很多,也很快。

首次使用需要先安装 less,打开终端,执行下述命令:

npm install -g less

安装完后,就可以使用 lessc 命令,如:

lessc main.less main.css

这是最简单的用法,将 main.less 文件编译输出 main.css;还有其他高级的用法,比如顺便压缩 css 文件,输出 .min.css 文件等等。

WebStorm配置

我是比较习惯使用第二种方式,也就是在本地就将 less 文件转成 css 文件,项目里是直接使用转换后输出的 css 文件了,而且我用的开发工具是 WebStrom,所以可以借助它,省去了每次自己输命令的操作:

第一步:在项目根目录下执行 npm init -y 初始化项目,初始化完项目后,根目录会生成 package.json 文件;

第二步:打开 package.json,在里面的 scripts 字段,根据你的项目结构,输入脚本命令;

第三步:点击 scripts 旁边的三角形按钮,就可以自动执行脚本命令,完成转换工作;

第四步:(可选)如果嫌每次都需要自己手动点击按钮麻烦,可以将这项工作添加进 File Watcher 功能中,每次文件改动就会自动执行脚本命令,完成转换,具体参考上一篇,或者自行搜索,很简单。

这是例子的项目结构:

src 目录中存放 less 文件,dist 目录中存放转换后输出的 css 文件,所以,我的 package.json 里的脚本命令如下:

具体的脚本命令可根据实际需求,实际项目结构,自行决定。

语法

好了,清楚了 less 文件的两种使用方式后,就可以来学习语法了,这样在学习语法过程中,就可以随时进行转换,查看 less 书写的代码,最终转换的 css 代码是什么样的,这样比较着学习比较容易掌握。

  • 变量

通过 @变量名: 来定义变量,通过 @变量名 使用变量,其实本质上是常量了,如:

@width: 10px;  /*定义变量*/
@height: @width + 10px; /*使用变量,和逻辑语句*/

#header {
  width: @width;  /*使用变量*/
  height: @height;
}

转换成 CSS 文件:

/*定义变量*/
/*使用变量,和逻辑语句*/
#header {
  width: 10px;
  /*使用变量*/
  height: 20px;
}
  • 注释

上个例子中,转换后的注释也还保留着,这是因为 less 和 css 都支持 /* */ 的注释方式,所以这种会保留,但如果是 //,这种只有在 less 中支持,css 不支持,那么这种注释就不会保留,验证下:

/*这是注释1*/
//这是注释2

转换成 css 文件:

/*这是注释1*/

所以,在 less 中使用注释时,需要注意下,哪些是想保留,哪些是不想保留的。

  • Mixins(混合)

也有的文章里翻译成混入,还有的文章直接保留单词,不做翻译,可能是觉得中文翻译不能够很好的表达意思吧。

先说有这么种场景:有时候写在某个选择器中的属性样式,在其他选择器中也需要,所以通常是直接将那部分复制粘贴过来使用。

而 less 的 Mixins 允许你在某个选择器内,直接使用其他选择器内的属性样式,所以中文翻译才有混合,或混入之说,其实也就是将其他的属性样式混合到当前选择器中。

看个例子就明白了:

.class1 {   //类选择器 class1 的属性样式
  width: 10px;
  height: 20px;
}

.class2(@color: #fff) {  //定义了一个模板样式,类似于函数的作用
  background-color: @color;
}

#id1() {  //定义了一个模板样式,类似于函数作用
  border: 1px solid #ff22ff;
}

.mian { 
  .class1; //直接使用其他选择器定义的属性样式
  .class2(#f2f); //使用模板样式,传入参数
  #id1; //使用模板样式,不传参时,括号可省略
}

转换后的 CSS 文件:

.class1 {
  width: 10px;
  height: 20px;
}
.mian {
  width: 10px;
  height: 20px;
  background-color: #f2f;
  border: 1px solid #ff22ff;
}

可以注意对比源代码和转换后的代码,原本就定义好的基本选择器,如 .class1,可直接在其他选择器内通过 .calss1 将它内部的属性样式都复制过来。

也可以在基本选择器后面加上 () 括号,这样一来,这个就会被当做模板处理,作用类似于函数,可接收参数,使用时就类似于调用函数那么使用,如果不传参,调用时也可以将括号省略。既然是作为函数使用,那么它们存在的意义就只是被调用,所以转换后的 CSS 中并不会存在这个函数。

另外,有的文章中,对 Mixins 的解释是说,在 class 中使用 class,但上面的例子中也测试了,class 中也是可以使用其他 id 选择器的属性样式的,所以应该不仅限于 class 类选择器,但不能用于组合选择器中。

  • 命名空间

我对于命名空间的理解:属于 less 自己的命名空间,也就是这些代码并不会在转换后的 CSS 文件中出现,因为它只属于 less。

所以,其实也就是上述例子中,类似函数存在的那些模板选择器,当在书写选择器时,在其后面增加 () 括号,则表示这个选择器只属于 less 的命名空间,转成 CSS 后并不会出现。k

  • 嵌套

在写 CSS 时,组合选择器经常写得很复杂,因为 HTML 里的标签嵌套层次本身就很复杂,而且组合选择器写完也不是能够很明显的表示出它的目的,所以 less 允许依据 HTML 中的嵌套层次来书写,不用去记那么多组合选择器的规则,如:

body {
  font-size: 16px;
  .content {
    .banner {
      ul {
        img {
          width: 700px;
          height: 300px;
          &:hover {
            width: 800px;
            height: 300px;
          }
        }
      }
    }
  }
}

转换成 CSS 文件:

body {
  font-size: 16px;
}
body .content .banner ul img {
  width: 700px;
  height: 300px;
}
body .content .banner ul img:hover {
  width: 800px;
  height: 300px;
}

也就是,子孙后代的组合选择器规则可以不用去记,直接根据 HTML 文档中标签的嵌套层次来书写即可,这样便于后期维护,如果要对某个标签新增某些样式,也知道该去哪里找。

有一点需要注意的是,类似 a:hover 这种伪类选择器,需要加一个 & 符号。

  • 运算

less 允许在代码中进行一些简单的加、减、乘、除基本运算,结合变量的使用,可进行一些字体、颜色等的动态运算效果。

@border: 1px;
@color: #fff;
#header {
  color: @color * 0.5;
  border-width: @border @border*2 @border*3 @border*4;
}

转换成 CSS 后:

#header {
  color: #808080;
  border-width: 1px 2px 3px 4px;
}

通常,变量和运算都是用于对颜色、大小等进行计算。

  • 内置函数

less 内置了一些基础函数,可用于转换颜色、处理字符串、算术运算等,这里列举一些函数:

color("#aaa");  //输出 #aaa, 将字符串的颜色值转换为颜色值
image-size("file.png");  //输出 => 10px 10px,获取图片文件的宽高信息
//image-with("file.png"); image-height("file.png"); 获取图片文件宽高
convert(9s, "ms");  //输出 => 9000ms,单位换算,例如对 m,cm,mmin,pt,pc的换算
@size: if((true), 1px, 0px);  //if函数,第一个参数为条件,满足则返回第二个参数,不满足返回第三个参数
if(not (true), 1px, 0px);     //非语句, not
if((true) and (true), 1px, 0px); //逻辑与语句, and 
if((false) or (true), 1px, 0px); //逻辑或语句, or 

//处理数组
@list: "banana", "tomato", "potato", "peach";
length(@list);  // 输出 => 4
extract(@list, 3);  //输出 => potato,注意第一个不是从 0 开始计算

//类型判断
isnumber(#ff0);  // false
isstring("234"); // true
iscolor(#ff0);   // true
isXXX

...

内置函数很多,用途也很多,覆盖了基本算术运算、逻辑语句、颜色计算、字符串处理等等,需要用时再查手册吧。

  • 作用域

作用域很好理解,就是类似 JavaScript 中的变量作用域,因为在 less 中都是通过 @变量名: 来定义变量的,后定义的会覆盖掉前定义的,但当在不同嵌套层次中定义同一变量时,就存在局部变量和外部变量之分,内部变量并不会覆盖掉外部变量。

而且,less 的变量定义也有类似 JavaScript 中的提前特性,如:

@var: red;

#aaa {
  color: @var;  // yellow,因为后面定义的 @var:yellow 将 @var:red 覆盖掉了
}

#page {
  #header {
    color: @var; // white,内部变量不影响外部变量
  }
  @var: white;
}

@var: yellow;

#ppp {
  color: @var;  //yellow
}

看看转换成 CSS 后:

#aaa {
  color: yellow;
}
#page #header {
  color: white;
}
#ppp {
  color: yellow;
}
  • import(导入)

如果某份 less 文件是可以复用的,那么可以使用 @import 命令将其全部引入使用。

@import "main";

最后在 test.css 里会汇合 main.less 里的代码。

以上,只是介绍 less 的基础语法,还有更多详细、复杂的语法用途,需要时再翻阅文档吧。

Sass(Scss)

Sass 相比于 Less 功能会更强大,但也更复杂。

Sass 和 Scss 本质是一家,Sass 早期版本的文件后缀名是 .sass,从 Sass 3 之后,因为修改了一些特性语法,Sass 更加强大且易使用,从这个版本之后的文件后缀名改成了 .scss,所以 Scss 其实 Sass 的新版本的称呼,但两者本质上没太大区别。

Scss 是基于 Sass 的语法基础上,修改了一部分的语法。比如早期的 Sass 是通过换行和缩进如:

#sidebar
  width: 30%
  background-color: #faa

这种语法格式跟 CSS 不一致,让使用者会很不习惯,Scss 之后就换成用分号和括号了:

#sidebar {
  width: 30%;
  background-color: #faa;
}

使用

Sass 不像 Less 一样可以直接借助 less.js 来进行转换,它是基于 Ruby 运行环境,所以电脑上需要先安装 Ruby,然后才能有办法将 Sass 文件转成 CSS。

Ruby 下载地址:https://rubyinstaller.org/downloads/

因为是 exe 文件,下载完直接按提示安装就可以了,安装后打开终端,执行 gem 命名安装 Sass:

gem install sass

安装完 Sass 后,就可以通过 scss 命令来进行转换工作了,如:

scss main.scss main.css

上述命令中,scss 换成 sass 也可以,但注意,scss 或 sass 命令是基于 Ruby 环境下运行的命令,因为电脑上已经安装过 Ruby 了,也通过 Ruby 安装了 Sass,所以才可以在终端里直接执行 scss 命令。

而类似于 Less 中说到的,WebStrom 可以借助 package.json 里的 scripts 来手动运行脚本命令,这有个前提,就这些脚本命令是运行在 node.js 环境上的,所以如果你直接将上述 scss 命令配置到 package.json 的 script 里,你会发现,是运行不了的。

要解决这个问题,让 WebStrom 能够运行 sass 命令来处理转换工作有两种方式:

  • 直接去 WebStrom 配置 File Watcher,program 选择 Ruby 目录中的 sass.bat 或 scss.bat

这种方式下,每次配置的文件变动时,会自动生成对应的 css 文件,转换工作会自动实时进行。但如果不习惯这种方式,想要每次编写完 scss 代码后,手动来触发转换工作,那么可以选择第二种方式:

  • 通过 npm 命令安装 sass

在终端里执行 npm install -g sass,这样就可以类似配置 less 那样的步骤来使用 sass 命令了,在 package.json 里配置相关命令,然后手动点击脚本的运行即可。

但 npm 安装的 sass 跟在 Ruby 下安装的 sass 是否有和区别,我不清楚,用段时间,如果有啥问题再来说说。

而且,对于选择使用 Sass,刚接触可能会有些困惑,是应该使用哪个后缀名的文件,命令是该用 sass 还是 scss 来进行转换,我也有这个困惑,但感觉好像并没有什么区别,先试着用段时间,以后熟悉了再来讲讲。

最后,Sass 虽然有 .sass.scss 两种后缀名的文件,但建议使用 .scss,因为前者的语法跟 CSS 很不一样,使用起来会有些不习惯,当然如果你有 Ruby 基础的话,可能会比较喜欢这种。我个人会选择后者。

语法

语法方面,大部分类似于 Less,但就细节方面可能有些不一样,还有,支持更多更强大的功能吧。

上面介绍的 Less 的基础语法、基础功能,Sass 也基本全部支持,也差不了多少,所以下面就不一个个来介绍了,详细的到开头声明部分给的中文网链接中去查阅即可。

下面就主要列一些不同的地方:

  • 变量

Sass 中的变量用 $变量名: 定义,用 $变量名 使用,其余跟 Less 差不了多少。

  • 作用域

Less 中的变量分局部作用域和全局作用域,但在 Sass 中,不同版本,作用域范围并不一样,摘抄一段原文中描述:

Sass 中变量的作用域在过去几年已经发生了一些改变。直到最近,规则集和其他范围内声明变量的作用域才默认为本地。如果已经存在同名的全局变量,则局部变量覆盖全局变量。从 Sass 3.4 版本开始,Sass 已经可以正确处理作用域的概念,并通过创建一个新的局部变量来代替。

  • 条件语句

Less 中并不支持条件语句,当然,可以通过内置函数 if 以及 and,or,not 这些来模拟条件语句。

在 Sass 中是支持条件语句的,但也不是像其他编程语言直接 if 这样通过保留字来编写,需要加个 @ 符合,如:

@if $support-legacy {
  // …
} @else {
  // …
}

教程中给了几条准则要求:

  • 除非必要,不然不需要括号;
  • 务必在 @if 之前添加空行;
  • 务必在左开大括号({)后换行;
  • @else 语句和它前面的右闭大括号(})写在同一行;
  • 务必在右闭大括号(})后添加空行,除非下一行还是右闭大括号(}),那么就在最后一个右闭大括号(})后添加空行。

另外,教程中也说了:

除非你的代码中有偏复杂的逻辑,否则没必要在日常开发的样式表中使用条件语句。实际上,条件语句主要适用于库和框架。

其他区别,等用段时间,熟悉了再来讲讲。

框架-Compass

Sass 有一点比 Less 有优势的就是,目前有很多稳定且热门的基于 Sass 编写的框架库,比如:CompassBourbonSusy 等。

这些框架库就类似于 jQurey 和 JavaScript 关系,对 Sass 进行了一层封装,让编写 Sass 代码的人,可以极为简便的开发,我还没用过,就不过多介绍了。


大家好,我是 dasu,欢迎关注我的公众号(dasuAndroidTv),公众号中有我的联系方式,欢迎有事没事来唠嗑一下,如果你觉得本篇内容有帮助到你,可以转载但记得要关注,要标明原文哦,谢谢支持~


dasuAndroidTv2.png
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容