使用Sass设置背景-定义数组@for循环

最新推荐文章于 2024-04-11 18:02:19 发布
最新推荐文章于 2024-04-11 18:02:19 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： 前端技术 文章标签： sass css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40815009/article/details/119295172
版权

在这里插入图片描述
假设在项目中，我们要实现这样一个效果。9个功能入口菜单，每个菜单模块都有不同的渐变背景颜色及图标，在原生css中我们可能需要单独写每一个item的样式，sass为我们提供了方便的语法；
-----------声明变量

/*公共样式文件default.scss中*/
$colors01: #066efc;
$colors02: #05cccc;
$colors03: #fb6502;
$colors04<
最低0.47元/天 解锁文章
宛宛心里的月亮
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
scss @for 循环
南京小龙虾的博客
08-20 3326
在实现样式过程中碰到了一个隔一定时间右滑出来的效果，一开始一个个写，感觉太麻烦了，搜了一下scss有个@for方法，效果很强大 使用scss @for循环 注意一下在选择器调用循环项 $i 和样式里调用是有区别的，选择器里是用插值 #{} ，可以网上找点资料细看一下，然后看网上说还有 from 1 to 16 是不包含结束值16的循环， from 1 through 16包含结...
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图...
weixin_30414245的博客
11-28 179
技术的新发展，除计算机可以接入互联网之外，平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代，构建多屏体验也不是听说的那么难。但是这也增加了学习CSS的难度？不知道如何上手，只懂一点基础的CSS语法，在移动互联时代，难道我们就这样落伍了？？好好学习吧，看完《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》，给自己的未来打气！ 5.1...
【日常记录】【CSS】SASS循环的使用
呆呆狗
04-11 807
sass for 循环的使用
scss的高级用法——循环
xinTianou123的博客
11-18 1975
周末愉快呀！一起来学一点简单但非常有用的css小知识。 最近在一个项目中看到以下css class写法。
Sass-@for,@while,@each
BraveWangDev
02-07 1307
本章介绍Sass-@for,@while,@each语法及使用@charset "utf-8";//@for //1-10 包含10 @for $i from 1 through 10{ .item_#{$i}{ background-position: -($i - 1) * 20px 0; } }//1-10 不包含10(1-9) @for $i from 1 to 10{
Sass使用for循环
知行合一
05-17 5744
Sass使用for循环，遍历样式.item的宽，从1到100百分比
Sass笔记
Ma_programmer的博客
06-22 707
目录 一、变量格式--$ 二、变量类型 三、变量作用域 四、引用规则--@import 五、变量运算 六、Mixin（混合宏）--@mixin 七、Sass继承---@extend 八、Sass嵌套 九、Sass条件控制--@if/@else if/@else 十、Sass循环控制--@for/@while/@each 十一、Sass内置函数 变量格式--$ 1. 变量定义：$自定义名字 ：值 $width：100px 默认变量定义：$自定义名...
sass-extract-js：sass-extract的插件，可将Sass变量转换为纯JS对象
02-05
sass-extract-js 插件，用于将Sass全局变量转换为纯JS对象。 ?？ 为什么？ 我在使用Sass的团队中工作。 我们有一个共享变量文件，该文件在整个样式指南和组件中都被引用。 我想开始在某些项目中使用，并希望保持...
node-sass-windows-x64-93-binding.node文件下载
03-09
node-sass-windows-x64-93-binding.node文件下载
node-sass和sass-loader下载.zip
02-18
然而，在Node.js环境中使用Sass，我们需要借助于`node-sass`和`sass-loader`这两个工具。 `node-sass`是Sass编译器的Node.js版本，它实现了Sass的完整功能，并将其转化为浏览器可以识别的CSS。由于`node-sass`依赖...
npm install安装依赖，node-sass报错：Failed at the node-sass@7.0.3 postin
11-25
我们从从git上克隆前端项目到本地初始化项目（npm install），安装到一半报错经常会碰到这个问题Failed at the node-sass@7.0.3 postinstall script
nuxt-sass-resources-loader：用于NuxtJ的SASS资源（例如变量，mixins等）模块
02-05
// nuxt-sass-resorces-loader export default { modules : [ 'nuxt-sass-resources-loader' ] , // your settings here sassResources : [ '@/path/to/first-resources.sass' ] } // @nuxtjs /style-re
sass使用
爱飞翔
03-05 448
sass是啥 CSS 不是一个编程语言，可以用它来开发网页样式，但是没有办法用它进行编程。SASS 的 出现，让 CSS 实现了通过代码编程来实现的方式。 SASS 是一种 CSS 开发工具，提供了许多便利的写法，让CSS 的处理实现了可编程处理。 SASS 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性，可以生成风格良好的 CSS 样式表文件，易于组织和维护。
用scss写一个数组及遍历
dx_zheng的博客
07-23 1870
// 定义数组，数组元素用逗号隔开 $liColor:#f5ad1b,#5f89ce,#94bf45,#da8ec5,#78bfc2,#bec278; // 开始 @each 循环遍历数组 // $c 作为循环变量，代表了数组的元素，不是索引~！！！ @each $c in $liColor{ $i:index($liColor,$c); // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！ li:nth-child( #{$i} ){
Sass的基本使用
weixin_45682952的博客
09-10 569
首先新建一个.scss文件，它会自动生成.css和.map文件，编写sass代码，它会实时的编译.css文件，.map文件是干什么呢？它是一个.json格式的文件，可直接调用sass源文件。 一、变量的使用 变量是以$符号开头的。 全局变量（写在函数体外部）: $color:red; body{ background-color:$color; } 局部变量（写在函数体内部）： body{ $color:red; backgorund-color:$color; }
动态替换SCSS主题色配置
m0_61731068的博客
10-27 1007
动态配置scss主题色的经验记录
18-sass总结
我的一篇的博客
05-15 267
SASS 是css的一种扩展语言，可以快速编写css. 安装 sass 是基于ruby语言，安装ruby (ruby -v) get install sass (sass -v) 输出方式 nested : 嵌套缩进的 css 代码，它是默认值 expanded:没有缩进的、扩展的 css 代码 compact:简洁格式的 css 代码 compressed:压缩后的 css 代码 导入功能 @import ‘名字’; 如果不想被编译，在名字前面添加一个下划线 嵌套功能 选择器嵌套 属
Sass详解
热门推荐
RayShyy的博客
04-27 1万+
1. 什么是Sass? Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 2. 为什么使用Sass？ 它能够帮我们更快更高效的编写更好维护的 css； Sass 引入合理的样式复用机制，可以节约很多时间来重复。 Sass的好处当然不仅于此，当你使用之后便会发现其中的妙处。 3. Sass语法 3.1 变量 变量可以存储样式信息，以便后面使用。 比如一个样式在页面的多个地方使
Sass 颜色函数
ivenqin的博客
06-18 824
本节我们来看一下 Sass 中的颜色函数，颜色函数可以分为三部分，分别是颜色设置、颜色获取以及颜色操作。Sass 中的颜色函数有很多，下面我们来看一些 Sass 中常用的颜色函数： 函数 描述 rgb() 创建一个 Red-Green-Blue（RGB） 色 rgba() 创建一个带有透明度值的颜色 hsl() 通过色相、饱和度和亮度的值创建一个颜色 hsla() 通过色相、饱和度、亮度和透明的值创建一个颜色 red() 从一个颜色中获取其中红色值 lightness 获
npm install node-sass@4.14.1 --save-dev npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve
最新发布
06-23
当你在命令行中运行 `npm install node-sass@4.14.1 --save-dev` 时，遇到 `npm ERR! code ERESOLVE` 错误，这通常意味着 npm 在尝试解决依赖关系时遇到了冲突。`node-sass` 版本 4.14.1 和你的项目现有的其他依赖可能不兼容，导致安装失败。 - `npm install` 命令用于安装 Node.js 包，`--save-dev` 表示将这个包作为开发依赖（devDependencies）添加到项目的 package.json 文件中。 - `eresolve` 是 npm 6.14+ 引入的一种新的错误类型，用于处理依赖关系的解析问题。 解决这个问题，你可以尝试以下步骤： 1. **查看错误详情**：运行 `npm ls node-sass` 或 `npm ls --depth=0` 查看具体的依赖树，找出哪个依赖引起冲突。 2. **更新其他依赖**：确认是否有过时或不兼容的依赖，尝试更新到较新版本或锁定依赖版本。 3. **排除特定版本**：如果问题确定是由 `node-sass@4.14.1` 引起，可以尝试使用 `npm install node-sass@^4.14.1` 来安装指定范围内的版本，而不是特定版本号。 4. **清理并重新安装**：执行 `npm cache clean --force` 清除缓存，然后重新运行 `npm install node-sass@4.14.1`。 5. **创建一个新的项目或隔离环境**：如果问题仍然存在，考虑是否可以将 `node-sass` 作为单独的项目或使用 npm 的工作区（npm workspace）来解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值