Sass&Scss 選擇器 混合器 導入 條件判斷 迭代

Sass

基於ruby的一種將腳本解析成CSS的腳本語言。也可以說是一種預處理語言。

Sass在css的語法基礎上增加了變量、嵌套、混合、繼承、導入等高級功能。

使用Sass與Sass樣式庫(如compass)有助於更好地管理樣式文件，更高效開發項目。

sass不適用花括號和分號，不被廣為接受

而scss作為sass3引用的新語法，兼容了CSS3的同時，繼承了Sass的強大功能，比較優秀

Sass的安裝與使用：

1 安裝ruby依賴：以下任選其一

 

2 打開VScode終端安裝sass

• gem install sass
• gem install compass(compass是一種sass樣式庫)

 

3 編寫sass代碼，在指定的目錄下編譯成css文件

$w:50px
div
    width: 50px
    height: 50px
    background-color: red

在指定目錄下生成css文件：

格式：sass sassUrl  cssUrl

示例：sass  ./testSass/a.sass  ./testcss/a.css

 

4 在頁面引入sass 

其實是使用link標簽引入sass生成的css文件

<link rel="stylesheet" href="../css/c.css">

 

5 效果

 

6 監聽目錄下sass變化並動態生成css文件到指定css目錄

終端命令：

sass --watch  sass文件目錄:css文件生成目錄

 

 示例：sass --watch ./testSass:./testCss

 Scss

命令行：sass sccsPath  cssPath

例如：sass ./testScss/a.sccs  ./testcss/sa.css

標簽選擇器：

$_w:100px;
div{
    width: $_w;
    height: 100px;
    background: red;
}

類選擇器：

.div1{
    width: $_w*3;
    height: $_w*4;
    background: purple;
}

 

&代表當前父標簽，偽類選擇器

$_w1: 100px;
div {
  width: $_w1;
  height: $_w1;
  background-color: aqua;
  // & is subClass : div 
  &:hover{
      background-color: lightcoral;
  }
}

 

偽元素選擇器：

$w_1:100px;
div{
    width: $_w;
    height: $_w;
    border: 1px solid #000;
    &::after{
        content: 'after element';
        display: block;
        width: $w_1;
        height: $w_1;
        background-color: aqua;
        position: absolute;
        left: 100px;
    }
}

 

后代選擇器：

$w_1:100px;
div{
    span{
        display: block;
        position: absolute;
        left: 100px;
        background-color: pink;
    }
}

 

子代選擇器：

$w_1:100px;
div{
    >span{
        display: block;
        position: absolute;
        left: 100px;
        background-color: pink;
    }
}

 

相鄰兄弟選擇器： 元素1 + 兄弟元素(選中此元素，是元素1的后方相鄰元素)

+只能選中當前元素后方相鄰元素，只能選一個

~也表示兄弟選擇器，區別是~可以選擇該元素后方所有的同級元素

二者都不能選擇該元素1前面的兄弟元素

$w_1: 100px;
div {
  + span {
    display: block;
    position: absolute;
    left: $w_1;
    background-color: pink;
  }
}

 

相鄰兄弟選擇器：~  選擇后方所有同級兄弟元素，只能是后方的

$w_1: 100px;
div {
  ~ span {
    display: block;
    position: absolute;
    left: $w_1;
    background-color: pink;
  }
}

div{
    &+.div1{
        background-color: yellow;
    }
}

 

選擇元素的屬性：

$_w :100px;
div{
    width: $_w;
    height: $_w;
    background-color: red;
    border: {
        left: {
            width: 10px;
            style:solid;
            color: pink;
        };
    };
}

 

導入：

@import "c";//導入同級目錄下c.scss

 

混合器的使用：@maxin定義內容，@include在選擇器里導入內容語句。如果是不同文件，在使用混合器之前，要將@maxin所在scss文件導入方可

注意：調用其他文件下的混合器，在include之前需要@import導入

@mixin setUL($_w,$_h){
  width: $_w+px;
  height: $_h+px;
  background-color: aqua;
}
ul{
    @include setUL(100,200);
}

 

混合器與條件判斷if使用：

@mixin setP($_w:10,$_h:10){
    @if $_w<50{
        $_w:500;
    }
    width:$_w+px;
    height: $_h+px;
    background: lightcoral;
}
p{
    @include setP(1,100)
}

 

混合器子代繼承

@import selector;

p{
    >a{
        @extend p;
        display: block;
        position: relative;
        left: 100px;
        background-color: lightcyan;
    }
}

 

迭代器：

只包含start不包含end

for $var from start through(或者用to) end{

selector#{$var}{....}

}  

@for $i from 1 through 6 {
    .elem#{$i}{
        display: inline-block;
        width: 50px;
        height: 50px;
        background-color: lightcyan;
    }
}