淺析Sass預(yù)編譯語(yǔ)言在圖片輪播效果中的應(yīng)用
2021-02-02 04:28:52劉振強(qiáng)
科技視界 2021年3期
劉振強(qiáng)
（廊坊職業(yè)技術(shù)學(xué)院，河北 廊坊 065001）
在網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù)發(fā)生翻天覆地的新趨勢(shì)下，使用DIV+CSS布局已成為最流行的技術(shù)。CSS的技術(shù)運(yùn)用，解決了Web前端設(shè)計(jì)更豐富的動(dòng)畫(huà)變換效果的基礎(chǔ)上使Web頁(yè)面的載荷更加小巧。但CSS是標(biāo)記語(yǔ)言，仍有冗雜和低復(fù)用性等缺陷，CSS預(yù)編譯的出現(xiàn)也就在情理之中了。預(yù)編譯即預(yù)處理，是通過(guò)讀取編寫(xiě)好的腳本使用預(yù)編譯系統(tǒng)解析成CSS文件的過(guò)程。本文中介紹使用的Sass就是CSS預(yù)編譯系統(tǒng)中的一種。
1 Sass腳本語(yǔ)言簡(jiǎn)介
Sass英文全稱為Syntactically Awesome Stylesheets，是將腳本解析成CSS的一種小型腳本語(yǔ)言[1]。其包含兩套語(yǔ)法，分別是與Haml類似的“縮進(jìn)語(yǔ)法”和與CSS類似的“塊語(yǔ)法”。這兩套語(yǔ)法通過(guò)擴(kuò)展名.sass及.scss進(jìn)行區(qū)分。Sass是對(duì)CSS語(yǔ)法的一種擴(kuò)充，增加了混入、選擇器、繼承等特性。使用Sass預(yù)編譯后的CSS代碼更方便于組織和維護(hù)。Sass可通過(guò)安裝命令“choco install sass”使用Chocolatey軟件包管理工具進(jìn)行安裝，安裝結(jié)束后鍵入“sass—version”查看Sass的版本號(hào)，以確認(rèn)Sass安裝成功。鍵入"sass input.scss output.css"即可將Sass腳本編譯為CSS層疊樣式表文件。
2 圖片輪播實(shí)現(xiàn)
2.1 布局的實(shí)現(xiàn)
2.1.1 HTML元素
HTML元素的布局如圖1所示。
2.2.2 CSS樣式設(shè)計(jì)及Sass腳本的編寫(xiě)
圖1 HTML元素的布局
圖片輪播效果采用響應(yīng)式布局，CSS樣式設(shè)計(jì)中將
- 元素的class設(shè)置為.slider并設(shè)置相對(duì)定位。
- 元素中添加background-image樣式實(shí)現(xiàn)圖片的響應(yīng)式應(yīng)用，并設(shè)置background-size:100%展現(xiàn)圖片全貌。為了實(shí)現(xiàn)響應(yīng)式效果設(shè)置
元素和 - 元素高度相同。對(duì)輪播動(dòng)畫(huà)進(jìn)行焦點(diǎn)的設(shè)置可以方便使用者了解目前圖片所處位置，因此，為
元素添加.focus-container類并設(shè)置絕對(duì)定位，為.focus-container類下的 - 元素設(shè)置float：left左浮動(dòng)樣式，并通過(guò)設(shè)置
- 父元素的偽類floatfix:after進(jìn)行清除浮動(dòng)。Sass腳本如圖2所示。Sass以$標(biāo)志變量的開(kāi)始，如圖2中38行是對(duì)前景色$foreground變量賦值為#DADBD6。Sass嵌套CSS選擇器方式和HTML層次結(jié)構(gòu)相同，如圖2中39行至57行；在嵌套CSS規(guī)則時(shí)需要使用其父選擇器時(shí)可用&表示父選擇器如圖2中11行。對(duì)于CSS屬性嵌套如圖2中17至18行Sass將編譯為pdding-bottom：40%。Sass中使用@for指令完成循環(huán)操作，在輸出變量時(shí)將變量置于#{}中如圖2中32至36行。
圖2 圖片輪播布局的Sass腳本
2.2 輪播動(dòng)畫(huà)的實(shí)現(xiàn)
2.2.1 圖片輪播的CSS樣式設(shè)計(jì)及Sass腳本的編寫(xiě)
從圖片輪播效果整體看圖片的淡出淡入是同一個(gè)動(dòng)畫(huà)效果，使用CSS中animation-delay樣式來(lái)控制將opacity樣式設(shè)置為1或0完成圖片的顯示與透明效果，設(shè)置animation-timing-function:linear控制動(dòng)畫(huà)的播放過(guò)程為50秒，圖片停留9秒、淡出淡入1秒并使用animation-iteration-count:infinite樣式實(shí)現(xiàn)連續(xù)輪換。Sass腳本如圖3所示。在Sass中混合指令可以定義重復(fù)使用的樣式，本例動(dòng)畫(huà)中為兼容各瀏覽器需添加相應(yīng)的前綴如圖3中17至25行。使用@include指令引用混合樣式如圖3中27至42行。
2.2.2 輪播動(dòng)畫(huà)焦點(diǎn)的CSS樣式設(shè)計(jì)及Sass腳本的編寫(xiě)
輪播焦點(diǎn)動(dòng)畫(huà)仍使用圖片輪播的動(dòng)畫(huà)過(guò)程。在CSS中animation-delay樣式來(lái)控制將opacity樣式設(shè)置為1或0完成輪播焦點(diǎn)的切換。Sass腳本如圖4所示。
圖3 輪播動(dòng)畫(huà)圖片切換的Sass腳本
3 圖片輪播測(cè)試
圖5為圖片輪播在Opera瀏覽器中的測(cè)試效果。
圖4 輪播動(dòng)畫(huà)焦點(diǎn)的Sass腳本
圖5 瀏覽器中的測(cè)試效果
4 結(jié)語(yǔ)
以上是對(duì)圖片輪播動(dòng)畫(huà)的CSS設(shè)計(jì)及編寫(xiě)相對(duì)應(yīng)的Sass腳本的概要描述，通過(guò)實(shí)踐發(fā)現(xiàn)Sass作為預(yù)編譯語(yǔ)言不但具有變量和邏輯結(jié)構(gòu)等編程語(yǔ)言中的一些基本屬性，還包括混入、選擇器、繼承等特有屬性?？偨Y(jié)起來(lái)，使用Sass可給開(kāi)發(fā)者帶來(lái)更簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，更易于的維護(hù)的CSS層疊樣式表文件，因此，這也將是CSS的發(fā)展方向之一。
猜你喜歡- 靶通道選擇器研究與優(yōu)化設(shè)計(jì)
電子工業(yè)專用設(shè)備(2024年1期)2024-02-29 02:24:46- 酒駕
作文小學(xué)中年級(jí)(2022年11期)2022-11-25 09:52:08- CPMF-I 取樣式多相流分離計(jì)量裝置
天然氣與石油(2022年4期)2022-09-21 07:02:38- CPMF-I 取樣式多相流分離計(jì)量裝置
天然氣與石油(2021年5期)2021-11-06 09:39:42- 取樣式多相流分離計(jì)量裝置
天然氣與石油(2021年1期)2021-03-08 09:07:32- 安奇奇與小cool 龍（第二回）
課堂內(nèi)外(小學(xué)版)(2020年11期)2020-12-04 06:38:44- 數(shù)據(jù)庫(kù)系統(tǒng)shell腳本應(yīng)用
電子測(cè)試(2018年14期)2018-09-26 06:04:24- 快樂(lè)假期
中學(xué)生(2017年19期)2017-09-03 10:39:07- 四選一數(shù)據(jù)選擇器74LS153級(jí)聯(lián)方法分析與研究
電腦與電信(2017年6期)2017-08-08 02:04:22- 雙四選一數(shù)據(jù)選擇器74HC153的級(jí)聯(lián)分析及研究
大學(xué)物理實(shí)驗(yàn)(2015年2期)2015-10-22 01:04:39- 科技視界的其它文章
- 關(guān)于計(jì)算機(jī)軟件工程項(xiàng)目自動(dòng)化管理研究
- 基于校企合作的應(yīng)用型本科院校創(chuàng)新創(chuàng)業(yè)型人才培養(yǎng)策略研究
- 發(fā)揮“五個(gè)優(yōu)勢(shì)”助力學(xué)生就業(yè)的思考與實(shí)踐
——以北京科技大學(xué)數(shù)理學(xué)院為例 - 淺談國(guó)有企業(yè)檔案管理的創(chuàng)新策略
- “互聯(lián)網(wǎng)+”背景下博物館文創(chuàng)產(chǎn)品的營(yíng)銷策略
- 創(chuàng)新創(chuàng)業(yè)教育融入《藥事管理學(xué)》課程教學(xué)改革的實(shí)踐探索
- 元素高度相同。對(duì)輪播動(dòng)畫(huà)進(jìn)行焦點(diǎn)的設(shè)置可以方便使用者了解目前圖片所處位置，因此，為
