scss @for 循环

原創 鲤鱼和龙虾 2019-08-25 14:55

在实现样式过程中碰到了一个隔一定时间右滑出来的效果，一开始一个个写，感觉太麻烦了，搜了一下scss有个@for方法，效果很强大

 

使用scss @for循环

 

注意一下在选择器调用循环项 $i 和样式里调用是有区别的，选择器里是用插值 #{} ，可以网上找点资料细看一下，然后看网上说还有 from 1 to 16 是不包含结束值16的循环， from 1 through 16包含结束值16

编译结果如下

和想要的结果一样

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

HTML页面关于高分屏的设置

記錄一個HTML頁面關於高分屏的踩到的坑。 所謂高分屏，就是在同樣大小的屏幕面積上顯示更多的像素點，這樣可以呈現更好的可視效果的屏幕。例如，我的筆記本是15.6寸，理論上它的屏幕分辨率應該是1920 x 1080像素，但實際上我的筆記本屏幕

harlee44 2024-05-04 14:31:10

DAPPER 事务 TRANSACTION

https://www.cnblogs.com/friend/p/16754184.html\   public async Task<int> Save(long moldProducedProductId, List<MoldStan

老飛飛 2024-05-04 14:29:20

[MDP.AspNetCore] 实作OAuth协定SSO Server/Client专案范例

團隊負責的系統變多的時候，使用SSO Server提供統一身分驗證，讓團隊只需要維護一份用戶資料及一個身分驗證服務。除了減少團隊維護成本之外，也讓使用者不用記憶多個站臺的帳號密碼，提供更好的使用者體驗。 本篇文章，介紹使用MDP.AspNe

Clark159 2024-05-04 14:23:49

Redis官方开源的可视化管理工具 - RedisInsight

前言 今天大姚給大家推薦一款Redis官方開源的可視化管理工具：RedisInsight。 Redis介紹 Redis (Remote Dictionary Server) 是一個使用 C 語言編寫的，開源的 (遵守 BSD 協議) 高性

追逐時光 2024-05-04 14:21:49

Python 潮流周刊#49：谷歌裁员 Python 团队，微软开源 MS-DOS 4.0

本週刊由 Python貓 出品，精心篩選國內外的 250+ 信息源，爲你挑選最值得分享的文章、教程、開源項目、軟件工具、播客和視頻、熱門話題等內容。願景：幫助所有讀者精進 Python 技術，並增長職業和副業的收入。 本期週刊分享了 12

豌豆花下貓 2024-05-04 14:19:09

HarmonyOS 垂直方向内容滚动条实现

概述 Swiper組件是一個用戶界面元素，用於在垂直方向上滾動內容。它通過遍歷一個數據集合，爲每一項創建一個可滾動的文本項。 代碼實現 以下是Swiper組件的實現代碼： Swiper(){ ForEach(searchSwiper,

西北野狼 2024-05-04 14:05:08

基于SSM的仓库进销存系统毕业设计论文【范文】

摘要 隨着信息技術的不斷髮展，企業對於倉儲管理的要求日益提高。爲了提升倉庫管理的自動化和智能化水平，本研究設計並實現了一個基於Spring、Spring MVC和MyBatis (SSM) 框架的在倉庫進銷存系統。該系統旨在爲企業提供一個高

Lucky帥小武 2024-05-04 14:03:17

基于SSM的在线考试系统毕业设计论文【范文】

摘要 隨着信息技術的飛速發展，網絡教學逐漸成爲教育行業的重要組成部分。在線考試系統作爲網絡教學平臺的關鍵模塊之一，其便捷性、高效性和公正性受到廣泛關注，基於SSM框架的在線考試系統旨在提供一個穩定、可靠並且易於維護的在線考試環境，以滿足現代

Lucky帥小武 2024-05-04 14:03:17

CSS & JS Effect – 用 wheel 模拟 scroll

前言 在 用 JavaScript 實現 position sticky 文章中，我提到了用 wheel 來模擬 scroll 效果。 這篇來說說具體怎麼實現，挺簡單的哦。   Preparation table.html <div c

興傑 2024-05-04 13:59:16

python包：torchsummary

利用torchsummary觀察每一層的情況   1）按照方式    pip install torchsummary     2）

wenluderen 2024-05-04 13:56:56

Windows使用WSL2及docker(Ubuntu22.04 LTS)

WSL2初始化 1.換源 #1 cp /etc/apt/sources.list /etc/apt/sources.list.bak #2 vim /etc/apt/sources.list # 清空原源並替換成以下源 # deb-src

臨冬城城主 2024-05-04 13:52:56

学习Mysql 你应该懂得

  1、日誌系統：平時在設計系統時可以借鑑一下 參考下面文章 https://www.cnblogs.com/ScarecrowAnBird/p/18163444 2、索引：提高性能利器   3、鎖：提高併發能力小絕招 https://ww

落葉已歸根 2024-05-04 13:45:25

mysql 锁，和加锁机制

背景間隙鎖是MySQL在RR可重複讀隔離級別下用來修復幻讀才引入的一種鎖，間隙鎖也只有在RR可重複讀隔離級別下才會存在，如果是在RC讀已提交隔離級別下，是沒有間隙鎖的存在的。另外，我們也知道，幻讀這種現象也只有在當前讀的時候纔會發生，在一致

落葉已歸根 2024-05-04 13:45:25

深入 Django 模型层：数据库设计与 ORM 实践指南

title: 深入 Django 模型層：數據庫設計與 ORM 實踐指南 date: 2024/5/3 18:25:33 updated: 2024/5/3 18:25:33 categories: 後端開發 tags: Djang

Mifen 2024-05-04 13:38:24

[转帖]Introducing Exadata Cloud@Customer X10M

https://blogs.oracle.com/database/post/introducing-exadata-cloudcustomer-x10m     Extreme Scale with Dramatically

濟南小老虎 2024-05-04 13:29:33