一篇文章搞定SCSS入門

一篇文章搞定SCSS入門

開篇點題好吧，這篇文章涵蓋scss經常使用的方法，scss轉css的插件使用，scss自定義ElementUI的主題。有興趣的請往下看噢！

1. BEM CSS命名法

全稱是Block Element modifier規則以下：

1.要有一個主要名字

2.全部類名都圍繞主要名字進行擴展__鏈接

3.不一樣狀態用--鏈接，形如類名--狀態

舉例以下：

這樣命名能夠防止類名衝突，可是太複雜，因此咱們能夠簡化他，主類名和副類名的鏈接用-

狀態直接拿出來寫，以下

2. sass插件的使用

Live Sass Compiler這個插件能夠很好的將scss的文件編譯爲css

安裝完這個插件後，按ctrl+<,進入設置頁面，設置sass轉化爲css的路徑

找到liveSassCompile.settings.formats，在savePath中設置你css安放的路徑（相對於scss的路徑）

而後開啓編譯，按ctrl+shift+p,點擊Live Sass Watch Sass，即可以實時的將scss文件編譯爲css文件了

3.scss的基礎規則

3.1 嵌套選擇器

body{
    background:red;
    p{
        color:#fff;
    }
}
//編譯爲scss
body {
  background: red;
}
body p {
  color: #fff;
}
複製代碼

3.2 &符號

&能夠引用父級選擇器，運用&能夠在嵌套內層給父級選擇器加hover和class

li{
    background:#000;
    a{
      color:#ff7788
    }
    &::hover{
        background:#fff;
    }
    &.active{
        background:#ffff00;
    }
  }
//css
li {
  background: #000;
}

li a {
  color: #ff7788;
}

li::hover {
  background: #fff;
}

li.active {
  background: #ffff00;
}
複製代碼

3.3嵌套屬性

好比字體有font-size,font-weight,font-family等多個屬性，但每一個屬性前面都有個font，那麼咱們能夠用嵌套屬性來簡寫

body{
    font: {//注意font後面必定要接 `:`,否則會被認爲是一個類名
        size:16px;
        weight:700;
        family:'宋體'
    }
}
//css
body {
  font-size: 16px;
  font-weight: 700;
  font-family: '宋體';
}
複製代碼

3.4 支持單行註釋

3.5 變量

$+變量名:值

$color:"red";
a{
    color:$color
}
//css
a {
  color: "red";
}

複製代碼

變量是有做用域的，跟js的做用域差很少，就近原則，可使用!global強行變爲全局變量

body{
    a {
        $red:'red' !global;
    }
    p{
        //p標籤中原本是不可能拿到a標籤中定義的$red的
        //可是由於加了！global，就變成全局做用域的變量了
        //因此才能使用
        color:$red;
    }
}
//css
body p {
  color: "red";
}
複製代碼

3.5 運算

• SCSS能夠進行加減乘除的運算

• 顏色相關的運算

p{
    font-size:12px+10px;
    height:(10/5)px;//注意除法要加個括號，外面寫px否則會出錯
    width:5*5px;//乘法單位最後寫,不能寫兩個帶單位的數字相乘，即5px*5px是錯誤的
    color:#000+#FFF;
}
//css
p {
  font-size: 22px;
  height: 2 px;
  width: 25px;
  color: white;
}
複製代碼

3.6 @mixin 混合

@mixin能夠將重複的代碼提取出來，而後誰要用就@include引入就行了

@mixin box{
    background: #ffff00;
    border:1px solid #ffff00;
    color:blue;
}
.bigBox{
    @include box;
    height:200px;
    width:200px;
}
.smallBox{
    @include box;
    height:50px;
    width:50px
}
//css
.bigBox {
  background: #ffff00;
  border: 1px solid #ffff00;
  color: blue;
  height: 200px;
  width: 200px;
}

.smallBox {
  background: #ffff00;
  border: 1px solid #ffff00;
  color: blue;
  height: 50px;
  width: 50px;
}
複製代碼

看到上面，你會發現，雖然scss的代碼變少了，但轉化爲css後，這些代碼仍是重複寫了一次，那麼咱們能夠看下一個方法繼承

3.7 % 與 @extend

%box{
    background: #ffff00;
    border:1px solid #ffff00;
    color:blue;
}
.bigBox{
    @extend %box;
    height:200px;
    width:200px;
}
.smallBox{
    @extend %box;
    height:50px;
    width:50px
}
//css
.bigBox, .smallBox {
  background: #ffff00;
  border: 1px solid #ffff00;
  color: blue;
}

.bigBox {
  height: 200px;
  width: 200px;
}

.smallBox {
  height: 50px;
  width: 50px;
}
複製代碼

能夠發現繼承這個方法會將共同的css寫在一塊兒，減小了代碼量

3.8 @function

在scss中咱們能夠自定義函數

這個方法主要是用來複用計算屬性的，好比你須要將px轉化爲vw，能夠這樣寫

@function pxToVw( $px){
    @return $px/$PageWidth*100vw;
}
$PageWidth :320 ;//手機屏幕寬度
p{
    width:pxToVw(300);
}
複製代碼

3.9 循環

$class:"for";
@for $i from 1 through 4{
    .#{$class}-#{$i}{
        height:40+$i+px
    }
}
//注意
//#{變量}跟ES6的${}功能是同樣的

//css
.for-1 {
  height: 41px;
}
.for-2 {
  height: 42px;
}
.for-3 {
  height: 43px;
}
.for-4 {
  height: 44px;
}
複製代碼

4. SCSS作響應式

@mixin phone{
    @media (max-width:500px){
        @content
    }
}

//而後在你想用媒體查詢的地方
p{
    width:500px;
    @include phone{
        width:300px;//這裏的代碼將替換@content的區域
    }
}
複製代碼

5. SCSS自定義ElementUI

這裏將使用vue-ci來建立工程，沒有下載vue-cli的能夠去官網按教程下載

vue create hello-world

cd hello-world

npm run serve

而後咱們要下載ElementUI

npm i -S element-ui

在main.js中引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
複製代碼

接着下載element的主題

npm i element-theme -g

再下載個白堊主題

npm i element-theme-chalk -D

輸入et -i會建立一個自定主題的文件

在你改好主題前，能夠先用et --watch自動監聽和編譯文件

此時會出現一個theme的文件夾，咱們須要在main.js中導入theme中的index.css

//main.js
import 'element-ui/lib/theme-chalk/index.css'
//上面是原來的，如今改成
import '../theme/index.css'
複製代碼

好了，如今你改動的主題都會應用到你的組件中

結語

由於本人水平有限，若是有錯漏的地方，還請看官多多指正

本文做者胡志武，寫於2019/5/24，若是要轉載，請註明出處，

若是以爲寫的不錯， 請點個贊吧