Sass的基本使用

最新推荐文章于 2023-08-29 21:00:00 发布

cloudOnSkyline

最新推荐文章于 2023-08-29 21:00:00 发布

阅读量194

点赞数

分类专栏： HTML和CSS 文章标签： sass 前端 css

本文链接：https://blog.csdn.net/weixin_44827643/article/details/126291134

版权

HTML和CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.在VS code中安装Easy Sass插件，在当前工作区启用

2.新建index.html文件和index.scss文件

3.介绍sass的基本语法,保存即可生成css文件(包括压缩和未压缩版本)

(1)变量使用,拥有作用域

(2)嵌套写法

(3)伪类写法(例如hover效果)

1.在VS code中安装Easy Sass插件，在当前工作区启用

2.新建index.html文件和index.scss文件

index文件如下：

<!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="./index.css">
</head>

<body>
    <p><span>123</span><span>456</span></p>
    <div>
        <h1>123</h1>
        <a href="#">456</a>
    </div>
</body>

</html>

3.介绍sass的基本语法,保存即可生成css文件(包括压缩和未压缩版本)

保存后会生成index.css和index.min.css两个文件，如下图

(1)变量使用,拥有作用域

(2)嵌套写法

(3)伪类写法(例如hover效果)

sass文件如下：

//1.变量使用
$b:skyblue;
$borderValue:10px solid #ee5a5a;
p {
    background-color: $b;
    border: $borderValue;
    $w: 100px;
    width: $w;
   //2.嵌套写法
    span {
        color: #ee5a5a;
    }
}

div {
    a {
        display: inline-block;
        width: 200px;
        height: 200px;
       //3.hover写法
        &:hover {
            background-color: pink;
        }
    }
}