Scss、elementUI引入、transition动画 - 学习笔记

Scss、elementUI引入、transition动画 - 学习笔记

Sass 是什么？

官网：https://www.sass.hk/guide/
Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

特性概览
CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

Scss 与 Sass的区别
Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：
1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。
2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号;，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。
安装

npm install node-sass -save-dev
npm install sass-loader@^7.3.1 --save-dev
npm install style-loader --save-dev

–save -dev区别
–save：将保存配置信息到pacjage.json的dependencies节点中。

–save-dev：将保存配置信息到pacjage.json的devDependencies节点中。

dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块

devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。

变量声明

$highlight-color: #F90;
$lightColor: #ffffff;
$darkColor: #000000;
$redColor : #f00;
$blue-color: blue;

变量引用：

border:1px solid $darkColor;

嵌套CSS 规则
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

像这种情况，sass可以让你只写一遍，且使样式可读性更高。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

父选择器的标识符&

article a { color: blue }
article a:hover { color: red }

article a {
  color: blue;
  &:hover { color: red }
}

群组选择器的嵌套

.container h1, .container h2, .container h3
 { margin-bottom: .8em }

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

子组合选择器和同层组合选择器：>、+和~
选择器> 选择一个元素的直接子元素。

article section { margin: 5px }
article > section { border: 1px solid #ccc }

同层相邻组合选择器+选择header元素后紧跟的p元素

header + p { font-size: 1.1em }

同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：

article ~ article { border-top: 1px dashed #ccc }

.div1 {
  color:$blue-color;
  .div2 {
    border:1px solid $darkColor;
    .div3{
      font-size:14px;
      color:lighten($darkColor,70%);
      &>a {
        color:lighten($darkColor,70%);
      }
    }
  }
}

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

嵌套属性

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

混合器
混合器使用@mixin标识符定义

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

通过@include来使用这个混合器，放在你希望的任何地方

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

elementUI

官网：https://element.eleme.cn/#/zh-CN

安装

npm i element-ui -S

main.js中引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

transition动画

官网：https://cn.vuejs.org/v2/guide/transitions.html
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

例子：


动画的处理过程
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
过渡的类名
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

<template>
  <div>
    <button @click="flag=!flag">click</button>
    <transition name="abc">
      <p v-if="flag">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  data(){
    return {
      flag:true
    }
  }
}
</script>
<style lang="scss">
.abc-enter-active,.abc-leave-active{
  transition:opacity 1s ease;
}
.abc-enter,.abc-leave-to{
  opacity:0
}
</style>