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

概念

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}