一、什么是scss?
1、scss
和less类似, sass 也是一种 CSS 的预编译语言
它提供了 变量、嵌套、 混合、 函数等功能,并且完全兼容 CSS 语法
Scss 官方文档:https://www.sass.hk/
2、 scss 和 sass 的区别
sass从第三代开始,放弃了缩进式风格,并且完全向下兼容普通的css代码,这一代的sass也被称为scss
sass 和 scss 其实是一样的
css预处理语言
sass 版本 3.0 之前的后缀名为 .sass ,而版本 3.0 之后的后缀名. scss
二、基本使用
1、easy sass插件
为了方便使用scss,可以在VScode中安装一个插件,可以帮助我们将scss文件转化为css
插件:easy sass
2、定义变量
scss使用 $
符来标识变量
// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;
3、使用变量
// scss语法
#app {
background-color: $highlight-color;
border: $basic-border;
}
4、变量范围
与css属性不同,变量可以在css规则定义之外存在。
当变量定义在css规则块内,那么该变量只能再次规则块内使用;如果它们出现在任何形式的{...}
块中(如@media或@font-face块),情况如下
// scss语法
$nav-color :#f90;
nav {
$width:100xpx;
width: $width;
color:$nav-color;
background-color: black;
}
编译后
nav {
width: 100px;
color: #f90;
background-color: black;
}
总结:
在上面的代码中,$nav-color
这个变量定义在规则块的外边,所以这个样式表中都可以像 nav
规则块那样引用它
$width
这个变量定义在nav的{ }
规则块内使用,所以它只能在nav
规则块内使用,这意味着我们可以在样式表的其他地方定义和使用$width
变量,不会对nav造成影响
5、嵌套语法
转换前
// scss语法
$highlight-color: #f90;
$basic-border: 1px solid black;
#app{
background-color: $highlight-color;
border:$basic-border;
.container{
font-size:30px;
}
}
转换之后
#app {
background-color: #f90;
border: 1px solid black;
}
#app .container {
font-size: 30px;
}
6、父选择器
假如你想针对某个特定子元素 进行设置
a {
color:blue;
&:hover {
color: red;
}
}
7、scss与less区别
我们可以发现scss和less有很多相似之处,最大的区别就是在于声明变量的方式不同:
less采用的是@变量名,而less采用的是$变量名