一篇文章搞定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，如果要转载，请注明出处，

如果觉得写的不错，请点个赞吧