当前位置: 首页 > 网络应用技术

一篇文章解决了零基本SASS的开始,从首次使用SASS到精通SASS(与媒体查询混合@Media混合)

时间:2023-03-07 20:46:26 网络应用技术

  Sass是一种成熟,稳定且强大的专业CSS扩展语言。这是一种增强CSS的辅助工具。基于CSS语法,变量,嵌套,混合物和混合发音功能,例如内联进口,使CSS更强,更优雅。使用SASS和SASS样式库(例如Compass),以帮助更好地组织管理样式文件并更有效地组织管理样式文件。

  SASS的优点主要包括以下几点。

  (1)SASS与所有版本的CSS完全兼容。

  (2)丰富的特征,SAS具有比任何其他CSS扩展语言更大的功能和特征。

  (3)成熟的技术和强大的功能。

  (4)行业认可,越来越多的人使用Sass。

  (5)社区是巨大的,大多数技术公司和数百家开发人员为Sass提供支持。

  (6)无数的框架是用Sass建造的,例如指南针,引导程序,波旁威士忌和Susy。

  此外,SASS介绍了CSS的变量概念。当Sass编写样式代码时,您可以将重复的CSS属性值定义为变量,因此您无需重复编写此属性值。当使用此属性值时,您只需要使用一次的属性值,它可以为其提供一个简单的 - 构造变量名称,这使人们可以直观地看到此属性值的目的。

  2.下载后,您可以编写SASS代码

  新文档(更名为或两个后缀)都是Sass语言

  3.萨斯的两个文件

  两个文件后缀对应于两个代码写作样式

  例如:我们在内容框下的标签中添加字体颜色属性。

  从图中:需要在Sass中像这样编写代码:

  SCSS文件后缀的文件代码需要像这样编写:

  4.自动生成.css文件

  在我们编写SASS或SCSS文件后,将自动生成文件和文件

  其中,文件被映射,SASS生成CSS,在浏览器中调试不方便(不能对应于SASS源代码),即CSS和SASS的映射。CSS文件是生成CSS文件生成的CSS文件由SASS预先编写,也是我们需要的文件。

  SASS变量从开始

  喜欢:

  我们可以使用此格式定义变量并存储值。

  例如:

  在定义属性为红色之后,该变量可以直接在文件中使用。

  1.开玩笑是萨斯最重要,最实用的特征。开玩笑会让您喜欢Sass。

  实际上,您已经在上一篇文章中暴露于Sass的嵌套。接下来,我们将了解嵌套的基本格式:

  2.代码块和简介

  代码分割用于分离网页的每个模块的代码,使每个部分更易于理解,轻巧,并且在工作方案中具有非常重要的位置。

  本文中代码细分的示例如下:

  如图所示,我们创建一个模块文件,设置标头的背景颜色,然后使用文件将文件介绍在主文件中,我们可以在main.css中生成相应的代码文件。

  特别注意:必须将模块文件添加到前面,以防止自动生成相应的和

  引用块文件时,可以省略下行!

  除了通过模块代码简化代码外,我们还可以将代码封装在混合方法中,我们可以携带参数。当我们需要时使用它。

  本文给出了以下方式的演示:

  在主SCSS文件中使用的方法中介绍Mixin模块并在文件中写入

  @mixin指令名称(参数){

  内容区域

  }

  同时,在SASS文件中,使用对应于Mixin进行调用

  在本文中设置指令名称字体的目的是传递参数$颜色。在主SCSS文件中,使用封装Mixin代码的介绍。

  该指令还可以简化代码。使用此指令继承CSS样式的一部分。

  本文给出了以下方式的演示:

  在.nav中编写指令后,相应的CSS文件中的原始样式将用于在很大程度上简化并发选择方法中代码的复杂性。

  简单方便,请记住!

  <br

  这些说明通常用于响应开发。最基本的格式之一是如下:

  以最基本的格式,每次我们编写SCSS样式代码行时,我们都必须编写另一个完全相同的代码。目前,一旦项目庞大,代码将变得复杂而多余。

  解决方案:

  使用Mix蛋白包装的特性,将媒体代码封装成零件。最终,代码的每个部分都只需要编写一次。

  本文给出了以下方式的演示:

  其中,高度属性由指令添加,并将颜色属性传递到带有相应说明的内容区域代码中。这两种方法是不同的。读者需要注意区分!

  @content这里是指令,并且content是选择器!

  接下来,我们将使用指令使用软件包,Mixin可以带来参数,然后在需要使用指令引入封装媒体的情况下,它将自动生成我们在相应的CSS文件中所需的媒体代码。写样式表。

  本文介绍了最常用的SASS功能。学习上述功能已经可以应对基本发展!

  实际上,Sass还有许多其他功能。本文不会一一列出...

  你好!感谢读者在这里看到!交叉路口

  赞美和支持!

  兴趣是最好的老师。在这里,祝您工作顺利,并迅速学习!

  作者:胜利111

  日期2022.5.17

  原始:https://juejin.cn/post/7098588888828510245