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

若是以为写的不错， 请点个赞吧