scss学习笔记

1，嵌套规则

内层样式将外层的样式作为父选择器

  .temp{
    ::v-deep .el-tabs__item{
      padding: 0 30px !important;
    }
    .album{
      height: 160px;
      width: 160px;
      border-radius: 3px;
      display: block;
    }
   } 

2. 用&代表外层的父选择器，如果多层嵌套，最外层的父选择器会一层一层向下传递

  &::v-deep .el-upload {
    flex: 1;
    text-align: left;
  }
}

  &:hover {
    text-align: left;
  }
}

//这种情况下也是idcard被hover
.idCard{
  .el-upload {
  &:hover{
      color:red
      }
  }
}

复合选择器，&作为选择器的第一个字符，其他跟随后缀形成复合选择器

//class的写法u-dropdown__menu__item__arrow--rotate
.u-dropdown {
  flex: 1;
  width: 100%;
  position: relative;

  &__menu {
    @include vue-flex;
    position: relative;
    z-index: 11;
    height: 80rpx;

    &__item {
      flex: 1;
      @include vue-flex;
      justify-content: center;
      align-items: center;

      &__arrow {
        margin-left: 6rpx;
        transition: transform .3s;
        align-items: center;
        @include vue-flex;

        &--rotate {
          transform: rotate(180deg);
        }
      }
    }
  }

属性嵌套：像font-size，font-family这种都以font为命名空间的可以嵌套命名。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

变量：$

//全局变量
$width:200px;
#main {
width:$width;
}

//局部变量变全局变量加上！global
a{
$width:200px !global; 
width:$width;
}
//加了global变全局变量了所以b也能用
b{
width:$width;
}

运算： 支持+, -, *, /, %

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;       // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

需要使用变量用#{}包裹

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

颜色值运算，可以加的和乘但是用不太上

p {
  color: #010203 + #040506;
}
p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

p {
  color: #010203 * 2;
}

字符串运算

p{
cursor:e+ -resize;   //鼠标滑入的时候向东改变尺寸
}

p:before{
content:'s'+b   //左边右引号结果是右引号的
font-family: sans- + "serif" //左边没引号结果没引号
}

表达式跟其他值连用的时候用空格做连接符

p{
margin:3px+2px auto;
}

布尔运算(and、or和not)

$age:20;
.bool{
    @if ($age > 10 and $age <25 ){
    color:pink
    }
}

圆括号可以改变运算顺序

p{
width:1px + (2px * 3)
}

插值语句 #{} 可以再选择器或者属性名使用变量（不好使还不如直接来）

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

！default 如果变量没被赋值过，就会被赋予新的值，有被赋值过，就用之前的值

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content; //content："Non-null content" !default
}

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content; //"First content"
  new-content: $new_content; //"First time reference"
}

@import 将多个scss文件合并到同一个css文件中，被导入文件所包含的变量或混合指令都可以再导入的文件中使用

@import "foo.css"; //单个
@import "rounded-corners", "text-shadow"; //多个
 

用插值语句导入，只能作用于 CSS 的 url() 导入方式

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

要想scss文件不被编译成css文件，加_

@import "_aa.scss"

@import可以被嵌套,但是不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 

假如a.scss包括以下样式
.a{
color:pink;
}

.b {
@import 'a'
}
就会变成
.b .a{
color:pink;
}

@extend 两个有差不多样式的时候可以用继承样式,

.a{
    color:pink;
}
.b{
//但是假如存在.a .c{
display：flex
}这个也会继承给.b
    @extend .a
    font-size:14px;
}

a:hover这种复杂的选择器也可以被继承

a:hover{
   color:pink;
}
.b{
    @extend a:hover
}

多重+继续延申

a:hover{
   color:pink;
}
.b{
    @extend a:hover
    font-size:14px;
}
.c{
    @extend .b
    @extend .a
    width:200px;
  }

@if，@else控制指令，同js的执行逻辑

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

@for同js的执行逻辑，但是@ for $var from <start> through <end> 是表示循环范围包括end @for$var from to 表示循环范围不包括end，且和必须是整数值

    @for $i from 1 to 3 {
    .item-#{$i}{
        width:2px * i
    }
    }

@each去遍历遍历的值列表的每一个项目

    @each $color in pink,white,green{
        .#{$color}-bg{
        background:#{$color}
    }
    }