文章目錄

• • Scss、elementUI引入、transition動(dòng)畫(huà) - 學(xué)習(xí)筆記
  • • Sass 是什么？
    • elementUI
    • transition動(dòng)畫(huà)

Scss、elementUI引入、transition動(dòng)畫(huà) - 學(xué)習(xí)筆記

Sass 是什么？

官網(wǎng)：https://www.sass.hk/guide/
Sass是成熟、穩(wěn)定、強(qiáng)大的CSS預(yù)處理器，而SCSS是Sass3版本當(dāng)中引入的新語(yǔ)法特性，完全兼容CSS3的同時(shí)繼承了Sass強(qiáng)大的動(dòng)態(tài)功能。

特性概覽
CSS書(shū)寫(xiě)代碼規(guī)模較大的Web應(yīng)用時(shí)，容易造成選擇器、層疊的復(fù)雜度過(guò)高，因此推薦通過(guò)SASS預(yù)處理器進(jìn)行CSS的開(kāi)發(fā)，SASS提供的變量、嵌套、混合、繼承等特性，讓CSS的書(shū)寫(xiě)更加有趣與程式化。

Scss 與 Sass的區(qū)別
Sass 和 Scss 其實(shí)就是同一種東西，我們平時(shí)都稱之為 Sass，兩者之間不同之處主要有以下兩點(diǎn)：
1、文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 Scss 是以“.scss”后綴為擴(kuò)展名。
2、語(yǔ)法書(shū)寫(xiě)方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書(shū)寫(xiě)，不帶大括號(hào)({})和分號(hào);，而 Scss 的語(yǔ)法書(shū)寫(xiě)和我們的CSS 語(yǔ)法書(shū)寫(xiě)方式非常類似。
安裝

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

–save -dev區(qū)別
–save：將保存配置信息到pacjage.json的dependencies節(jié)點(diǎn)中。

–save-dev：將保存配置信息到pacjage.json的devDependencies節(jié)點(diǎn)中。

dependencies：運(yùn)行時(shí)的依賴，發(fā)布后，即生產(chǎn)環(huán)境下還需要用的模塊

devDependencies：開(kāi)發(fā)時(shí)的依賴。里面的模塊是開(kāi)發(fā)時(shí)用的，發(fā)布時(shí)用不到它。

變量聲明

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

變量引用：

border:1px solid $darkColor;

嵌套CSS 規(guī)則
css中重復(fù)寫(xiě)選擇器是非常惱人的。如果要寫(xiě)一大串指向頁(yè)面中同一塊的樣式時(shí)，往往需要 一遍又一遍地寫(xiě)同一個(gè)ID：

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

像這種情況，sass可以讓你只寫(xiě)一遍，且使樣式可讀性更高。sass在輸出css時(shí)會(huì)幫你把這些嵌套規(guī)則處理好，避免你的重復(fù)書(shū)寫(xiě)。

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

父選擇器的標(biāo)識(shí)符&

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} }

子組合選擇器和同層組合選擇器：>、+和~
選擇器> 選擇一個(gè)元素的直接子元素。

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標(biāo)識(shí)符定義

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

通過(guò)@include來(lái)使用這個(gè)混合器，放在你希望的任何地方

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

elementUI

官網(wǎng)：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動(dòng)畫(huà)

官網(wǎng)：https://cn.vuejs.org/v2/guide/transitions.html
Vue 在插入、更新或者移除 DOM 時(shí)，提供多種不同方式的應(yīng)用過(guò)渡效果。
包括以下工具：
在 CSS 過(guò)渡和動(dòng)畫(huà)中自動(dòng)應(yīng)用 class
可以配合使用第三方 CSS 動(dòng)畫(huà)庫(kù)，如 Animate.css
在過(guò)渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動(dòng)畫(huà)庫(kù)，如 Velocity.js

例子：


動(dòng)畫(huà)的處理過(guò)程
當(dāng)插入或刪除包含在 transition 組件中的元素時(shí)，Vue 將會(huì)做以下處理：
自動(dòng)嗅探目標(biāo)元素是否應(yīng)用了 CSS 過(guò)渡或動(dòng)畫(huà)，如果是，在恰當(dāng)?shù)臅r(shí)機(jī)添加/刪除 CSS 類名。
如果過(guò)渡組件提供了 JavaScript 鉤子函數(shù)，這些鉤子函數(shù)將在恰當(dāng)?shù)臅r(shí)機(jī)被調(diào)用。
如果沒(méi)有找到 JavaScript 鉤子并且也沒(méi)有檢測(cè)到 CSS 過(guò)渡/動(dòng)畫(huà)，DOM 操作 (插入/刪除) 在下一幀中立即執(zhí)行。(注意：此指瀏覽器逐幀動(dòng)畫(huà)機(jī)制，和 Vue 的 nextTick 概念不同)
過(guò)渡的類名
在進(jìn)入/離開(kāi)的過(guò)渡中，會(huì)有 6 個(gè) class 切換。
v-enter：定義進(jìn)入過(guò)渡的開(kāi)始狀態(tài)。在元素被插入之前生效，在元素被插入之后的下一幀移除。
v-enter-active：定義進(jìn)入過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)進(jìn)入過(guò)渡的階段中應(yīng)用，在元素被插入之前生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類可以被用來(lái)定義進(jìn)入過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
v-enter-to: 2.1.8版及以上 定義進(jìn)入過(guò)渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時(shí) v-enter 被移除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。
v-leave: 定義離開(kāi)過(guò)渡的開(kāi)始狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，下一幀被移除。
v-leave-active：定義離開(kāi)過(guò)渡生效時(shí)的狀態(tài)。在整個(gè)離開(kāi)過(guò)渡的階段中應(yīng)用，在離開(kāi)過(guò)渡被觸發(fā)時(shí)立刻生效，在過(guò)渡/動(dòng)畫(huà)完成之后移除。這個(gè)類可以被用來(lái)定義離開(kāi)過(guò)渡的過(guò)程時(shí)間，延遲和曲線函數(shù)。
v-leave-to: 2.1.8版及以上 定義離開(kāi)過(guò)渡的結(jié)束狀態(tài)。在離開(kāi)過(guò)渡被觸發(fā)之后下一幀生效 (與此同時(shí) v-leave 被刪除)，在過(guò)渡/動(dòng)畫(huà)完成之后移除。

<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>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。