Scss

作用

1. 是一个css的预编译工具
2. 依旧要转换为css在浏览器中运行

安装插件

1. easy sass
   • 自动把sass文件转化为纯css

基本知识

1. 扩展名: sass scss
   • sass 学习成本高
   • scss
2. scss 保存后会生成.css / .min.css文件
3. 空格要注意

语法

变量

// .scss
$color:blue;
.box {
    background: $color;
}

• 在选择器上#{$item}

计算 + - * /

// .scss
$width: 100px;
.footer {
    width: $width*2;
    heigth: $width/2;
}

分支语句

if else

$isShowTab: false;
@if ($isShowTab == true) {
    .banner {
        color: red;
    }
}

@else {
    .banner {
         color: blue;
     }
}

$isRed: true;

div {
    width: 100px;
    @if(isRed == true) {
        background: red;
    }
    @else {
        background: blue;
    }
}

循环

for

• from 1 to 5 => 1,2,3,4
• from 1 through 5 => 1,2,3,4,5
• ``

@for $item from 1 to 5 {
    li:nth-child(#{$item}){
        position: absoulte;
        left: ($item - 1) * 100px;
        top:($item -1) * 100px;
    }
}

each

• @each $item in $colors item代表colors中的元素
• $index: index($colors,$item) 下标

$colors: red, green, yellow;
@each $item in $colors {
    $index: index($colors,$item)
    li:nth-child(#{$index}) {
        background: $item;
    }
}

函数

• @funtion @return

@function 函数名(变量) {
    @return 输出px;
}
$b: 1px;
$c: 2;
@function change($a) {
    @return #{$a / $b * $c}px;
}

数组

$colors: red, green, yellow;

混入css

• 复用,封装css@minxin

@minxin meimei {
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
}

.box {
    @include meimei
}

.box1 {
    @include meimei
}

• 传参

@minxin meimei($a, $b) {
    transition: $a $b;
    -webkit-transition: $a $b;
    -moz-transition: $a $b;
}

.box {
    @include meimei
}

.box1 {
    @include meimei
}

• 参数有默认值

@minxin meimei($a:all, $b:1s) {
    transition: $a $b;
    -webkit-transition: $a $b;
    -moz-transition: $a $b;
}

.box {
    @include meimei
}

.box1 {
    @include meimei
}

嵌套

• 对比 上css 下scss

//原始css
div {
    width: 100px;
    height: 100px;
}

div p {
    width: 50px;
    height: 50px;
}

div p span {
    width:10px;
    heigth:10px;
}


//scss嵌套写法
div {
    width: 100px;
    height: 100px;
    p {
        width: 50px;
        height: 50px;
        span {
            width: 10px;
            height: 10px;
        }
    }
}

ul > li {
    background: red;
}


ul {
    > li {
        background: red;
    }
}

ul li:hover {
    background: yellow;
}

ul {
    li {
        &:hover {
            background: yellow;
        }
    }
}

继承

• 无法实现传参
• 父类子类都存活下来

//css
.base,.btn_primary,.btn_defualt {
    width: 100px;
    height: 100px;
    outline: none;
}
.btn_primary {
    background-color: green;
}
.btn_defualt {
    background-color: red;
}

//scss
.base {
    width: 100px;
    height: 100px;
    outline: none;
}
.btn_primary {
    @extend .base;
    background-color: green;
}
.btn_defualt {
    @extend .base;
    background-color: red;
}

导入公共文件

• @iport './xxx.scss'

// ./xxx.scss
$color: blue;
$bg: red;

@import './xxx.scss'

.box {
    color: $color;
    background-color: $bg;
}

:export {}

• scss 中公共变量的导出方法

// XXX.scss
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5;

$menuBg:#304156;
$menuHover:#263445;

$subMenuBg:#1f2d3d;
$subMenuHover:#001528;

$backWhite:#ffffff;

$sideBarWidth: 210px;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  backWhite: $backWhite;
}

// .vue
@import "@/styles/XXX.scss";

.main-container {
   min-height: 100%;
   transition: margin-left .28s;
   margin-left: $sideBarWidth;
   position: relative;
 }