在html文件中使用sass

最新推荐文章于 2024-04-02 00:12:31 发布

卑微前端在线挨打

最新推荐文章于 2024-04-02 00:12:31 发布

阅读量1.8k

点赞数 2

分类专栏： sass入门文章标签： html sass 前端 css3

本文链接：https://blog.csdn.net/qczzc/article/details/130628063

版权

sass入门专栏收录该内容

4 篇文章 1 订阅

订阅专栏

文章目录

前言
一、sass是什么？
二、准备工作
- 1.安装sass编译工具
- - 1.1、sass编译软件 KoalaSetup
  - 1.2、sass编译插件 Live Sass Compiler(推荐)
三、使用sass
四、引入编译成的.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>

你这么好看点个关注不过分吧😊

卑微前端在线挨打

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
在html文件中使用sass

随着前端样式的丰富多变，基本的css编写已经不能满足开发需求，因此需要一个能够简化css开发的工具；sass，一个css预处理工具，他可以帮助开发人员简化样式编写，让开发效率得到很大的提高，同时对css的维护也变得更加方便。提示：以下是本篇文章正文内容，下面案例可供参考。
复制链接

扫一扫