淺析Sass預編譯語言在圖片輪播效果中的應用
2021-02-02 04:28:52劉振強
科技視界 2021年3期
劉振強
（廊坊職業技術學院，河北 廊坊 065001）
在網頁設計制作技術發生翻天覆地的新趨勢下，使用DIV+CSS布局已成為最流行的技術。CSS的技術運用，解決了Web前端設計更豐富的動畫變換效果的基礎上使Web頁面的載荷更加小巧。但CSS是標記語言，仍有冗雜和低復用性等缺陷，CSS預編譯的出現也就在情理之中了。預編譯即預處理，是通過讀取編寫好的腳本使用預編譯系統解析成CSS文件的過程。本文中介紹使用的Sass就是CSS預編譯系統中的一種。
1 Sass腳本語言簡介
Sass英文全稱為Syntactically Awesome Stylesheets，是將腳本解析成CSS的一種小型腳本語言[1]。其包含兩套語法，分別是與Haml類似的“縮進語法”和與CSS類似的“塊語法”。這兩套語法通過擴展名.sass及.scss進行區分。Sass是對CSS語法的一種擴充，增加了混入、選擇器、繼承等特性。使用Sass預編譯后的CSS代碼更方便于組織和維護。Sass可通過安裝命令“choco install sass”使用Chocolatey軟件包管理工具進行安裝，安裝結束后鍵入“sass—version”查看Sass的版本號，以確認Sass安裝成功。鍵入"sass input.scss output.css"即可將Sass腳本編譯為CSS層疊樣式表文件。
2 圖片輪播實現
2.1 布局的實現
2.1.1 HTML元素
HTML元素的布局如圖1所示。
2.2.2 CSS樣式設計及Sass腳本的編寫
圖1 HTML元素的布局
圖片輪播效果采用響應式布局，CSS樣式設計中將
- 元素的class設置為.slider并設置相對定位。
- 元素中添加background-image樣式實現圖片的響應式應用，并設置background-size:100%展現圖片全貌。為了實現響應式效果設置
元素和 - 元素高度相同。對輪播動畫進行焦點的設置可以方便使用者了解目前圖片所處位置，因此，為
元素添加.focus-container類并設置絕對定位，為.focus-container類下的 - 元素設置float：left左浮動樣式，并通過設置
- 父元素的偽類floatfix:after進行清除浮動。Sass腳本如圖2所示。Sass以$標志變量的開始，如圖2中38行是對前景色$foreground變量賦值為#DADBD6。Sass嵌套CSS選擇器方式和HTML層次結構相同，如圖2中39行至57行；在嵌套CSS規則時需要使用其父選擇器時可用&表示父選擇器如圖2中11行。對于CSS屬性嵌套如圖2中17至18行Sass將編譯為pdding-bottom：40%。Sass中使用@for指令完成循環操作，在輸出變量時將變量置于#{}中如圖2中32至36行。
圖2 圖片輪播布局的Sass腳本
2.2 輪播動畫的實現
2.2.1 圖片輪播的CSS樣式設計及Sass腳本的編寫
從圖片輪播效果整體看圖片的淡出淡入是同一個動畫效果，使用CSS中animation-delay樣式來控制將opacity樣式設置為1或0完成圖片的顯示與透明效果，設置animation-timing-function:linear控制動畫的播放過程為50秒，圖片停留9秒、淡出淡入1秒并使用animation-iteration-count:infinite樣式實現連續輪換。Sass腳本如圖3所示。在Sass中混合指令可以定義重復使用的樣式，本例動畫中為兼容各瀏覽器需添加相應的前綴如圖3中17至25行。使用@include指令引用混合樣式如圖3中27至42行。
2.2.2 輪播動畫焦點的CSS樣式設計及Sass腳本的編寫
輪播焦點動畫仍使用圖片輪播的動畫過程。在CSS中animation-delay樣式來控制將opacity樣式設置為1或0完成輪播焦點的切換。Sass腳本如圖4所示。
圖3 輪播動畫圖片切換的Sass腳本
3 圖片輪播測試
圖5為圖片輪播在Opera瀏覽器中的測試效果。
圖4 輪播動畫焦點的Sass腳本
圖5 瀏覽器中的測試效果
4 結語
以上是對圖片輪播動畫的CSS設計及編寫相對應的Sass腳本的概要描述，通過實踐發現Sass作為預編譯語言不但具有變量和邏輯結構等編程語言中的一些基本屬性，還包括混入、選擇器、繼承等特有屬性。總結起來，使用Sass可給開發者帶來更簡潔、適應性更強、可讀性更佳，更易于的維護的CSS層疊樣式表文件，因此，這也將是CSS的發展方向之一。
猜你喜歡- 按摩效果確有理論依據
中老年保健(2021年12期)2021-11-30 02:58:01- 中隊崗位該如何設置
少先隊活動(2021年4期)2021-07-23 01:46:22- 做個動畫給你看
小哥白尼(趣味科學)(2021年12期)2021-03-16 05:40:38- 動畫發展史
小學科學(學生版)(2020年10期)2020-10-28 07:52:18- 我的動畫夢
文苑(2019年22期)2019-12-07 05:28:56- 迅速制造慢門虛化效果
攝影之友(影像視覺)(2019年2期)2019-03-05 08:27:14- 抓住“瞬間性”效果
中華詩詞(2018年11期)2018-03-26 06:41:34- 模擬百種唇妝效果
Coco薇(2016年8期)2016-10-09 02:11:50- 我是動畫迷
學生天地(2016年9期)2016-05-17 05:45:06- 本刊欄目設置說明
沈陽醫學院學報(2015年1期)2015-12-27 13:44:40 - 元素高度相同。對輪播動畫進行焦點的設置可以方便使用者了解目前圖片所處位置，因此，為
