scss学习笔记

跳过安装是在工程化项目中使用的

1.定义公共变量在其他标签内可引用此样式

    /*定义公共变量可在其他标签内容中使用*/
    $commColor:blue;
    $borderCommon:1px solid red;
    .firstPage{
        color:$commColor;
        border: $borderCommon;
    }

2.标签嵌套的使用及&代替父级标签名称的使用

    #nav{
        /*在这里&是代表父级名称就是#nav
       注解：&-text等于#nav-text
     */
        &-text{
            color:green;
            font-weight: bolder;
        }
        //&:hover等于#nav:hover
        &:hover{
            transform: scale(2);
        }
        .navSmall{
          //&Xiuer等于.navSmallXiuer
            &Xiuer{
                color:yellow;
                font-size:20px;
            }
        }
    }

3.嵌套属性

    .fcc{
        &Second{
          
            font:{
                weight: bolder; //注解:font中写weight等于font-weight:bolder;
                size: 20px;     //注解:font中写size等于font-size:20px;
                style: italic;  //注解:font中写style等于font-style:italic;
            }

            border: 2px solid purple {
                bottom:0;         //注解:bottom等于border-bottom:0;
                right:0;          //注解:right等于border-right:0;
            }
        }
    }

4.混合选择器

    @mixin xiuer {
        background-color: #ff1a7d;
        border: 10px solid #cdffba {
            radius: 50%;
        }
    }
    .bigBall{
        @include xiuer; //这里是用@include引用混合选择器@mixin的xiuer这个名称，从而在此类中使 
                          用xiuer这个选择器中定义的样式
        width:50px;
        height:50px;
    }

4.2混合选择器的传参

@mixin xiuerTry($second,$firsts){
    border:$xiuerss 1px solid;
    font-style:$firsts;
}
#cc{
  @include xiuerTry(#e5e5e5,italic);//等于border:#e5e5e5 1px solid;font-style:italic;
}

5继承的用法

 #cc{
        background:blue;
        width:100px;
        height:100px;
    }
.actived{
        @extend #cc;
     }    

//等于将#cc中的样式给了.actived

6.在正常项目开发中引入的scss文件如果引入多个是非常耗费性能的，所以可以引用一个scss，所以怎么作呢？

可以在创建一个要被引用scss的时候起名称的时候前面加_下划线，之后在总的scss中引用这个scss 

@import  'scss文件名称'   //注意文件名称不加下划线，这样作则减少了性能的损耗

7.颜色函数hsl

//设置颜色
//值分别是$hue,$saturation,$lightness  
$base-color:hsl(63,100%,73%) //色相，饱和度，亮度

//值分别是$hue,$saturation,$lightness $alpha
$base-colorO:hsla(63,100%,73%,.8)//色相，饱和度，亮度，透明值

//让颜色更亮
$light-color:lighten($base-color,30%)

//让颜色更暗
$light-color:darken($base-color,20%)

//增加颜色饱和度
$saturate-color:saturate($base-color,50%);
//减少颜色饱和度
$desaturate-color:desaturate($base-color,90);

//正式使用,举例其他使用方式都一样
.userColor{
    background:$saturate-color;
    color:$base-colorO; 
   
}

8.@if的使用

$them:dark;
//用这个函数来判断
.firstTag{
    @if $them==dark{
        background:#000000;
    }@else if $them==light{
        background:#ebde56;
    }@else{
        color:skyblue;
    }

}

9.@for的使用

$column:4;
/*其中加上through属性是上面定义的12它循环包含12,如果不加则不包含12*/
@for $i from 1 through $columns{
    .col-#{$i]{
        width:100%/$column * $i;
    }
    
}

    /*
       实现的效果是
       ·col-1{
          width:25%;
       }
       .col-2{
          width:50%;
       }
       .col-3{
          width:75%;
       }
       .col-3{
          width:100%;
       }

    */

10.@each的使用

$icons:first second third;

//其中$icon相当与一个array
@each $icon in $icons{
    .icon-#{icon}{
            background-image:url(../#{$icon}.png) ;
    }
    
}

 /*
      最终得到的值
      .icon-firsts{
            background-image:url(../firsts.png)
      }
      .icon-second{
            background-image:url(../second.png)
      }
      .icon-third{
            background-image:url(../third.png)
      }
    */

11.@while循环的使用

$i:6;
@while $i>0{
     .item-#{$i}{
        width:5px *$i;
    }
    $i:$i-2;
}

   /*最终得到的结果是
        .item-6{
            width:30px;
        }
        .item-4{
            width:20px;
        }
        .item-2{
            width:10px;
        }
    */

12.@function自定义函数的使用

$color:(light:#ffffff,dark:#000000);
    @function color($key){
        //使用map-get获取,当传入的key是color这个map中有此key则输出此key的value
        @return map-get($color,$key);
    }
    body{
        background-color: color(light);
    }
    //结果是
    /*
    body{
        background:#ffffff;
    }

    */