SCSS用法汇总

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。由于 SCSS 是 CSS 的扩展，因此，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。这里简单做下SCSS用法汇总，基本可以满足开发需求。想要了解更多请查看官网：https://www.sass.hk/

1、变量

使用$去声明变量，通过变量来存储需要再css中复用的信息。

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的开头是父元素时也可以使用


    123


.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;
  }