2022-04-15 Sass学习笔记(一) 概念,安装,引入和使用示例

掌握Sass预编译：入门指南与实践

原创已于 2022-10-11 16:39:19 修改 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #sass #css #前端

于 2022-04-15 21:57:52 首次发布

笔记同时被 2 个专栏收录

87 篇文章

订阅专栏

sass

6 篇文章

订阅专栏

本文介绍了Sass语言的基础概念，如何下载和使用，以及如何创建和编译.scss和 sass 文件。通过实例演示了如何在HTML中引入编译后的CSS。此外，还涵盖了不同文件扩展名的用途和后缀名.min.css的生成过程。

文章目录

概念

sass是目前使用最广泛的css拓展语言,是css的预编译工具

经过sass编写的代码需要先解析成相对应的css文件,浏览器才能获得样式

学习手册

官网文档
 菜鸟

下载

1.按照官网的说明下载
2.直接在vscode应用商店下载Easy Sass插件
在这里插入图片描述

使用

在一个单独的css文件夹下创建一个扩展名为.scss或.sass的文件,
编写后保存,这时候会生成一个同名的css文件,
在html中引入该css文件即可

示例

css/mysassdoc.scss

div {
    height: 300px;
    width: 300px;
    background-color: blue;
    p {
        height: 150px;
        width: 150px;
        margin: 0 auto;
        background-color: #fff;
        border-radius: 50%;
    }
}

保存后生成一个同名的css文件:

mysassdoc.css

div {
  height: 300px;
  width: 300px;
  background-color: blue;
}

div p {
  height: 150px;
  width: 150px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 50%;
}

在html中正常引入此css文件即可

其他拓展名的文件

后缀是.sass的文件

index.sass

div 
 width : 200px(空格)
 height : 200px
 background : blue

保存后同样生成一个同名的css文件

后缀是.min.css的文件

是同名css文件取消换行后形成的新文件

index.min.css

div{width:200px;height:200px;background:blue}