Sass複習總結

css的問題：沒有變量，沒有封裝，沒有組合，原生的模塊化語法不好用

css預處理器 sass less

編譯成css，變量，組合，模塊 容易結合到已有的工具中

好處：讓我們經常使用的東西變成變量

代碼更好維護和組織

好上手，已有的庫供我們使用

語法比較：因爲scss語法比較接近css，所以更好上手

index.scss

.header{
 color:red;
}

index.sass：沒有大括號

.header
 color:red

1.嵌套語法

<div class="wrapper">
<div class="left">left</div>
<div class="right">content</div>
</div>

scss：

樣式可以放在父元素的聲明塊裏面

當編譯的時候會變成常見的css文件

減少代碼量，不容易出錯

.wrapper{
  width:100%;

.left,.right{
 padding:10px;
 }

}

sass官網：https://sass-lang.com/

1.查看node版本：node -v

2.查看npm版本：npm -v

3.安裝scss：npm install -g sass

4.查看一下：sass  --help

5.把scss編譯成css sass  ./src/index.scss    ./dist/index.css

2.嵌套中的直接子元素：（>）

.wrapper{

  >.left{
    color:red;
  }

}

3.父親選擇器：&選擇器，子元素加上&，代表與父元素平級，這樣寫權重比較高

.wrapper{
   &.left{
    color:red;
  }
  a{
   color:yellow;
  }
}

&.left相當於

.wrapper.left{
    color:red;
}

或者看下面這種對比：寫法不一樣而已

.button{
  color:red;
}

.left .button{
 color:yellow;
}

&相當於.button 

.button{
  color:red;
.left &{
  color:yellow;
 }
}

模塊

@import ”模塊名字“，如：@import "./layout"  後綴名自動識別

在css中的模塊，會產生一個http請求

模塊的思想在開發的時候使用就可以

模塊分爲兩類：1類是功能模塊如（_layout.scss，_variables.scss[變量]），1類是引入功能的scss如（index.scss），引用的時候要帶上分號

分別在_layout.scss，_variables.scss裏面寫上佈局樣式和變量，然後再引入index.scss，如下

@import "_layout"；

@import "_variables"；

我們可以參照bootstrap來寫：https://github.com/twbs/bootstrap

變量：定義要加上$

1.定義：全局變量，!default表示如果其他地方也定義$error-color的話，先走那邊，再走這個默認值。

$error-color：#ccc !default；

2.使用：定義在括號內爲局部變量

.left{
  $text-color:#ddd;
  background-color:$error-color;
}
div{
  color: $text-color;//用不了
}

變量值的類型

數字：10 200px 50% 10pt

顏色：#fff  rgb()  red

字符串：”a.png“，null，布爾：true  false

註釋有兩種

/**/  或者 //，/**/註釋會被編譯出來，//註釋會被刪除掉

Mixins：可以讓想要的樣式複用

定義被多次引用的scss代碼前加上@mixin name，其他scss想要引入這些代碼的話，用@include  name就好

@mixin alert-text{//被多次引用
 color:red;
}

.success-text{//引用
 @include alert-text;
}

Mixins參數:傳參，傳入$color，在引用的時候可以自己定義顏色

@mixin alert-text($color){//被多次引用
 color:$color;
}

.success-text{//引用
 @include alert-text(green);
}

.error-text{//引用
 @include alert-text(red);
}

也可以傳入多個參數

@mixin alert-text($color1,$color2){//被多次引用
 color:$color1;
 background-color:$color2;
}

Mixins傳默認參數

可以給變量默認值，傳值的時候按照順序傳也可以指定傳，通過鍵值對的形式

如果引用的時候，不傳值的話走定義好的默認值，傳值的話就走傳的值

@mixin alert-text($color:#f33){//被多次引用
 color:$color;
}

.success-text{//引用
 @include alert-text(green);
}

.error-text{//引用
 @include alert-text(red);
}

Mixins null，傳null的話，下面引用的時候，不會出現opacity

@mixin alert-text($opacity:null){//被多次引用
 color:#333;
 opacity:$opacity;
}

.btn{
 @include alert-text();//不會出現opacity
}

.other-btn{
 @include alert-text(0.5);//有opacity
}

Mixins傳一個塊

@content：指代從外面塊級作用域傳進來的屬性

@mixin foo($color){
 color:$color;

 .inner{
   @content; //接收下面塊級作用域傳過來的屬性
 }

}

.btn{
 @include foo(#fff){//傳出去
   color:red;
   font-size:18px;
  }
}

相當於

.btn{
 color:#fff;
}

.btn .inner{
 color:red;
}

關於css技巧的網站：https://css-tricks.com/