文章目錄

• • Scss、elementUI引入、transition動畫 - 學習筆記
  • • Sass 是什么？
    • 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>

總結

以上是生活随笔為你收集整理的Scss、elementUI引入、transition动画 - 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。