一文解决零基础 Sass入门

Sass简介

Sass是一款成熟、稳定、强大的专业级CSS扩展语言,它是一款强化CSS的辅助工具,在CSS语法的基础上增加了变量(variables)、嵌套(nestedrules)、混合(mixins)、引入(inline imports)等高级功能,让CSS更加强大与优雅。使用Sass以及Sass的样式库(如Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

Sass的优势主要包括如下几点。

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

(2) 特性丰富,Sass拥有比其他任何CSS扩展语言更多的功能和特性。

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

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

(5) 社区庞大,大多数科技企业和成百上千名开发者为Sass提供支持。

(6) 有无数框架使用Sass构建,如Compass、Bootstrap、Bourbon和Susy。

此外,Sass为CSS引入了变量的概念。在Sass中编写样式代码时,可以把反复使用的CSS属性值定义成一个变量,这样就不需重复地书写此属性值,在使用此属性值时只需通过变量名在不同的代码位置来引用它。或者,对于仅使用过一次的属性值,可以赋予其一个易懂的变量名,让人很直观地看出这个属性值的用途。

一、如何Vscode中使用sass

  1. 在Vscode扩展中搜索live sass Compiler并下载安装

一文解决零基础 Sass入门_第1张图片

2.下载完成后即可写sass代码

新建文件,更名为demo.sassdemo.scss 两种后缀皆可,都是sass语言

3.Sass的两种文件形式

  • sass
  • scss

两种文件后缀对应两种代码书写风格

例如:我们在content盒子下的span标签添加字体颜色属性red.

由图:sass中需要这样书写代码:

一文解决零基础 Sass入门_第2张图片

scss文件后缀的文件代码需要这样书写:

一文解决零基础 Sass入门_第3张图片

  • 我们可以清楚的看到,sass后缀文件,不需要书写分号(;)和花括号({}).

  • 而scss后缀文件中,我们必须书写分号和花括号

scss和sass两种文件形式都可以正常使用,

由你自己的代码书写习惯来决定使用哪种文件后缀名!

下文将以scss文件来进行讲解sass技术的各种知识。

4.自动生成.css文件

一文解决零基础 Sass入门_第4张图片

我们写完sass或者scss文件后,会自动生成.css文件与.css.map文件

其中.map 文件指映射,sass生成的是css,在浏览器里不方便调试(无法对应到sass源码), .map就是css和sass的映射,为了方便调试用的一种技术”,我们暂时不需要处理。
其次,.css文件就是sass预编译生成的css文件,也是我们所需要得到的文件。



二、sass变量的使用方法

sass变量以$开头

如:$content-color:red;

$content-font-size:32px;

我们可以用这种格式来定义变量并存储值。

例如:

一文解决零基础 Sass入门_第5张图片

定义$color属性为red后就直接可以在文件中使用这个变量。





三、sass重要特性:嵌套,分块与引用

1.嵌套是Sass最重要也是最实用的特性,嵌套将会使你喜欢上sass.
其实上文中你已经接触到了sass的嵌套,接下来我们具体学习一下嵌套的基本格式:

一文解决零基础 Sass入门_第6张图片

  • 这就是一个最简单的嵌套,如图所示,content盒子中的span标签的字体颜色被定义为了红色,
    文中的&表示同级父盒子,也就是给content盒子设置背景颜色为blue。
    这个scss文件所生成的css文件如下:

一文解决零基础 Sass入门_第7张图片



2.代码分块与引入

代码分块用于将网页的各个模块的代码分开,使各部分代码更加易懂,轻便,在工作场景中有十分重要的地位。

本文给出代码分块例子如下:

一文解决零基础 Sass入门_第8张图片

如图可以看到,我们创建一个_header模块文件,并在其中设置header的背景颜色,再在main主文件中使用@import_header文件引入,就可以在main.css文件中生成相应的代码.

特别注意: 模块文件必须在前面加_下划线,防止自动生成对应的.css文件.map文件

在引用区块文件时,下划线可以省略!



四、mixin混入的使用方法

除了可以通过将代码模块化简化代码以外,我们还可以用mixin混入的方式,将重复代码封装成一个包裹mixin还可以携带一个参数,在我们需要它的时候用@include将其调用出来,达到代码简化明了同时方便使用的目的。

本文给出demo如下:

一文解决零基础 Sass入门_第9张图片

主scss文件中使用@import 'mixin'的方式来引入mixin模块,在_mixin.css文件中写出
@mixin 指令名称参数){
内容区
}
同时在sass文件中使用与mixin相对应的@include来调用@mixin
本文所用的为@mixin font ($color) 意为设置指令名称font,传入参数$color,在主scss文件中使用@include font (rgb(X,X,X))将封装后的mixin代码引入,最后效果见最后一个图片,css代码正确书写。




五、@extend继承指令

@extend指令同样可以简化代码,使用这个指令能够继承某部分css样式。

本文给出demo如下:

一文解决零基础 Sass入门_第10张图片

我们在.nav 中写入@extend指令后,相应的css文件中 原本.content的样式将以并集选择的方法被共用(继承)极大程度的简化了代码复杂程度。

@extend简单方便,请读者牢记!



六、媒体查询@media @content

@media指令经常用于响应式开发,一个最基本的@media格式如下:

一文解决零基础 Sass入门_第11张图片

在最基本的@media格式中,我们每写一行scss样式代码,就必须再写一条一模一样的@media screen代码,此时,一旦项目庞大,那么代码将变得复杂繁多,冗余难看。

解决办法:

利用mixin封装的特性,将media代码封装成块,最终每部分代码仅需书写一次。

本文给出demo如下:

一文解决零基础 Sass入门_第12张图片

特别注意:

其中height属性是通过@mixin指令添加的,而color属性是使用@media所对应的@content指令将内容区代码传入的,两种方式不同,读者需注意区分



这里的@content是指令而.content是一个选择器!

接下来我们将@media指令利用@mixin封装起来,并且mixin可以带参数,然后在需要@media的位置,只需要利用@include 指令将封装好的media引入,就会自动在对应的css文件中生成我们需要的media代码,极大的便利我们书写样式表。



七、sass的其他功能

本文已经将最最常用的sass功能介绍完毕,学会以上功能已经可以应对基本的开发了!


其实sass还有很多其他功能,本文就不一一列举介绍了…

  • 条件语句与循环语句
  • 判断语句
  • sass可以自定义函数


文末

你好!感谢读者们可以看到这里!!
点赞关注支持一下!
兴趣是最好的老师,在此祝你工作顺风顺水,学习突飞猛进!

作者:胜利111

日期 2022.5.17

你可能感兴趣的:(HTMLCSS,sass,css,媒体)