SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。这里简单做下SCSS用法汇总，基本可以满足开发需求。想要了解更多请查看官网：https://www.sass.hk/
1、变量
使用$去声明变量，通过变量来存储需要再css中复用的信息。
<style lang='scss' scoped>
$bg_color:red;
.container{
width: 20px;
height: 20px;
background-color: $bg_color;
}
</style>
2、嵌套
以嵌套的方式使用css，简单来说就是父级元素包子级元素。
.container {
.clock{
position: relative;;
text-align:center;
}
}
3、引入
@import '位置/文件名' ： 引入.scss文件，实现将多个.scss文件合并成一个
可以引入样式代码，也可以引入变量覆盖原有变量
(1) 引入样式代码
例如a.scss
.inter{
width: 10px;
height: 10px;
background-color:$inter_color1;
}
b.scss
$bg_color:red;
$inter_color:green;
$inter_color1:blue;
.container{
width: 20px;
height: 20px;
background-color: $bg_color;
}
.inter1{
width: 10px;
height: 10px;
background-color:$inter_color;
}
@import 'a';
(2) 引入变量,此时存在inter类的dom元素显示蓝色
a.scss
$inter_color:blue;
b.scss
$bg_color:red;
$inter_color:green;
.container{
width: 20px;
height: 20px;
background-color: $bg_color;
}
@import 'a';
.inter{
width: 10px;
height: 10px;
background-color:$inter_color;
}
备注：与css3中的引入不同，@import url('a')需要加载；而sass的@import则不需要加载
我们可以将公共变量放在一个.scss中，使样式代码更加清晰。
4、混合(Mixin)
用于分组需要在页面中复用的css声明，通过向Mixin传递变量参数让代码更加灵活
声明：@mixin 名字(变量)
@mixin divStyle($divWidth, $divHeight, $divColor) {
width: $divWidth;
height: $divHeight;
background-color: $divColor
}
调用：@include 名字(数值)
.divView {
@include divStyle(80px, 50px, blue)
}
该情况多用于某些样式适配多浏览器上，例如
@mixin transopacity($opactity) {
transition: $opactity ;
-webkit-transition: $opactity;
-ms-transition: $opactity;
-moz-transition: $opactity;
-o-transition: $opactity;
}
.segment {
background:$viewColor;
border-radius: $ledThick / 2;
position:absolute;
opacity:0;
@include transopacity(opacity 0.2s)
}
5、继承(@extend)
使用@extend在选择器之间复用css属性，避免产生冗余代码
// 该代码没有被继承，不会输出到css中
%box-other {
border: 1px solid #000;
}
// 该代码被继承，会输出到css中
%box-common {
border: 1px solid green
}
.box1 {
@extend %box-common ;
width:50px;
height: 50px;
}
.box2 {
@extend %box-common ;
width: 100px;
height: 200px;
}
6、操作符
sass提供了标准的算术运算符，例如 +、-、*、/、%
.separator_1{
@extend %separator_common;
top: $ledPadding + $ledThick + $ledWidth /2;
}
7、引用父级 &
“&” 会使用父级选择器替换全部出现的位置
(1) 伪类选择器使用场景
.container {
width: $width;
height: $height;
background-color: $bg_color;
&:hover {
background-color: $inter_color
}
}
(2)当子类元素class的开头是父元素时也可以使用
<div class="container">
<div class="container_divView">123</div>
</div>
.container {
width: $width;
height: $height;
background-color: $bg_color;
&_divView {
font-size:20px
}
}
8、嵌套属性
类似于font-family,font-size,font-weight，他们拥有相同的头部font,完全可以书写成
font: {
family: fantasy;
size: 30em;
weight: bold;
}
