scss八大特性

scss特性

这里主要介绍scss的8个主要特性，希望对大家有所帮助！

---

前言

众所周知css并不能算是一门真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。

sass是最早的css预处理语言，有比less更为强大的功能。但因其一开始的缩进式语法并不能被开发者们接受，所以使用率不高，不过由于其强大的功能和Ruby on Rails 的大力推动，逐渐被更多开发者使用。

sass是采用的Ruby语言编写的一款css预处理语言，它诞生于2007年，是最早成熟css预处理语言。最初它是为了配合haml而设计的，因此有着和haml一样的缩进式风格。

sass从第三代开始，放弃了缩进式风格，并且完全向下兼容普通的css代码，这一代的sass也被称为scss

一、sass与scss的区别：（其实是一种东西）

1. scss是sass3引入的新语法，语法完全兼容css3， 继承了sass的功能

2. scss和sass大部分语法相同，唯一不同的是，scss需要使用分号和花括号，sass是以严格的缩进式语法缩写—换行和缩进

3. 文件扩展名不同

二、八大特性

1.（节点）可嵌套性

类似于标签节点可进行嵌套，使之整体为树形结构。

代码如下（示例）：

div{
wideth:100%;
height:80rpx;
p{
	color:red;
	}
}

2.变量

变量以$开头（通常网站会有基础变量，譬如基础字体，基础色调等，可以将他们赋值给一个变量，以后调用变量就好了，很类似js里的变量）
代码如下（示例）：

$CSS_COLOR :red
div{
color:{$CSS_COLOR}
}

3.Mixins(混合@mixin)

可重用性高，可以注入任何东西

注意点：

1.可以相互调用，但是不能拿自己调用自己，形成递归

2.通过@include引用

代码如下（示例）：

@mixin body{
	width:100%;
	color:red
	}
.html{
	@include body
}

4.@extend

允许一个选择器继承另一个选择器类,似于java中的类继承，一个类可以继承另一个类的方法。

.body{
	width:100%;
	color:red
	}
.html{
	@extend .body
}

5.@function

函数功能，用户使用@function可以去编写自己的函数
使用语法： 使用 @function+函数名称，每个函数都需要有返回值的内容

@function send($a){
	@return $a*2
	}
.cacl{
	width:60 + {send(50)}px
}

6.引用父元素&

在编译时，&将被替换成父选择符

.body{
	width:100%;
	color:red
	}
&::child-add{
	background:blue
}

7.计算功能

可以进行简单的加减乘除运算

.body{
	width:20px + 50px;
	color:red 
	}
}

8.组合连接：#{}

变量连接字符串
$name:liang

body .#{$liang}{
color:red
}

总结

scss在项目配置时选择安装scss即可直接使用，也可以在终端控制台使用命令安装，命令如下：

npm install -g sass

扩展：scss支持文件包导入，导入方式@import 目录名

作者:黎亮亮
日期：2020/10/17 18：47
文章素材来源网络，代码内容原创，创作不易，希望点赞！