scss基本语法---嵌套、循环、条件(@for,@if),混入@mixin,继承@extend,导入@import,

scss是css预编译器,可以简化css代码的书写,并可以编译成css文件使用;

有关scss的安装使用可以参考:Sass语法---sass的安装和引用_引入sass-CSDN博客

嵌套、循环、条件(@for,@if)

嵌套

scss支持选择器的嵌套写法,具体规则如下:

// scss:body{color:#ccc;.box{color: #666;}
}
// css:body {color: #ccc;
}
body .box {color: #666;
}

属性内部可以嵌套其他 选择器,内部的选择器会和外部的选择器形成子代选择器

//scss:body{color:#ccc;.box{color: #666;}&:hover{color:white;}
}
//css:
body {color: #ccc;
}
body .box {color: #666;
}
body:hover {color: white;
}

嵌套伪类和伪元素时需要带上'&',否则伪类和伪元素会被识别成标签选择器

循环---@for

@for $i from start to end{}@for $i from start through end{}

以上时@for的写法,它们的的差别在于:to不包含end,through包含end,

转换成js的循环就像:

// to:
for(let i = end;i<start;i++){}// through:
for(let i = end;i<=start;i++){}

@for循环 常用来给数字差异的类名选择器子元素伪类添加差异化的属性 

// scss:@for $i from 1 to 3{.box#{$i}{font-size: #{$i}em;}
}.box{@for $i from 1 through 3{.box:nth-child(#{$i}){font-size: #{$i}em;}}
}
// css:.box1 {font-size: 1em;
}.box2 {font-size: 2em;
}.box .box:nth-child(1) {font-size: 1em;
}
.box .box:nth-child(2) {font-size: 2em;
}
.box .box:nth-child(3) {font-size: 3em;
}

以上的scss代码使用了模板语法,#{}类似js的${}可以将scss变量转成css的字符;

注意 :这里的css字符是指 100px 这种,而不是 'red' 

条件---@if ,@else if, @else

和js的if语句一样,这里要注意scss里的布尔运算符(and ,or, not--- &&,||,!)

// scss:
.box {@for $i from 1 through 3 {@if ($i == 2) {.box:nth-child(#{$i}) {color:#ccc;}}.box:nth-child(#{$i}) {font-size: #{$i}em;}}
}
// css:.box .box:nth-child(1) {font-size: 1em;
}
.box .box:nth-child(2) {color: #ccc;
}
.box .box:nth-child(2) {font-size: 2em;
}
.box .box:nth-child(3) {font-size: 3em;
}

混入@mixin,@include

@mixin混入可以定义一个css属性块,类似于js定义函数,使用@include可以将属性块的内容混入到选择器的属性中,

tips:@mixin可以携带参数

scss:

@mixin size($arg){width: $arg;height: $arg;
}
@mixin color{color:#ccc;
}.box{@include size(100px);@include color;
}

css: 

.box {width: 100px;height: 100px;color: #ccc;
}

继承@extend

@extend 可以将其他选择器中的属性混入到自身中,

scss:

.box{@include size(100px);@include color;}%size{width: 100px;height: 200px;
}.item{@extend .box;@extend %size;
}

css:

.box, .item {width: 100px;height: 100px;color: #ccc;
}.item {width: 100px;height: 200px;
}

注意:当使用%标记选择器时,scss不会将其编译成css选择器,这样就变成了一个类似于@mixin混入的效果

导入@import

在scss中,可以使用@import导入(引用)其他scss文件(不同于js,scss文件并不需要导出),通常这会用来单独存放定义好的scss变量

@import 'xxx.scss'
// _root.scss:
// 使用'_'命名的scss文件不会被编译成css,
// 此文件可以作为scss模块进行导入$bgLeft: rgb(255, 185, 185);
$bgRight: rgb(255, 228, 170);
$bg:#ccc;// style.scss:
@import '_root.scss';

注意:使用'_'命名的scss文件不会被编译成css,

补充:sass和scss

sass和scss是同一个css预编译器,只是文件名称和写法上稍有差异,(.sass  .scss)

可以看到在写法上,scss采用的是和css一样的{}包裹块,而sass使用的是类似python这样的缩进语法,其他并无差别

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/381741.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rk3568 OpenHarmony4.1 Launcher定制开发—桌面壁纸替换

Launcher 作为系统人机交互的首要入口&#xff0c;提供应用图标的显示、点击启动、卸载应用&#xff0c;并提供桌面布局设置以及最近任务管理等功能。本文将介绍如何使用Deveco Studio进行单独launcher定制开发、然后编译并下载到开发板&#xff0c;以通过Launcher修改桌面背景…

python一维表转二维表

一维表转二维表 import pandas as pd # 读取数据 product_df pd.read_csv(rD:\excelFile\practice\物品属性值一维表.csv,encodingutf-8) # print(product_df)# 将一维表转变二维 s pd.Series(list(product_df[属性值]),index[product_df[物品编号],product_df[属性名]]) …

TQSDRPI开发板教程:实现PL端的UDP回环与GPSDO

本教程将完成一个全面的UDP运行流程与GPSDO测试&#xff0c;从下载项目的源代码开始&#xff0c;通过编译过程&#xff0c;最终将项目部署到目标板卡上运行演示。此外&#xff0c;我们还介绍如何修改板卡的IP地址&#xff0c;以便更好地适应您的网络环境或项目需求。 首先从Gi…

使用nginx实现一个端口和ip访问多个vue前端

前言&#xff1a;由于安全组要求&#xff0c;前端页面只开放一个端口&#xff0c;但是项目有多个前端&#xff0c;此前一直使用的是一个前端使用单独一个端口进行访问&#xff0c;现在需要调整。 需要实现&#xff1a;这里以80端口为例&#xff0c;两个前端分别是&#xff1a;p…

Zabbix监控系统:zabbix服务部署+基于Proxy分布式部署+zabbix主动与被动监控模式

一、Zabbix概述 1.1 简介 zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案。 zabbix 能监视各种网络参数&#xff0c;保证服务器系统的安全运营&#xff0c;提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题。 zabbix…

高翔【自动驾驶与机器人中的SLAM技术】学习笔记(三)基变换与坐标变换;微分方程;李群和李代数;雅可比矩阵

一、基变换与坐标变换 字小,事不小。 因为第一反应:坐标咋变,坐标轴就咋变呀。事实却与我们想象的相反。这俩互为逆矩阵。 第一次读没有读明白,后面到事上才明白。 起因是多传感器标定:多传感器,就代表了多个坐标系,多个基底。激光雷达和imu标定。这个标定程序,网上,…

【VSCode】安装 【ESP-IDF】插件及【ESP32-S3】新建工程和工程配置

一、搭建基础工程 二、基础工程的文件架构解析 三、调试相关工具介绍 1、串口下载2、JTAG 下载与调试 四、工程的文件架构解析 五、基础工程配置 一、搭建基础工程 在 VS Code 中新建 ESP-IDF 基础工程的步骤如下&#xff1a; 1、启动 VS Code 并打开命令面板 按下“Ctrl…

1小时上手Alibaba Sentinel流控安全组件

微服务的雪崩效应 假如我们开发了一套分布式应用系统&#xff0c;前端应用分别向A/H/I/P四个服务发起调用请求&#xff1a; 但随着时间推移&#xff0c;假如服务 I 因为优化问题&#xff0c;导致需要 20 秒才能返回响应&#xff0c;这就必然会导致20秒内该请求线程会一直处于阻…

科研绘图系列:R语言TCGA分组饼图(multiple pie charts)

介绍 在诸如癌症基因组图谱(TCGA)等群体研究项目中,为了有效地表征和比较不同群体的属性分布,科研人员广泛采用饼图作为数据可视化的工具。饼图通过将一个完整的圆形划分为若干个扇形区域,每个扇形区域的面积大小直接对应其代表的属性在整体中的占比。这种图形化的展示方…

代码审计 | .NET SqlSugar框架注入漏洞

01阅读须知 此文所节选自小报童《.NET 代码审计》专栏&#xff0c;主要内容有涉及的.NET目录和文件操作、SQL注入方向的敏感函数、还有不安全的配置导致的漏洞挖掘思路&#xff0c;对.NET代码审计感兴趣的朋友们可以解锁该电子报刊&#xff0c;解锁更多的报刊内容。 02基本介…

【06】LLaMA-Factory微调大模型——微调模型评估

上文【05】LLaMA-Factory微调大模型——初尝微调模型&#xff0c;对LLama-3与Qwen-2进行了指令微调&#xff0c;本文则介绍如何对微调后的模型进行评估分析。 一、部署微调后的LLama-3模型 激活虚拟环境&#xff0c;打开LLaMA-Factory的webui页面 conda activate GLM cd LLa…

C# Program to print pyramid pattern (打印金字塔图案的程序)

编写程序打印由星星组成的金字塔图案 例子 &#xff1a; 输入&#xff1a;n 6输出&#xff1a; * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 我们强烈建…

Python 机器学习求解 PDE 学习项目——PINN 求解一维 Poisson 方程

本文使用 TensorFlow 1.15 环境搭建深度神经网络&#xff08;PINN&#xff09;求解一维 Poisson 方程: − Δ u f in Ω , u 0 on Γ : ∂ Ω . \begin{align} -\Delta u & f \quad & \text{in } \Omega,\\ u & 0 \quad & \text{on } \Gamma:\partial \Om…

Flink笔记整理(三)

Flink笔记整理&#xff08;三&#xff09; 文章目录 Flink笔记整理&#xff08;三&#xff09;五、DataStream API5.1Environment5.2 Source5.3 Transformation5.4 Sink 总结 五、DataStream API DataStream API是Flink的核心层API&#xff0c;一个Flink程序&#xff0c;其实本…

NoSQL之Redis非关系型数据库

目录 一、数据库类型 1&#xff09;关系型数据库 2&#xff09;非关系型数据库 二、Redis远程字典服务器 1&#xff09;redis介绍 2&#xff09;redis的优点 3&#xff09;Redis 为什么那么快&#xff1f; 4&#xff09;Redis使用场景 三、Redis安装部署 1&#xff0…

批量打断相交线——ArcGISpro 解决方法

在数据处理&#xff0c;特别是地理空间数据处理或是任何涉及图形和线条分析的场景中&#xff0c;有时候需要把相交的线全部从交点打断一个常见的需求。这个过程对于后续的分析、编辑、或是可视化展现都至关重要&#xff0c;因为它可以确保每条线都是独立的&#xff0c;避免了因…

c++ primer plus 第16章string 类和标准模板库, 16.3.3 对矢量可执行的其他操作

c primer plus 第16章string 类和标准模板库, 16.3.3 对矢量可执行的其他操作 c primer plus 第16章string 类和标准模板库, 16.3.3 对矢量可执行的其他操作 文章目录 c primer plus 第16章string 类和标准模板库, 16.3.3 对矢量可执行的其他操作16.3.3 对矢量可执行的其他操作…

DB-GPT:LLM应用的集大成者

整体架构 架构解读 可以看到&#xff0c;DB-GPT把架构抽象为7层&#xff0c;自下而上分别为&#xff1a; 运行环境&#xff1a;支持本地/云端&单机/分布式等部署方式。顺便一提&#xff0c;RAY是蚂蚁深度参与的一个开源项目&#xff0c;所以对RAY功能的支持应该非常完善。…

matlab 声音信号希尔伯特黄变换

1、内容简介 略 91-可以交流、咨询、答疑 2、内容说明 略 Hilbert-Huang变换&#xff08;HHT&#xff09;是一种基于经验的数据分析方法 方法。它的扩展基础是自适应的&#xff0c;因此它可以从非线性和非平稳过程中产生具有物理意义的数据表示。这个 适应性的优势是有代价…

MySQL --- 库的操作

一、创建数据库 create database [ if not exists ] 数据库名; // []中的为可选项 在创建库时&#xff0c;也可以指定数据库采用的字符集(character set)和数据库字符集的校验规则(collate) (当我们创建数据库没有指定字符集和校验规则时&#xff0c;系统使用默认字符集&#x…