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的区别:(其实是一种东西)
-
scss是sass3引入的新语法,语法完全兼容css3, 继承了sass的功能
-
scss和sass大部分语法相同,唯一不同的是,scss需要使用分号和花括号,sass是以严格的缩进式语法缩写—换行和缩进
-
文件扩展名不同
二、八大特性
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
文章素材来源网络,代码内容原创,创作不易,希望点赞!