sass实战看这一篇就够了

于 2023-05-11 20:09:20 发布
阅读量201 收藏 3
点赞数 1
分类专栏： sass入门 文章标签： sass css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qczzc/article/details/130629379
版权
该文章通过一个实际的HTML页面展示了如何使用Sass来改进CSS代码，特别是利用Flexbox实现响应式布局。主要内容包括header、主内容区域（包含左侧链接列表和右侧图片列表）以及footer的样式定义，强调了Sass变量和嵌套规则在简化代码和提高可维护性方面的作用。
摘要由CSDN通过智能技术生成

前言

提示：这里使用的是以前的一篇文章里面的案例进行sass实战讲解
不清楚的可以点击flex实战

提示：以下是本篇文章正文内容，下面案例可供参考

一、css下的dom

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>爱V猫友情链接</title>
</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style-type: none;
    }
    
    header {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .wrap {
        display: flex;
        justify-content: center;
        background-color: aqua;
    }
    
    .wrap .mian {
        display: flex;
        width: 70%;
        margin: 10px 0 10px 0;
    }
    
    .mian .mianLeft {
        flex: 1;
        text-align: center;
        background-color: rgb(239, 239, 239);
        padding-top: 40px;
    }
    
    .mian .mianLeft li {
        height: 30px;
        font-size: 18px;
        line-height: 30px;
        list-style-type: none;
    }
    
    .mian .mianLeft li:hover {
        background-color: red;
        color: #fff;
    }
    
    .mian .mianLeft li a:hover {
        color: #fff;
    }
    
    a {
        text-decoration: none;
        color: rgb(89, 89, 89);
    }
    
    .mian .mianRight {
        flex: 3;
        background-color: #fff;
    }
    
    .mian .mianRight h2 {
        border-bottom: 1px rgb(164, 164, 164) solid;
        font-size: 40px;
        color: rgb(164, 164, 164);
        padding: 20px 0 20px 20px;
    }
    
    .mian .mianRight .picList {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    
    .mian .mianRight .picList li {
        list-style-type: none;
        margin: 10px 0 10px 0;
    }
    
    .mian .mianRight .picList li img {
        width: 200px;
    }
    
    footer {
        text-align: center;
    }
    
    footer ul {
        display: flex;
        justify-content: center;
    }
    
    footer ul li {
        margin: 5px;
    }
</style>

<body>

    <!--网页头部-->
    <header>
        <h1 class="headLeft">
            <a href="#"><img src="images/logo.jpg" alt="" /></a>
        </h1>
        <div class="headRight">
            <a href="#">登录</a>
            <a href="#" class="active">注册</a>
        </div>
    </header>
    <!--网页主体-->
    <section class="wrap">
        <div class="mian">
            <ul class="mianLeft">
                <li><a href="#">公司介绍</a></li>
                <li><a href="#">新闻动态</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">招才纳士</a></li>
                <li><a href="#">用户协议</a></li>
                <li><a href="#">常见问题</a></li>
                <li><a href="#">合作伙伴</a></li>
                <li><a href="#">友情链接</a></li>
                <li><a href="#">网站地图</a></li>
                <li><a href="#">付费协议</a></li>
                <li><a href="#">使用说明</a></li>
            </ul>
            <section class="mianRight">
                <h2>友情链接</h2>
                <ul class="picList">
                    <li>
                        <a href="#"><img src="images/lk_logo01.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo02.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo03.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo04.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo05.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo06.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo07.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo08.jpg" alt="" /></a>
                    </li>
                    <li>
                        <a href="#"><img src="images/lk_logo09.jpg" alt="" /></a>
                    </li>
                </ul>
            </section>
        </div>
    </section>
    <!--网页底部-->
    <footer>
        <ul>
            <li><a href="#">公司介绍</a></li>
            <li><a href="#">新闻动态</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">招商加盟</a></li>
            <li><a href="#">招商用户</a></li>
            <li><a href="#">协议合作伙伴</a></li>
            <li><a href="#">常见问题App</a></li>
            <li><a href="#">下载网站地图</a></li>
        </ul>
        <p>深圳云飞渡网络科技有限公司 版权所有 京ICP备13047874号</p>
        <p>Coppyright © 2018 iVmall All Rights Reserved</p>
    </footer>
</body>

</html>

二、改造为sass

 * {
        margin: 0;
        padding: 0;
 }
header{
		display: flex;
        justify-content: space-around;
        align-items: center;
}
 a {
        text-decoration: none;
        color: rgb(89, 89, 89);
}
    
li {
        list-style-type: none;
}

$mainWidth:70%;

 .wrap {
        display: flex;
        justify-content: center;
        background-color: aqua;
        .main{
			display: flex;
	        width: $mainWidth;
	        margin: 10px 0 10px 0;
	        .mianLeft {
		        flex: 1;
		        text-align: center;
		        background-color: rgb(239, 239, 239);
		        padding-top: 40px;
		        li {
			        height: 30px;
			        font-size: 18px;
			        line-height: 30px;
			        list-style-type: none;
			         a:hover {
				        color: #fff;
				    }
			    }
			    li:hover {
			        background-color: red;
			        color: #fff;
			    }
		    }
		    .mianRight {
		        flex: 3;
		        background-color: #fff;
		        h2 {
			        border-bottom: 1px rgb(164, 164, 164) solid;
			        font-size: 40px;
			        color: rgb(164, 164, 164);
			        padding: 20px 0 20px 20px;
			    }
			    .picList {
			        display: flex;
			        width: 100%;
			        justify-content: space-evenly;
			        flex-wrap: wrap;
			         li {
				        list-style-type: none;
				        margin: 10px 0 10px 0;
				        img {
					        width: 200px;
					    }
				    }
			    }
		    }
		}
 }
  footer {
        text-align: center;
        ul {
	        display: flex;
	        justify-content: center;
	         li {
		        margin: 5px;
		    }
	    }
    }

这个也比较简单

在这就不过多注释了

卑微前端在线挨打
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Sass的简单运用
m0_68169119的博客
07-24 489
sass的介绍和运用及案例
Sass学习实践笔记（一）
FED_AF的博客
05-30 188
sass的安装和编译
Sass学习与实践心得体会
TAO_GIS的博客
07-24 507
https://www.imooc.com/article/16108#
Sass(Scss)基础梳理与实践
安之ccy的博客
09-07 489
Sass(Scss)基础梳理与使用，包括：安装、嵌套、直接子选择器、父选择器、变量、常用语法、数据类型等
构建 SASS 应用最佳实践：12因素
来啊 快活啊
09-14 184
12-factors
VUEJS实战之构建基础并渲染出列表（1）
11-23
在本篇文章中，我们将通过实战的方式，逐步构建一个能够从API获取数据并渲染成列表的基础应用。\n\n首先，选择Vue作为学习对象，作者主要基于以下几点考虑：\n1. Angular 1.x的学习曲线陡峭，且Angular 2+的转变较大...
VUE + nodejs实战
最新发布
06-09
本篇将详细解析"VUE + nodejs实战"中的关键知识点。 1. **Vue.js基础** - **模板语法**：Vue.js的核心在于其声明式的HTML模板，如`v-if`, `v-for`, `v-bind`和`v-on`等指令，它们简化了DOM操作。 - **组件化**：...
响应式布局-BootStrap从基础到项目实战 - 第二季（高级篇）.zip
08-03
这包括如何使用Sass（一个强大的CSS预处理器）来自定义Bootstrap的主题，改变颜色、字体和间距。同时，你可能还会学习如何创建和使用自定义的CSS类，以满足项目的特定需求。 响应式图像处理也是Bootstrap的重要特性...
CSS实战学习总结,很不错的
11-03
在《CSS实战学习总结》这一篇深度文档中，作者辛磊针对CSS的实际应用进行了全面而深入的解析，旨在帮助读者掌握CSS的核心技能，提升网页设计与开发的能力。以下是对该文档中关键知识点的提炼与扩展。 #### 1. CSS...
变幻之美-DivCSS网页布局揭秘（案例实战篇）案例源码
03-30
《变幻之美-DivCSS网页布局揭秘（案例实战篇）案例源码》是一个专注于Div+CSS技术在网页布局中的应用的学习资源。这个压缩包包含了多个实际案例的源代码，旨在帮助学习者深入理解并掌握Div+CSS布局技巧。下面将详细...
练习1：爱V猫友情链接页面（完成版）.rar
05-22
Web前端框架与移动应用开发第一章爱V猫友情链接页面，内含完整代码以供参考学习。通俗易懂的代码人人都可看懂，适用于Web前端和移动应用开发方面的新手编程员们。
《Web前端网页制作》答案.rar
08-19
大工20春《Web前端网页制作》大作业答案
友情链接案例
11-17
友情链接 ：友情链接案例
爱链接友情链接交换系统 v1.1.rar
07-05
爱链接友情链接交换系统简介 1、美观漂亮大气的橙色风格 2、网站采用雨过天晴工作室SEO建议进行了全站SEO优化 3、网站介绍静态页面按照网址生成更有利于搜索引擎优化 3、动静态一键切换的功能。 4、免模板网站静态生成技术，自动静态化网站链接。 5、具有带HTML编辑器的单页管理。 6、链接网站带有评论功能。 7、仿灌水管理，自动记录评论者IP、地区，避免恶意攻击。 8、网站增加了留言版功能。 9、强大多样化的站内搜索功能。 10、链接网站金币置顶，标色功能 11、后台广告管理功能。 12、自动获取PR，百度快照、百度权重、百度谷歌收录、alexa排名等。 13、分类管理网站链接 14、具有站长在线网站SEO查询功能。 15、多功能全面的站长工具功能。     爱链接友情链接交换系统 1.1全能版hurq20120521升级说明 相对于1.0版，1.1版主要更新   1、为了满足更多需要，网站允许发布二级域名，这是目前唯一一个支持二级域名发布友情连接的友情连接交换系统； 2、修复金币是干啥的？　怎么免费获得金币？两个BUG，去除死链接； 3、更新 最新连接资讯和友情连接知识库连接，重新布局，首页更美观； 4、重点：添加站长工具，添加PR真假查询\ALEXA流量查询\百度指数查询\网站反链查询\历史记录查询\网站备案查询\域名历史查询\域名Whois查询\同IP网站查询\反向链接查询\死链接检测等站长常用工具，站长工具集合站长网、爱站网、站长帮手、站长啦四大站长工具查询网站经典工具，是每个站长最好的选择！ 5、导航栏重新布局，去除链接新闻（更改到站长工具查询面板旁边连接），更为站长工具主面板，方便站长查询网站！ 6、导航栏修复点击每个栏目图片不变的问题，使网站更加美观； 7、修复推荐栏广告重复问题，这里可以通过后台的顶部推荐栏管理和添加广告，或者推荐网站！ 8、更改静态生成网站目录为links，让链接更加清晰。 9、修复百度分享IE下错位问题。 10、网站信息上添加百度权重和网站的SEO标准报告。
学做Bootstrap的第一个页面
09-02
主要为大家介绍了学做Bootstrap的第一个页面，这是学bootstrap的第一个页面，还有许多需要改进的地方，希望大家批评指正
Sass的使用
weixin_62115642的博客
07-23 530
Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量(variables)、嵌套(nestedrules)、混合(mixins)、导入(inlineimports)等高级功能，这些拓展令CSS更加强大与优雅。使用Sass以及Sass的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。.........
sass学习--sass的控制命令（进阶篇）
macanfa的博客
06-23 642
sass的控制命令：@if、@for、@while、@each四个！以及简单的实例演示！
SASS简单使用
LiHang1234567777的博客
07-23 1694
Sass 是一个 CSS 预处理器。 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。 SASS中定义变量的格式 $变量值=值 SASS中导入另外一个SASS文件@import “”, “”, “” SASS嵌套规则：把属性名从中划线的地方断开，在根据属性后面添加yg 冒号，如何紧跟一个{ }块把子属性部分写在这个{ }块中，就像CSS选择器嵌套一样，SASS会把你的子属下解开把根属性和子属性部分通过中划线连接起来以上就是今天要讲的内容，本文仅仅简单介绍了SASS的使用。...
ACCP8.0Y2Web前端框架与移动应用开发第1章响应式布局
weixin_30588675的博客
07-18 4377
杂记： 1.实现弹性布局 ①浮动+百分比 ②display:flex布局：好处是可以让盒子里面的元素排成一行，盒子里面的高度保持一致 ③flex的属性 伸缩流方向 flex-direction决定主轴的方向可改为垂直或水平 语法如下： flex-direction:row | row-reverse | column | column-reverse row:主轴水平 row-r...
学习webpack,看这一篇就够了
09-18
总的来说，这篇文章提供了一个很好的入门教程，可以帮助我们快速掌握webpack的基本概念和使用方法。但是，要想在实际项目中灵活应用webpack，还需要深入学习官方文档和相关资料，并结合实际项目进行实践。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值