CSS预处理语言—sass与less的使用

前端学苑
2,281 阅读8分钟

一、CSS预处理器

学过CSS的人都知道，它不是一种编程语言。CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。

body {
	background: #fff;
  font-size: 12px;
  color: #666;
}

很自然地，有人就开始为CSS加入编程元素，基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。这叫做"CSS预处理器"。

1、css使用的缺点

1）css语法不够强大，因为无法嵌套导致有很多重复的选择器；

2）没有变量和合理的样式复用机制，导致逻辑上相关的属性值只能以字面量的形式重复输出，难以维护。

2、css预处理器定义

为css增加编程特性的拓展语言，可以使用变量、简单逻辑判断、函数等基本编程技巧；

用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用。

说明：css预处理器编译输出还是标准的css样式。

3、css预处理器带来的好处

1）css代码更加整洁，更易维护，代码量更少；

2）修改更快，基础颜色使用变量，一处动处处动；

3）常用代码使用代码块，节省大量代码；

4）css嵌套减少了大量的重复选择器，避免一些低级；

5）变量、混入大大提升了样式的复用性；

6）额外的工具类似颜色函数 (lighten，darken，transparentize等等)，mixins，loops，这些方法使css更像一个真正的编程语言，让开发者能够有能力生成更加复杂的css样式。

二、Sass与Less预处理器

1、Sass与Less介绍

Sass、Less、Stylus都是动态的样式语言，是css预处理器，css上的一种抽象层。他们是一种特殊的语法/语言而编译成css。

**Sass：**是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass官网地址：www.sass.hk/

**Less：**是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

LESS的官网： less.bootcss.com/

2、Sass与Scss是什么关系?

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

3、Sass与Less区别

1、实现方式

1）Less是基于JavaScript，是在客户端处理的。

2）Sass是基于Ruby的，是在服务器端处理的。

2、变量

1）sass 是以开头定义的变量，如：开头定义的变量，如：mainColor: #963;

2）less 是以@开头定义的变量，如 @mainColor: #963;

4、Sass与Less相同之处

Less和Sass在语法上有些共性，比如下面这些：

1）混入(Mixins)——class中的class；

2）参数混入——可以传递参数的class，就像函数一样；

3）嵌套规则——Class中嵌套class，从而减少重复的代码；

4）运算——CSS中用上数学；

5）颜色功能——可以编辑颜色；

6）名字空间(namespace)——分组样式，从而可以被调用；

7）作用域——局部修改样式；

8）JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

三、Sass与Less常用规范

1、变量

Sass 的变量必须是 $ 开始，然后变量名和值使用冒号隔开，跟 CSS 的属性一致:

例如：

$mainColor: #0982c1; 
$siteWidth: 1024px; 
$borderStyle: dotted; 
body {
    color: $mainColor;
    border: 1px $borderStyle $mainColor;
    max-width: $siteWidth;
}

而 Less 的变量名使用 @ 符号开始：

例如：

@mainColor: #0982c1;
@siteWidth: 1024px; 
@borderStyle: dotted; 
body {
    color: @mainColor;
    border: 1px @borderStyle @mainColor;
    max-width: @siteWidth; 
}

// 编译成功后的css为：

body {
    color: #0982c1;
    border: 1px dotted #0982c1;
    max-width:  1024px;
}

2、嵌套

1）选择器嵌套

选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了文件的结构性和可读性。在选择器嵌套中，可以使用&表示父元素选择器。

#content {
    article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
    }
    aside { background-color: #EEE } 
}

// 编译成功后的css为：

#content article h1 { color: #333 } 
#content article p { margin-bottom: 1.4em } 
#content aside { background-color: #EEE }

2）属性的嵌套

属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

nav {
    border: {
        style: solid;
        width: 1px;
        color: #ccc; 
      }
}

// 编译成功后的css为：

nav {border：1px soild #ccc;}

3、Mixins (混入)

sass样式中声明Mixins时需要使用“@mixin”，然后后面紧跟Mixins的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。可以重用的代码块。

Sass 混入语法：

/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */
@mixin error($borderWidth: 2px) {
    border: $borderWidth solid #F00;
    color: #F00; 
}

 .generic-error {
    padding: 20px;
    margin: 4px;
    @ include error(); /* Applies styles from mixin error */
} 

.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    @ include error(5px); 
    /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

混合关键词传参

//编译前
@mixin button-variant($color, $background, $border) {
  color: $color;
  border: 1px solid $border;
  background-color: $background;
}
.block{
  @include button-variant( $background:#fff,$color:red, $border:red)
}

超出省略号 （与项目结合）

// ****** 超出省略号
@mixin ellipsis($line) {
  display: -webkit-box;
  -webkit-box-orient:vertical;
  overflow: hidden;
  -webkit-line-clamp: $line;
}

.tit-name {
  @include ellipsis(1);
  color: #333;
}

在LESS中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。

Less CSS 混入语法：

/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */ 
.error(@borderWidth: 2px) {
    border: @borderWidth solid #F00;
    color: #F00; 
} 

.generic-error {
    padding: 20px;
    margin: 4px;
    .error(); /* Applies styles from mixin error */ 
} 

.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    .error(5px); 
/* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

// 编译成功后的css为：

.generic-error {
    padding: 20px;
    margin: 4px;
    border: 2px solid #f00;
    color: #f00; 
} 
.login-error {
    left: 12px;
    position: absolute;
    top: 20px;
    border: 5px solid #f00;
    color: #f00 ; 
}

4、继承

sass的继承：@extend

//sass style 
h1{
border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
	border: 4px solid #ff9aa9;
}
.speaker{
	border-width: 2px;
}

less的继承：类似于mixins

//less style
.block {
    margin: 10px 5px;
    padding: 2px; 
} 

p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee; 
} 
ul,ol {  
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

5、函数

最好的例子应该是 REM 布局中的 px2rem 函数了。（移动端开发）

@function px2rem ($px) {
  $rem : 37.5px;
  @return ($px / $rem) + rem;
}

.hello {
	width: px2rem (100px);
	height: px2rem (100px);
	&.b {
    width: px2rem ( 50px);
    height: px2rem (50px);
	}
}

四、Sass与Less，选择Sass

为什么选择使用Sass而不是Less？

1、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation。

2、就国外讨论的热度来说，Sass绝对优于LESS。

3、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。

4、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护。

5、同时还有Scss对sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。

五、项目实战配置

*安装编译

1、Vue-cli3.x 如何进行sass操作

1）安装sass操作的依赖：安装node-sass 和 sass-loader

npm install --save-dev node-sass；
npm install --save-dev sass-loader；

2）在需要使用sass地方的组件中直接使用:

 <style lang = "scss" scoped>
		// 列表布局 （二列）
	.home-list {
    display: flex;
    flex-wrap: wrap;
  	p {
      width: 50%;
      margin: 0px;
      padding: 0px;
    	span {
      	text-align: left;
    	}
  }
}
</style>

*说明：vue inspect 查看当前项目默认的webpack配置信息 （重要）

2、webpack 配置

VSCode扩展，可通过实时浏览器重新加载来帮助您实时将SASS / SCSS文件编译/转换为CSS文件。

npm install -D sass-loader node-sass style-loader css-loader

module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader','css-loader','sass-loader'],
        exclude: /node_modules/
      }
    ]
}

loader 的执行顺序是从右向左执行的，执行顺序为: sass-loader > css-loader > style-loader。

原理：其实为啥是从右往左，而不从左往右，只是Webpack选择了compose方式，而不是pipe (从左到右)的方式而已，在技术上实现从左往右也不会有难度。

说明：

整理 node-sass 安装失败的原因及解决办法

1）解决方法一：使用淘宝镜像源（推荐）

2）解决方法二：使用 cnpm

3）mac电脑操作：

sudo npm install node-sass --unsafe-perm --save-dev

3、vue-cli3 assets目录下的SASS文件中添加背景图片报错

Module not found: Error: Can't resolve './@/assets/images/login.png'

*解决办法：background: url('~@/assets/images/login.jpg');

六、css预处理器市场分析

**三大预处理器（Sass、Less、Stylus）**中，Sass 满意度最高，其他两者相对较低，其中很大一部分人转投了后处理器 PostCSS 的阵营。 Sass 社区的 LibSass 宣布已弃用，不再支持新的功能的开发，LibSass 和 node-sass 将在最大努力的基础上继续无限期维护，包括修复主要的错误和安全性问题，并保持与最新版本的 Node.js 相兼容；

osc开源社区

调查显示，使用Sass作为CSS预处理工具的受访者最多，占66%，使用Less 的次之，占13.41%，还有一小部分受访者（4.21%）使用Stylus。另外，有13.5%的受访者在编写CSS时不使用任何CSS预处理工具。这反映 出CSS后处理对前端开发人员而言是一个非常新的领域。

Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代

随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。

先抛出一个令人开心的结论，新的 CSS 编写和构建方式让 Facebook 的主页减少了 80% 的 CSS 体积。

相关地址：

1）数据来自 The State of CSS 2020

2020.stateofcss.com/zh-Hans/

2）2020 前端技术发展回顾 （分析报告）

ii066.cn/qwtnbC

七、sass小工具

为了方便演示，你可以将示例代码直接在线转译：www.sassmeister.com/

sass在线转换： www.sass.hk/css2sass/

avatar
文章
阅读
粉丝