天天看點

vue相關 scss文法基礎

-----------------------------------------vue相關 scss文法基礎------------------------------------------------------------

高效css預編譯語言  js方式書寫css   同類 less stylus

基于ruby語言開發

檔案差別

.sass  文法沒有花括号 分号

 .scss檔案内支援css文法  √

     但是目前沒有任何浏覽器支援這種語言,是以,需要編寫完成之後,轉成css

     借助node環境下的gulp工具的gulp-sass插件,實作sass轉css的功能

 scss文法

 //注釋不會被編譯,會被編譯

 單值變量

 $c:red;

 div{

     width:100px;

     color: $c;

 }

 多值變量

 $c:red yellow;

 div{

     width:100px;

     color: nth($c, 1);            從1開始

 }

數組型變量和 @each  in

  list變量,類似于js的數組

$l:(1,100,20,red)(2,50,30,yellow)(3,150,10,green)(4,200,40,blue)(5,30,10,pink);

@each $i,$w,$h,$c in $l {

    .box#{$i}{                          選擇器有變量 用#{}包裹

        width:$w + px;

        height:$h + px;

        color:$c;

    }

}

對象型變量

map變量,類似于js的對象

$m:(h1:30px,h2:20px,h3:10px);

@each $key,$val in $m {

    #{$key}{

        font-size:$val;

    }

}

選擇器的嵌套

.list{

    li{border: solid 1px black;

        &:hover{background: red;}      僞類選擇器

    }

    .last{border:none;}

}

屬性的嵌套

.box{

    border:{

        left:{width:10px;color:red;style:solid;}

        right:{width:20px;color:yellow;style:solid;}

    }

}

4.混合mixin,類似于js的函數,但是沒有傳回值

@mixin abc ($deg){                     封裝

    -webkit-transform: $deg;

    -moz-transform: $deg;

    -ms-transform: $deg;

    -o-transform: $deg;

    transform: $deg;

}

.box{

    @include abc(rotate(90deg));       調用  傳參

}

.box1{

    @include abc(translate(100px));

}

5. 繼承

.box1{width:100px;height:100px;background: red;}

.box2{

    @extend .box1;        繼承

    background: yellow;   調整

}

6. 運算

https://blog.csdn.net/hpasdabc?spm=1000.2115.3001.5343

$c:red;

.box{

    color:$c 50;

    width:100*2 + px;

    height:100px / 16px * 1rem;        轉rem 封裝運算部分

    margin:50px / 16px * 1rem;

}

@function pTr($px){                 封裝

        @return $px / 16px * 1rem;   預設1rem=16px

    }

    .box{

        width:pTr(89px);           調用 傳參

        height:pTr(89px);

    }

    8.引入外部scss并合并

@import "style.scss";

繼續閱讀