Sass 语法详细介绍

文章目录

  • 前言
  • SASS缩进语法
  • SASS的语法差异
  • 多线选择器
  • 注释
    • @import
  • Mixin指令
  • 已弃用的语法
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:Sass和Less
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

SASS缩进语法

SASS缩进语法或只是SASS是基于CSS的SCSS语法的替代。

  • 它使用缩进而不是 {和} 来分隔块。

  • 要分隔语句,它使用换行符而不是分号(;)。

  • 属性声明和选择器必须放在一行,{和}中的语句必须放在新行和缩进。

例如,考虑以下SCSS代码:

.myclass {color= red;font-size= 0.2em;
}

缩进语法是一种旧的语法,不建议在新的Sass文件中使用。如果使用此文件,它将在CSS文件中显示错误,因为我们使用 = 而不是:来设置属性和变量。

使用下面的命令编译上面的代码:

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来,运行上面的命令,它将在 style.css 文件中显示错误,如下所示:

Error: Invalid CSS after "  color= red": expected "{", was ";"on line 2 of C:\ruby\lib\sass\style17.scss1: .myclass {
2:   color= red;
3:   font-size= 0.2em;
4: }

SASS的语法差异

大多数CSS和SCSS语法在SASS中工作完美。但是,有一些差异,在以下部分中解释:

属性语法
CSS属性可以通过两种方式声明:

  • 属性可以声明为类似于CSS但没有分号(;)。

  • colon(:)将以每个属性名称为前缀。

例如,您可以写为:

.myclass:color red:font-size 0.2em

默认情况下,可以使用上述两种方法(属性声明不带分号,冒号以属性名称开头)。

多线选择器

在缩进语法中,选择器可以在逗号后出现时放在换行符上。

例子
下面的示例描述了在SCSS文件中使用多行选择器:

<html>
<head><title>Multiline Selectors</title><link rel="stylesheet" type="text/css" href="style.css" /><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><script src="/attachments/tuploads/sass/jquery.min.js"></script><script src="/attachments/tuploads/sass/bootstrap.min.js"></script>
</head>
<body><h2>Example using Multiline Selectors</h2><p class="class1">Welcome to Tutorialspoint!!!</p><p class="class2">SASS stands for Syntactically Awesome Stylesheet...</p>
</body>
</html>

接下来,创建文件 style.scss。 请注意 .scss 扩展名。

style.scss

.class1,
.class2{color:red;
}

您可以通过使用以下命令让SASS查看文件并在SASS文件更改时更新CSS:

sass --watch C:\ruby\lib\sass\style.scss:style.css

接下来执行上面的命令,它将用下面的代码自动创建 style.css 文件:

生成的 style.css 如下所示:

style.css

.class1,
.class2 {color: red;
}

让我们执行以下步骤,看看上面的代码如何工作:

  • 在 multiline_selectors.html 文件中保存html代码。

  • 在浏览器中打开此HTML文件,将显示如下输出。

注释

注释占用整行并包围嵌套在它们下面的所有文本,它们是基于行的缩进语法。

@import

在SASS中, @import 指令可以使用/不使用引号。与SCSS不同,它们必须使用引号。

例如,在SCSS中, @import 指令可以用作:

@import "themes/blackforest";
@import "style.sass";

这可以在SASS中写为:

@import themes/blackforest
@import fontstyle.sass

Mixin指令

SASS支持 @mixin 和 @include 等指令的缩写。您可以使用 = 和 + 字符替换 @mixin 和 @include 更简单,更容易阅读。

例如,您可以将mixin指令写为:

=myclassfont-size: 12px;p+myclass

是相同的

@mixin myclassfont-size: 12px;p@include myclass

已弃用的语法

SASS支持使用一些旧的语法。但是,在SASS中使用此语法是不推荐。如果您使用此语法将显示警告,并且将在以后的版本中删除它。一些旧的语法如下表所示。

在这里插入图片描述

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

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

相关文章

R语言期末考试复习二

上篇文章的后续&#xff01;&#xff01;&#xff01;&#xff01; http://t.csdnimg.cn/sqvYD 1.给向量vec1设置名为"A","B","C","D","E","F","G"。 2.将矩阵mat1的行名设置为"Row1"&#…

form表单封装button封装的两种方式

1.插槽方式 //子组件 <el-form-item :class"isCustom?custom-form-item:"><div v-for"(item,index) in btnList" :key"index"><slot :item"item" :formRef"formRef"><FormButton:formData"model…

【Python】使用execute(sql)执行insert之后没有插入数据

在sql为insert语句&#xff0c;用Python的sqlalchemy模块中的execute()执行之后没有插入数据的情况&#xff0c;主要是因为sqlalchemy版本的更新&#xff0c;不能直接只用execute()了&#xff0c;MySQL数据库连接的配置和sql都需要多处理一步&#xff1a; 之前的版本&#xff…

matlab处理数据,两行相同共有多行如何将重复的去掉

有一个36001x10的数据&#xff0c;我如何删除奇数行变成18001x10 data rand(36001, 10); % 举例&#xff1a;使用随机数据 % 删除奇数行 data_even_rows data(2:2:end, :&#xff09;; % 如果你想保留大小为 18001x10 的矩阵&#xff0c;可以进行如下操作&#xff1a; da…

【OpenCV】图像上绘制文字cv2.putText()函数用法,添加倾斜透明水印

图像上绘制文字 1. 概述2. cv2.putText()函数参数3. 图像上绘制非中文文字4. 图像上绘制中文文字5. 图片上添加倾斜透明文字水印 1. 概述 在OpenCV中&#xff0c;调用cv2.putText()函数可添加文字到指定位置&#xff0c;对于需要在图片中加入文字的场景提供了一种比较直接方便的…

开源编译器LLVM-源码编译

1.编译参考 详细的cmake编译选项&#xff0c;参考&#xff1a;Building LLVM with CMake — LLVM 18.0.0git documentation 2.编译脚本 utils.bash build-llvm.sh 依赖 utils.bash 脚本 #!/usr/bin/env bashCOLOR_FATAL$\033[41;38m COLOR_ERROR$\033[1;31m COLOR_WARN$\03…

Git多库多账号本地SSH连接配置方法

Git多库多账号本地SSH连接配置方法 一、前言二、环境三、帮助文档四、多环境配置4.1 配置config文件 五、生成RSA秘钥对5.1 ssh秘钥位置5.2 生成秘钥对&#xff08;公钥、私钥&#xff09;5.3 添加公钥到GIT用户配置中 六 测试git是否可以使用七、总结 一、前言 在使用Git管理…

qt QString字符串常用转换

QString字符串转换类型,常见的有: 1. const char*初始化QString.即const char*类型转QString字符串类型. QString str("肖战");qDebug() <<str; 2. QChar数组初始化QString.即QChar字符数组转QString字符串. QChar cHello[5] {H,e,l,l,o};QString strHell…

nodejs+vue+elementui足球篮球联赛系统

系统主要是以后台管理员管理为主。管理员需要先登录系统然后才可以使用本系统&#xff0c;管理员可以对个人中心、用户管理、赛事信息管理、球队信息管理、球员信息管理、比赛分值板管理、系统管理等进行添加、查询、修改、删除&#xff0c;以保障足球联赛管理系统的正常运行。…

spring Cloud在代码中如何应用,erueka 客户端配置 和 服务端配置,Feign 和 Hystrix做高可用配置

文章目录 Eureka一、erueka 客户端配置二、eureka 服务端配置 三、高可用配置FeignHystrix 通过这篇文章来看看spring Cloud在代码中的具体应用&#xff0c;以及配置和注解&#xff1b; Eureka 一、erueka 客户端配置 1、Eureka 启禁用 eureka.client.enabledtrue 2、Eurek…

【python程序】把小于10的数值都变成1

【python程序】把小于10的数值都变成1 import numpy as np import xarray as xra xr.DataArray(np.arange(25).reshape(5, 5)) a[np.where(a < 10)] 1 print(a)

对百度搜索页面设计的测试用例设计

测试百度搜索页面设计时&#xff0c;可以设计多种测试用例来确保页面的功能、性能和用户体验。以下是一些可能的测试用例&#xff1a; 搜索框功能测试&#xff1a; 输入有效关键字&#xff0c;验证搜索结果是否正确显示。输入无效关键字或特殊字符&#xff0c;验证系统是否给出…

公网穿透和RTC

RTC RTC 是 Real-Time Communication 的简写&#xff0c;正如其中文名称 “即时通讯” 的意思一样&#xff0c;RTC 协议被广泛用于各种即时通讯领域&#xff0c;诸如&#xff1a; 在线教育&#xff1b;直播中的主播连麦 PK&#xff1b;日常生活的音视频电话&#xff1b;.....…

Filebeat 部署

目录 &#xff08;1&#xff09;下载 &#xff08;2&#xff09;解压 &#xff08;3&#xff09;修改配置 &#xff08;4&#xff09;启动 &#xff08;5&#xff09;配置nginx 为什么用 Filebeat &#xff0c;而不用原来的 Logstash 呢&#xff1f; 原因很简单&#xff0c…

Python基础语法之学习type()函数

Python基础语法之学习type函数 一、代码二、效果 查看数据类型或者说查看变量存储的数据类型 一、代码 print(type("文本")) print(type(666)) print(type(3.14))二、效果 梦想是生活的指南针&#xff0c;坚持追逐梦想&#xff0c;终将抵达成功的彼岸。不要害怕失败…

深度学习中的Transformer机制

Transformer 是一种深度学习模型结构&#xff0c;最初由Vaswani等人于2017年提出&#xff0c;用于自然语言处理任务&#xff0c;尤其是机器翻译。Transformer 引入了自注意力机制&#xff08;self-attention mechanism&#xff09;&#xff0c;这是其在处理序列数据时的关键创新…

什么是终端服务器

什么是终端服务器 服务器的种类非常多&#xff0c;除了最为常用的wed服务器之外&#xff0c;还有高防服务器、缓存服务器以及终端服务器。什么是终端服务器&#xff0c;终端服务器有哪些工作方式&#xff1f; 终端服务器 什么是终端服务器终端服务器可以用在局域网上将很多终…

ESP32-Web-Server编程-JS 基础 1

ESP32-Web-Server编程-JS 基础 1 概述 前述分别在 HTML 基础 和 CSS 基础 中介绍了 HTML、CSS 的基本内容。HTML 定义了网页中包含哪些对象&#xff0c;CSS 定义了对象的显示样式。JavaScript(LiveScript)是一种运行于客户端的解释性脚本语言&#xff0c;使 HTML 页面更具动态…

多线程04 死锁,线程可见性

前言 前面我们讲到了简单的线程安全问题以及简单的解决策略 其根本原因是cpu底层对线程的抢占式调度策略,随机调度 其他还有一些场景的问题如下 1.多个线程同时修改一个变量问题 2.执行的操作指令本身不是原子的 比如自增操作就分为三步,加载,自增,保存 3.内存可见性问题 4.指令…

9.增删改操作

目录 一、插入操作 1、为表的所有字段插入数据 2、为表的指定字段插入数据 3、同时插入多条记录 4、将查询结果插入表中&#xff1a; 二、更新操作 三、删除操作 四、练习题 一、插入操作 在使用数据库之前&#xff0c;数据库中必须要有数据&#xff0c;MYSQL中使INSE…