Sass基础知识详细讲解【附带表图】

文章目录

  • 前言
  • 使用 Sass
  • Rack / Rails / Merb插件
    • 缓存
    • 选项
    • 语法选择
    • 编码
  • Sass CSS扩展
  • Sass 注释
    • 输出
  • Sass 脚本
  • Sass @-规则和指令
    • Sass 控制指令和表达式
  • Sass 混入指令
  • Sass 功能指令
    • 命名约定
    • Sass 输出样式
    • :nested
    • :expanded
    • :compact
    • :compressed
    • Sass 扩展
    • 缓存存储
    • 自定义导入
  • 后言

前言

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

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

使用 Sass

SASS是更强大和稳定，通过使用CSS的扩展提供基本语言的力量。您可以使用三种不同的方式使用SASS:

  • 作为命令行工具

  • 作为一个Ruby模块

  • 作为Rack启用框架的插件

则需要先安装 Ruby ,Ruby安装教程 请看Ruby安装

Rack / Rails / Merb插件

Rack 是一个Web服务器接口，用于在Ruby中开发Web应用程序。
您可以使用 config 文件夹下的 environment.rb 文件启用 Rails 3 版本中的SASS。使用以下行为Rails 3启用SASS:

config.gem "sass"

您可以使用以下行到Rails 3（和以上版本）的Gemfile，如下所示:

gem "sass"

Rails 是一个开放源代码的Web框架，它使用JSON，HTML，CSS和JavaScript等Web标准来显示用户界面。 要使用Rails，您需要具有Ruby和面向对象编程的基本知识。
如果您要在 Rack 应用程序中启用SASS，请将以下行添加到应用程序根目录中的 config.ru 文件中:

require 'sass/plugin/rack'
use Sass::Plugin::Rack

Merb 是一个Web应用程序框架，可为Rails提供速度和模块化。 要了解有关Merb的更多信息，只需打开此链接 。

您可以在 Merb 中启用SASS，方法是在 config / dependencies.rb 文件中添加以下行:

dependency "merb-haml"

缓存

SASS缓存诸如模板和分支的文档，可以重用它们而不解析它们，除非它们已经改变。它使得SASS文件的编译更快，并且当模板被分割成单独的文件并且被导入到一个大文件中时，工作更好。如果您删除缓存的文件，它们将在下次编译时再次生成。

选项

您可以在Rack应用程序的Rails或 config.ru 文件的 environment.rb 文件中设置选项，方法如下:

Sass::Plugin.options[:style] = :compact

您还可以使用以下行在Merb的 init.rb 文件中设置选项:

Merb::Plugin.config[:sass][:style] = :compact

有一些选项可用于 SASS 和 SCSS ，如下表所述:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

语法选择

您可以使用SASS命令行工具确定您在SASS模板中使用的语法。默认情况下，SASS使用缩进语法，它是基于CSS的SCSS语法的替代。您可以使用类似于SASS程序的SCSS命令行程序，但默认情况下它认为语法是SCSS。

编码

SASS通过指定以下CSS规范使用样式表的字符编码:

  • 首先它检查Unicode字节，下一个@charset声明，然后检查Ruby字符串编码。

  • 接下来如果没有设置，则认为字符集编码为UTF-8。

  • 通过使用@charset声明明确地确定字符编码。只需在样式表的开头使用“@charset encoding name"，SASS将假设这是给定的字符编码。

  • 如果SASS的输出文件包含非ASCII字符，那么它将使用@charset声明。

Sass CSS扩展

在这里插入图片描述

  • 嵌套规则
  • 引用父选择器
  • 嵌套属性
  • 占位符选择器

Sass 注释

在本章中，我们来研究Sass 注释。注释是放在源代码中的不可执行语句。注释使源代码更容易理解。Sass支持两种类型的注释。

  • 多行注释 - 使用/ 和 /写入。多行注释保存在CSS输出中。

  • 单行注释 - 这些是使用 // 和注释写成的。单行注释不会保留在CSS输出中。

<html>
<head>
   <title>SASS comments</title>
   <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
  <h1>Welcome to TutorialsPoint</h1>
  <a href="//www.w3cschool.cn/">TutorialsPoint</a>
</body>
</html>

接下来，创建文件 style.scss 。

style.scss

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

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

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

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

/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: blue; }

输出

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

  • 将上述html代码保存在 sass_comments.html 文件中。

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

在这里插入图片描述

Sass 脚本

SASS使用一组称为SassScript的小型扩展，可以包含在SASS文档中，以从属性值计算变量，并使用变量，算术和其他函数的属性。SassScript还可以使用选择器和属性名称，同时使用mixins（Mixins允许在整个样式表中重用CSS样式）。

下表列出了SASS中使用的一些CSS扩展:
在这里插入图片描述

Sass @-规则和指令

下表列出了您可以在SASS中使用的所有规则和指令。

在这里插入图片描述

Sass 控制指令和表达式

在本章中，我们来研究控制指令和表达式。基于某些条件的样式或多次应用相同样式的变体可以通过使用SassScript支持的控制指令和表达式来实现。这些控制指令是主要在mixin中使用的高级选项。它们需要相当大的灵活性，因为它们是Compass库的一部分。

下表列出了SASS中使用的控制指令和表达式:
在这里插入图片描述

Sass 混入指令

Mixins允许创建一组可以在整个样式表中重复使用的样式，而不需要重新创建非语义类。在CSS中，mixin可以存储多个值或参数和调用函数; 它有助于避免编写重复的代码。混合名称可以交替使用下划线和连字符。以下是Mixins中的指令。

在这里插入图片描述

Sass 功能指令

在本章中，我们来研究函数指令。在SASS中，您可以创建自己的函数，并在脚本上下文中使用它们，或者可以与任何值一起使用。通过使用函数名和任何参数来调用函数。

例子
下面的例子演示了在SCSS文件中使用function指令:

function_directive.html

<html>
<head>
   <title>Nested Rules</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>
   <div class="container" id="set_width">
   <h2>Example for Function directives</h2>
   <p>SASS stands for Syntactically Awesome Stylesheet. </p>
   </div>
</body>
</html>

接下来，创建文件 style.scss 。

style.scss

$first-width: 5px;
$second-width: 5px;

@function adjust_width($n) {
  @return $n * $first-width + ($n - 1) * $second-width;
}

#set_width { padding-left: adjust_width(10); }

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

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

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

#set_width {
  padding-left: 95px; }

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

  • 将上述html代码保存在 function_directive.html 文件中。

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

在这里插入图片描述
在输出中，您可以看到正在应用左侧填充。

就像mixin一样，函数也可以访问全局定义的变量，也可以接受参数。 您应该使用 @return 来调用函数的返回值。 我们可以使用关键字参数调用SASS定义的函数。

调用上述函数，如下所示。

#set_width { padding-left: adjust_width($n: 10); }

命名约定

为了避免命名冲突，函数名称可以带前缀，以便可以轻松区分。 与mixins一样，用户定义的函数也支持变量参数。 函数和其他SASS标识符可以交替使用下划线（_）和连字符（ - ）。

例如，如果函数定义为 adjust_width，则它可以用作 adjust-width，反之亦然。

Sass 输出样式

在本章中，我们将研究 SASS输出样式。SASS生成的CSS文件由反映文档结构的默认CSS样式组成。默认的CSS样式是好的，但可能不适合所有情况，另一方面SASS支持许多其他样式。

它支持以下不同的输出样式:

:nested

嵌套样式是SASS的默认样式。这种方式的样式是非常有用的，当你处理大型CSS文件。它使得文件的结构更可读，并且可以容易地理解。每个属性都有自己的行，每个规则的缩进都是基于嵌套的深度。

例如，我们可以在SASS文件中嵌套代码，如下所示:

#first {
  background-color: #00FFFF;
  color: #C0C0C0; }
  #first p {
    width: 10em; }

.highlight {
  text-decoration: underline;
  font-size: 5em;
  background-color: #FFFF00; }

:expanded

在展开类型的CSS样式中，每个属性和规则都有自己的线。与嵌套CSS样式相比，它需要更多的空间。规则部分由属于规则中的所有属性组成，其中规则不遵循任何缩进。

例如，我们可以扩展SASS文件中的代码，如下所示:

#first {
  background-color: #00FFFF;
  color: #C0C0C0;
}
#first p {
  width: 10em;
}

.highlight {
  text-decoration: underline;
  font-size: 5em;
  background-color: #FFFF00;
}

:compact

紧凑的CSS风格竞争力比Expanded和Nested占用更少的空间。它主要关注选择器而不是其属性。每个选择器占用一行，其属性也放在同一行。嵌套规则彼此相邻，没有换行符，并且独立的规则组之间将有换行符。

例如，我们可以压缩SASS文件中的代码，如下所示:

#first { background-color: #00FFFF; color: #C0C0C0; }
#first p { width: 10em; }
.highlight { text-decoration: underline; font-size: 5em; background-color: #FFFF00; }

:compressed

与上面讨论的所有其他样式相比，压缩的CSS样式占用最少的空间。它仅提供空格，以在文件末尾分隔选择器和换行符。这种方式的样式是混乱，不容易阅读。

例如，我们可以压缩SASS文件中的代码，如下所示:

#first{background-color:#00FFFF;color:#C0C0C0}#first p{width:10em}.highlight{text-decoration:underline;font-size:5em;background-color:#FFFF00}

Sass 扩展

您可以扩展Sass的功能，为用户提供不同类型的功能和自定义。要使用这些功能，用户应该有Ruby的知识。

定义自定义Sass函数
您可以在使用Ruby API时定义自己的Sass函数。您可以通过将自定义函数添加到Ruby方法来添加自定义函数，如下面的代码所示:

module Sass::Script::Functions
  def reverse(string)
    assert_type string, :String
    Sass::Script::Value::String.new(string.value.reverse)
  end
  declare :reverse, [:string]
end

在代码中你可以看到，Functions.declare 指定函数的参数名称。如果失败，它将不接受任何参数，即使函数是工作，它也采取任意关键字参数。您可以使用 value 存取器获取Ruby值，并使用 rgb，红色，绿色 或蓝色。

缓存存储

Sass存储解析的文档的缓存，可以重新使用而无需再次解析。Sass使用:cache_location 在文件系统上写入高速缓存文件。它可以更快地编译Sass文件，如果删除缓存文件，下次编译时将再次生成它们。您可以通过设置:cache_store 选项来定义自己的缓存存储。这将写入文件系统上的缓存文件或共享缓存文件到Ruby进程或机器。Sass使用Sass :: CacheStores ::Base `子类的实例来存储和检索缓存结果。

自定义导入

Sass使用 @import 导入SCSS和Sass文件，并将路径传递到 @import 规则，以便为指定的路径找到合适的路径代码。Sass导入器使用文件系统加载代码并使用数据库或不同的文件命名方案添加到加载。

单个导入器可以进行单个文件加载，并且可以与文件系统的路径一起放置在:load_paths数组中。使用 @import 时，Sass寻找导入导入器路径的加载路径。找到路径时，将使用导入的文件。用户可以从 Sass :: Importers :: Base 继承导入程序。

后言

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

电子学会C/C++编程等级考试2022年03月（三级）真题解析

电子学会C/C++编程等级考试2022年03月（三级）真题解析

C/C++等级考试（1~8级）全部真题・点这里 第1题：和数 给定一个正整数序列，判断其中有多少个数，等于数列中其他两个数的和。 比如，对于数列1 2 3 4, 这个问题的答案就是2, 因为3 = 2 + 1, 4 = 1 + 3。 时间限制：10000 内存限制：65536输入 共两行，第一行是数列中数的个数…
阅读更多...
Pytorch-gpu环境篇

Pytorch-gpu环境篇

最最最头疼的就是配环境了 包之间的版本匹配问题 INSTALLING PREVIOUS VERSIONS OF PYTORCH 要考虑到pytorch和torchvision之间的匹配关系 显卡版本匹配问题
阅读更多...
小航助学题库蓝桥杯题库stem选拔赛（23年8月）（含题库教师学生账号）

小航助学题库蓝桥杯题库stem选拔赛（23年8月）（含题库教师学生账号）

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;_程序猿下山的博客-CSDN博客 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;_程序猿下山的博客-CSD…
阅读更多...
达索系统3DEXPERIENCE WORKS 2024电磁仿真功能

达索系统3DEXPERIENCE WORKS 2024电磁仿真功能

在设计工作中&#xff0c;将复杂的模型进行网格分割是必不可少的一步&#xff0c;这样可以化繁而简&#xff0c;也可以让后续的工作更容易开展。 电磁仿真可帮助您在复杂、嘈杂的电磁环境中提高效率&#xff0c;在确保兼容性的同时&#xff0c;保障出众性能。 一系列专用求解器…
阅读更多...
【论文阅读】ActiveNeRF：通过不确定性估计候选新视图

【论文阅读】ActiveNeRF：通过不确定性估计候选新视图

【论文阅读】ActiveNeRF: Learning where to See with Uncertainty Estimation Abstract1 Introduction3 Background4 NeRF with Uncertainty Estimation5 ActiveNeRF5.1 Prior and Posterior Distribution5.2 Acquisition Function5.3 Optimization and Inference 6 Experimen…
阅读更多...
nodejs+vue+elementui足球篮球联赛系统

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

系统主要是以后台管理员管理为主。管理员需要先登录系统然后才可以使用本系统&#xff0c;管理员可以对个人中心、用户管理、赛事信息管理、球队信息管理、球员信息管理、比赛分值板管理、系统管理等进行添加、查询、修改、删除&#xff0c;以保障足球联赛管理系统的正常运行。…
阅读更多...
位图/布隆过滤器+海量数据处理总结

位图/布隆过滤器+海量数据处理总结

位图 题目&#xff1a; 第一种方法&#xff1a;二分查找。虽然二分的时间复杂度为o(log n),但是这个方法是不可行的&#xff0c;我们就算假设这40亿个数据是已经排序完成了的数据&#xff0c;但是40亿个整数在内存需要消耗的内存就是差不多16G&#xff0c;这个消耗是非常巨大的…
阅读更多...
Ubuntu 22.03 LTS 安装deepin-terminal 分屏

Ubuntu 22.03 LTS 安装deepin-terminal 分屏

安装 源里面自带了这个软件&#xff0c;可以直接装 sudo apt install deepin-terminal 启动 按下Win键&#xff0c;输入deep即可快速检索出图标&#xff0c;点击启动 效果 分屏 CtrlShiftH 水平分割 CtrlShiftJ 垂直分割 最多分割成四个小窗口&#xff0c;鼠标点击可以切换…
阅读更多...
互联网金融智能风险防控技术要求

互联网金融智能风险防控技术要求

《互联网金融智能风险防控技术要求》 8月6日&#xff0c;国家市场监督管理总局和国家标准化管理委员会发布《互联网金融智能风险防控技术要求》&#xff08;GB/T 42929-2023&#xff09;&#xff08;以下简称“《要求》”&#xff09;&#xff0c;将于2023年12月1日实施。 《要…
阅读更多...
priority_queue优先级队列基本使用

priority_queue优先级队列基本使用

目录 介绍 头文件 基本使用 constructor empty size top push pop swap 使用 大根堆 小根堆 结果 介绍 类似于堆 头文件 #include <queue> 基本使用 constructor empty 判空 size 元素个数 top 堆顶元素 push 入元素 pop 弹出堆顶元素 swap …
阅读更多...
快速搭建一个SpringCloud、SpringBoot项目 || 项目搭建要点

快速搭建一个SpringCloud、SpringBoot项目 || 项目搭建要点

1. 基本结构 建立springcloud项目从表入手&#xff0c;分析好需求建立表结构后&#xff0c;使用mybatis-plux生成POJO类&#xff0c;在对应的model模块中。 2. 微服务部分架构 2.1 依赖 service 微服务模块的依赖仅包含如下&#xff0c;数据库等依赖包含在model中&#xff0c…
阅读更多...
Linux 内核栈保护

Linux 内核栈保护

栈保护可以检测栈被写坏的情况。如果怀疑有此类情况&#xff0c;可以将栈保护打开试试 详细可参考文章 栈保护杂记-CSDN博客 栈保护开启 下图是关于strong的解释&#xff0c;在什么情况下会加入栈保护 后面由于gcc版本的原因&#xff0c;好像不支持开启栈保护。后面再进行效果…
阅读更多...
红黑树（万字图文详解）

红黑树（万字图文详解）

红黑树 1. 红黑树的概念2. 红黑树的性质3. 红黑树节点的定义4. 红黑树结构5. 红黑树的插入操作5.1 按照二叉搜索的树规则插入新节点5.2 检测新节点插入后&#xff0c;红黑树的性质是否造到破坏5.2.1 情况一: cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在且为红…
阅读更多...
C_6微机原理

C_6微机原理

一、单项选择题&#xff08;本大题共 15小题&#xff0c;每小题3分&#xff0c;共45分。在每小题给出的四个备选项中&#xff0c;选出一个正确的答案&#xff0c;请将选定的答案填涂在答题纸的相应位置上。 n1 位有符号数 的补码表示范围为&#xff08;&#xff09; A. -2n&l…
阅读更多...
Mybatis 源码搭建

Mybatis 源码搭建

文章目录 源码下载测试模块搭建学习博客 源码下载 首先下载mybatis-parent的源码&#xff1a;gitee地址 > https://gitee.com/callback_lab/mybatis-parent.git 然后下载mybatis的源码&#xff1a;gitee地址 > https://gitee.com/callback_lab/mybatis-src.git 带中文…
阅读更多...
SpringCloud之Gateway（统一网关）

SpringCloud之Gateway（统一网关）

文章目录 前言一、搭建网关服务1、导入依赖2、在application.yml中写配置 二、路由断言工厂Route Predicate Factory三、路由过滤器 GatewayFilter案例1给所有进入userservice的请求添加一个请求头总结 四、全局过滤器 GlobalFilter定义全局过滤器&#xff0c;拦截并判断用户身…
阅读更多...
瑞数五代ast反混淆笔记一

瑞数五代ast反混淆笔记一

第一部分 瑞数五代ast反混淆笔记一 文章目录 前言一、分析第一层js文件二、转换为switch-case三、效果图总结 前言 瑞数五代的反混淆做了很久了&#xff0c;当时写的很复杂&#xff0c;也没有记笔记&#xff0c;现在看代码都看不懂了&#xff0c;重新归顺下逻辑思路 一、分析第…
阅读更多...
python+pytest接口自动化(2)-HTTP协议基础

python+pytest接口自动化(2)-HTTP协议基础

HTTP协议简介 HTTP 即 HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09;&#xff0c;是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。 设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。HTTP 协议在 OSI 模型…
阅读更多...
C#-创建用于测试的父类StartupBase用于服务注入

C#-创建用于测试的父类StartupBase用于服务注入

当写完C#代码&#xff0c;需要对某个方法进行测试。 创建一个XXXTests.cs文件之后&#xff0c;发现需要注入某个服务怎么办&#xff1f; 再创建一个StartupBase.cs文件&#xff1a; public abstract class StartupBase {public IConfiguration Configuration { get; }public …
阅读更多...
MATLAB中FFT频谱分析使用详解

MATLAB中FFT频谱分析使用详解

文章目录 语法说明语法一&#xff1a;Y fft(X)fft(X)返回X长度的傅里叶变换 语法二&#xff1a;Y fft(X,N)如果 X的长度小于 N&#xff0c;则为 X补上尾零以达到长度 N(FFT插值)双边谱转换为单边谱 如果 X 的长度大于 N&#xff0c;则对 X 进行截断以达到长度 N。 语法三&…
阅读更多...
最新文章

Copyright @ 2022~2023