文章目录
- 前言
- 一、sass是什么?
- 二、准备工作
- 1.安装sass编译工具
- 1.1、sass编译软件 KoalaSetup
- 1.2、sass编译插件 Live Sass Compiler(推荐)
- 三、使用sass
- 1、编写html基本dom
- 2、编写sass代码
- 3、编译sass为css
- 四、引入编译成的.css文件到.html中
- 你这么好看点个关注不过分吧😊
前言
随着前端样式的丰富多变,基本的css编写已经不能满足开发需求,因此需要一个能够简化css开发的工具;sass,一个css预处理工具,他可以帮助开发人员简化样式编写,让开发效率得到很大的提高,同时对css的维护也变得更加方便。
提示:以下是本篇文章正文内容,下面案例可供参考
一、sass是什么?
世界上最成熟、最稳定、最强大的专业级CSS扩展语言!sass中文网
二、准备工作
1.安装sass编译工具
1.1、sass编译软件 KoalaSetup
小伙伴们可以自行百度下载
1.2、sass编译插件 Live Sass Compiler(推荐)
现在前端开发工具大多使用的是vs code 因此小伙伴们可以到拓展中安装这个插件非常好用;当然Hbuilder中也有对应的插件
三、使用sass
1、编写html基本dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关注博主,哈哈哈</title>
</head>
<body>
<div class="cls1">
dom1
</div>
<div class="cls2">
dom2
</div>
</body>
</html>
这里我们只是定义了2个div并没有给他加入任何样式。
2、编写sass代码
提示:这个很重要!!!!!===> 在这里我们所创建的文件名后缀为 .scss ,为什么不是 .sass
注:因为在sass3中引进了scss新语法 ;在古老的.sass文件中编写时是没有大括号{}的,是使用和python一样的缩进语法对代码块进行区分,这在维护的时候容易眼花,对长时间看屏幕的开发者们很不友好,因此这里我们使用的是sass3的新语法scss。
$width:100px;
$height:150px;
$color:rgb(29, 138, 142);
html{
padding: 0;
margin:0;
}
.cls1{
width: $width;
height: $height;
background-color: $color;
}
$width:100px;
$color:red;
.cls2{
width: $width;
height: $width;
background-color: $color;
}
以上为 html 的sass dom不明白的小伙伴可以看我下一期文章。
3、编译sass为css
提示:因为正常的.sass / .scss文件是不能被浏览器解析的,因此我们才会将以上的代码转化成 .css文件
注:但是在使用脚手架创建Vue工程化时可以选择安装css预处理器,这样就不需要手动编译为css文件了
编译:在vs code的底部菜单中找到 watch Sass 并点击即可编译成新.css文件 和.map文件
四、引入编译成的.css文件到.html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./1.css">
</head>
<body>
<div class="cls1">
heaaa
</div>
<div class="cls2">
hahhah
</div>
</body>
</html>