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::Functionsdef reverse(string)assert_type string, :StringSass::Script::Value::String.new(string.value.reverse)enddeclare :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 继承导入程序。

后言

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

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

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

相关文章

小程序静默授权获取unionid

小程序静默授权获取unionid

文章目录 导文文章重点 导文 小程序静默授权获取unionid 文章重点 用wx.login(Object object)放到app.js里面 wx.login({success (res) {console.log(123);if (res.code) {//发起网络请求// wx.request({// url: https://example.com/onLogin,// data: {// code: res.…
阅读更多...
淘宝API接口系列：连接商户与消费者的桥梁

淘宝API接口系列：连接商户与消费者的桥梁

一、引言 淘宝&#xff0c;作为中国最大的电商平台之一&#xff0c;拥有数以亿计的注册用户和海量的商品信息。淘宝API接口作为连接商户与消费者的重要桥梁&#xff0c;为开发者提供了丰富的电商资源&#xff0c;帮助他们创新和优化业务。本文将深入探讨淘宝API接口的相关知识…
阅读更多...
C语言——求π的近似值

C语言——求π的近似值

#define _CRT_SECURE_NO_WARNINGS 1#include<stdio.h> #include<math.h> int main() {int s;double n,t,pi;t1;pi0;n1.0;s1;while (fabs(t)>1e-6){pipit; nn2; s-s; ts/n;}pipi*4;printf("pi%lf\n",pi);return 0; }这里是求小数点后6位——1e-6&#…
阅读更多...
MySQL进阶知识：二

MySQL进阶知识：二

目录 视图 基本语法 视图的更新 视图的作用 存储过程 介绍 存储过程基本语法 存储过程的变量 系统变量 用户自定义变量 局部变量 存储过程的判断逻辑 存储过程的参数 存储过程中的流程控制 存储过程中的循环 while的基本语法 repeat的基本语法 loop的基本语法…
阅读更多...
MPLS和互联网专线是什么？

MPLS和互联网专线是什么？

MPLS专线和互联网专线是企业网络连接的常见方式。MPLS专线基于多协议标签交换&#xff08;MPLS&#xff09;该技术利用专线连接两个或多个分支机构&#xff0c;提供高质量的数据传输服务。互联网专线是基于公共知识产权基础设施的连接方式&#xff0c;成本低&#xff0c;但速度…
阅读更多...
钉钉直播不了检查防火墙配置没有拦截应用测试直通都放行的，电脑还可以ping通直播域名，就是开始不了直播

钉钉直播不了检查防火墙配置没有拦截应用测试直通都放行的，电脑还可以ping通直播域名，就是开始不了直播

环境： 防火墙 AF8.0.17 Win10 专业版 问题描述： 钉钉直播不了检查防火墙配置没有拦截应用测试直通都放行的，电脑还可以ping通直播域名，就是开始不了直播 钉钉直播不了 不能直播电脑电脑可以ping通直播域名 防火墙查了3个域名都没有拦截，AF测试应用直通都放行的 解…
阅读更多...
python实现rpc的几种方式（SimpleXMLRPCServer 自带的、第三方ZeroRPC）、连接linux远程开发分布式锁、分布式id

python实现rpc的几种方式（SimpleXMLRPCServer 自带的、第三方ZeroRPC）、连接linux远程开发分布式锁、分布式id

1 python实现rpc的几种方式 1.1 SimpleXMLRPCServer 自带的 1.2 第三方ZeroRPC 2 连接linux远程开发 3 分布式锁 4 分布式id 1 python实现rpc的几种方式 # 远程过程调用-1 借助于rabbitmq,可以跨语言-2 SimpleXMLRPCServer 自带的-3 ZeroRPC-4 GRPC&#xff1a;跨语言的 htt…
阅读更多...
Vue3-toRaw 和 markRaw 函数

Vue3-toRaw 和 markRaw 函数

Vue3-toRaw 和 markRaw 函数 toRaw(转换为原始)&#xff1a;将响应式对象转换为普通对象&#xff0c;只适用于 reactive 生成的响应式对象。markRaw(标记为原始)&#xff1a;标记某个对象&#xff0c;让这个对象永远都不具备响应式。一些集成的第三方库&#xff0c;会有大量的…
阅读更多...
深入了解Java8新特性-日期时间API：OffsetDateTime类

深入了解Java8新特性-日期时间API：OffsetDateTime类

阅读建议 嗨&#xff0c;伙计&#xff01;刷到这篇文章咱们就是有缘人&#xff0c;在阅读这篇文章前我有一些建议&#xff1a; 本篇文章大概24000多字&#xff0c;预计阅读时间长需要20分钟。本篇文章的实战性、理论性较强&#xff0c;是一篇质量分数较高的技术干货文章&…
阅读更多...
【axios封装】万字长文，TypeScript实战，封装一个axios - 基础封装篇

【axios封装】万字长文，TypeScript实战，封装一个axios - 基础封装篇

目录 前言版本环境变量配置引入的类型1、AxiosIntance: axios实例类型2、InternalAxiosRequestConfig: 高版本下AxiosRequestConfig的拓展类型3、AxiosRequestConfig: 请求体配置参数类型4、AxiosError: 错误对象类型5、AxiosResponse: 完整原始响应体类型 目标效果开始封装骨架…
阅读更多...
解读 | 从谷歌AI判定阿波罗登月“造假“来谈谈合成图片检测技术

解读 | 从谷歌AI判定阿波罗登月“造假“来谈谈合成图片检测技术

大家好&#xff0c;我是极智视界&#xff0c;欢迎关注我的公众号&#xff0c;获取我的更多前沿科技分享 邀您加入我的知识星球「极智视界」&#xff0c;星球内有超多好玩的项目实战源码和资源下载&#xff0c;链接&#xff1a;https://t.zsxq.com/0aiNxERDq 整个事情可以爬楼看…
阅读更多...
【数据库】基于排序算法的去重，集合与包的并，差，交，连接操作实现原理，执行代价以及优化

【数据库】基于排序算法的去重，集合与包的并，差，交，连接操作实现原理，执行代价以及优化

基于两趟排序的其它操作 ​专栏内容&#xff1a; 手写数据库toadb 本专栏主要介绍如何从零开发&#xff0c;开发的步骤&#xff0c;以及开发过程中的涉及的原理&#xff0c;遇到的问题等&#xff0c;让大家能跟上并且可以一起开发&#xff0c;让每个需要的人成为参与者。 本专栏…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023