css 预处理器 less sass

1. less

Less（代表 Leaner Style Sheets）是一个向后兼容的 CSS 语言扩展。这是 Less 语言和 Less.js 的官方文档，Less.js 是一种将您的 Less 样式转换为 CSS 样式的 JavaScript 工具。

1.1 less 的安装

首先需要安装 node 环境

使用npm安装

npm install less -g

1.2 less用法

1.2.1 命令行用法

将 bootstrap.less 编译为 bootstrap.css

lessc bootstrap.less bootstrap.css

1.2.2 变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

输出

#header {
  width: 10px;
  height: 20px;
}

1.2.3 混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

此时, 类的属性.bordered现在将同时出现在#menu a和.post a中。

1.2.4 嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

您还可以使用此方法将伪选择器与您的 mixin 捆绑在一起。这是经典的 clearfix hack，重写为 mixin（&代表当前选择器父级）：

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

诸如@mediaor之类的规则@supports可以以与选择器相同的方式嵌套。at 规则位于顶部，并且与同一规则集中的其他元素的相对顺序保持不变。

这称为冒泡。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

输出：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

2. Sass

2.1 Sass简介

大家都知道，js 中可以自定义变量，而css 仅仅是一个标记语言，不是编程语言，因此不可以自定义变量、不可以引用等等。

面对这些问题，我们现在来引入 Sass，简单的说，他是 css 的升级版

相比较于 less, Sass比Less的功能更强大，也更复杂。

2.1.1 Sass 的定义

Sass：英文是 Syntactically Awesome Stylesheets Sass。最早由 Hampton Catlin 开发和设计。 一种帮助你简化 CSS 工作流程的方式，帮助你更容易维护和开发 CSS 内容。

官网是：https://sass-lang.com/

Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。

Sass专注的是怎样创建优雅的样式表，而不是内容。

2.1.2 Sass、Compass与CSS

关系：

• Less/Sass是语法、Compass是框架、CSS是目标。

Sass&Compass的好处：

• 写出更优秀的CSS。

• 解决CSS编写过程中的痛点问题，比如精灵图合图、属性的浏览器前缀处理等。

• 有效组织样式、图片、字体等项目元素。

2.2 Sass 的安装

2.2.1 安装Ruby（windows环境）

sass引擎是用Ruby语言开发的（但是两者的语法没有关系），因此在安装 Sass 前，需要先安装Ruby（mac下自带Ruby无需再安装Ruby）。

下面来讲一下 Windows 下的安装Sass的步骤。

下载地址：http://rubyinstaller.org/

选择你需要的版本

不一定能下载成功 ~ ~ ~

然后进行安装

安装时，记得勾选“环境变量”：

勾选 Add Ruby executables to your PATH !important;

安装完ruby之后，在命令行中输入ruby -v，查看ruby的的版本：

ruby -v

2.2.2 Sass的安装

安装完 ruby 之后，在开始菜单中，找到刚才我们安装的 ruby ，打开Start Command Prompt with Ruby。输入gem install sass安装Sass。

Ruby 是使用 gem 来管理它的各种包（比如Sass）。我们安装好ruby之后，gem会自动安装上；类似于，我们安装完node之后，npm也自动安装好了。

输入如下命令安装Sass：

如果mac下输入这个命令时没有权限，则需要在前面加上 sudo

	gem install sass        

系统会自动安装上最新版本的Sass。

查看sass版本的命令为:

	sass -v

升级sass版本的命令为：

	gem update sass

你也可以运行帮助命令行来查看你需要的命令：

	sass -h

安装完sass之后，我们在main.scss中写一些代码，然后输入如下命令，就可以将scss文件转化为css文件：

	sass main.scss main.css

2.3 Compass 简介和安装

然而，真正的项目开发中，我们不一定是直接使用 sass 命令，而是使用 Compass。

官网是：http://compass-style.org/。

Compass 安装

输入如下命令安装 Compass：

	gem isntall compass

输入如下命令查看版本：

	compass -v

compass可以直接用来搭建前端项目的样式部分，但并不是常用的方法。

通过 Compass 创建工程目录：

cd workspace

compass create CompassDemo

文件结构如下：

为了能够让文件实时编译，我们可以通过 copass watch 监听sass文件的变化：

	cd CompassDemo

	compass watch

当.scss文件改动时，会自动生成对应的.css文件。

2.4 Sass 语法

2.4.1 两种后缀名（两种语法）

sass 有两种后缀名文件：

（1）.sass：对空格敏感。不使用大括号和分号，所以每个属性之间是通过换行来分隔。

比如：

h1
	color: #000
	background: #fff

这种语法是类ruby的语法，和CSS的语法相比，相差较大。所以，在3.0版本中就引入了.scss的语法。

（2）.scss：是css语法的超集，可以使用大括号和分号。

比如：

h1 {
	color: #000;
	background: #fff;
}

注意：一个项目中可以混合使用两种语法，但是一个文件中不能同时使用两种语法。

两种格式之间的转换：

我们在工程目录下新建main.scss，输入如下代码：

*{
    margin: 0;
    padding: 0;
}

然后输入如下命令，就可以将上面的main.scss转化为main.sass：

	sass-convert main.scss main.sass

打开生成的main.sass，内容如下：

*
  margin: 0
  padding: 0

2.4.2 变量语法

Sass 是通过$符号来声明变量。

（1）我们新建一个文件_variables.scss，这个文件专门用来存放变量，然后在其他的文件中引入_variables.scss即可。

因为这个文件只需要存储变量，并不需要它编译出对应的 css 文件，所以我们给文件名的前面加了下划线，意思是声明为局部文件。

我们在这个文件中，声明两个字体变量：

$font1: sans-serif;

$font2: Arial, sans-serif;

（2）新建文件main.scss，在里面引入步骤（1）中的变量文件：

// 引入变量文件
@import "variables";    

.div1{
    font-family: $font1;
}

.div2{
    font-family: $font2;
}

基于 Sass 的既定规则：

• 没有文件后缀名时，Sass 会自动添加 .scss 或者 .sass 的后缀（具体要看已经存在哪个后缀的文件）。

• 同一目录下，局部文件和非局部文件不能重名。

对应生成的main.css文件如下：

main.css

/* line 9, ../sass/main.scss */
.div1 {
  font-family: Braggadocio, Arial, Verdana, Helvetica, sans-serif;
}

/* line 13, ../sass/main.scss */
.div2 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

2.4.3 注释语法

单行注释：

//我是单行注释

块级注释：

/*
	我是块级注释
*/

二者的区别是：单行注释不会出现在自动生成的css文件中。

2.4.4 预处理 watch

您还可以使用该 --watch标志查看单个文件或目录。

watch 标志告诉 Sass 监视源文件的更改，并在每次保存 Sass 时重新编译CSS 。如果您想查看（而不是手动构建）您的input.scss文件，您只需将 watch 标志添加到您的命令中，如下所示：

sass --watch input.scss output.css

您可以通过使用文件夹路径作为输入和输出并用冒号分隔它们来监视和输出到目录。在这个例子中：

sass --watch app/sass:public/stylesheets

Sass 会监视文件夹中所有文件的更改，并将 app/sass 编译到 文件夹 public/stylesheets

2.4.5 嵌套

在编写HTML时，您可能已经注意到它具有清晰的嵌套和可视层次结构。另一方面，CSS没有。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS 输出
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

2.4.6 模块

@use您可以根据需要使用规则将其拆分。

此规则将另一个 Sass 文件作为模块加载，这意味着您可以在 Sass 文件中使用基于文件名的命名空间来引用它的变量、mixins和函数。

// base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

注意, @use 'base’在styles.scss文件中使用, 不需要包含文件base的扩展名。

2.4.7 扩展/继承

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

上面的代码所做的是告诉.message, .success,.error和.warning表现得像%message-shared. 这意味着任何%message-shared出现的地方，.message, .success, .error, & .warning也会出现。

避免在HTML 元素上编写多个类名。