-----------------------------------------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";