Sass学习笔记：从安装、基础语法到实现今日头条页面案例（一文到底）

Zijeak

于 2020-07-25 23:45:09 发布

阅读量567

点赞数

分类专栏：前端文章标签： less css sass

本文链接：https://blog.csdn.net/qq_18404993/article/details/107573415

版权

前端专栏收录该内容

53 篇文章 1 订阅

订阅专栏

1.什么是Sass

“Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！”
Sass是一个CSS预处理工具
在这里插入图片描述
Sass的工作流程：

Sass能帮助我们解决什么问题？

嵌套规则
通过花括号的方式解决复杂的css父子样式嵌套问题
变量规则
通过变量将公共样式抽离，减少冗余css代码
条件逻辑
向高级语言一样编写逻辑性的css代码

2.安装Sass

安装参考：
https://www.sass.hk/install/
Visual Studio Code插件Live Sass Compiler可将Sass或Scss实时编译为CSS：
https://www.sass.hk/skill/sass154.html

3.Sass基础语法

3.1 Sass变量和引用

sass

// 定义变量
$height:300px;

$color:#fff;

$baseWidth:100px;

// default会被优先覆盖
$baseWidth:200px !default;

// 字符串
$str:"www.baidu.com";

$strNoQout:"www.google.com";

// 选择器作为变量
$class:".div2";

// 属性名
$styleKey:"idth";

.div{
    width:$baseWidth;
    height: $height;

    background-color: $color;
    // 通过加号连接字符串
    background-image: url('http://'+$str);
    // 插值变量
    background-image: url('http://#{$strNoQout}');
}

// 插值变量作为选择器名
#{$class} {
    w#{$styleKey}:$baseWidth;
}

css

.div { width: 100px; height: 300px; background-color: #fff; background-image: url("http://www.baidu.com"); background-image: url("http://www.google.com"); }

.div2 { width: 100px; }
/*# sourceMappingURL=test.min.css.map */

**Sass变量作用域：**在花括号内部定义的变量只在该花括号范围内有效。

3.2 Sass的数据类型、变量运算、mixin（混合宏）

3.2.1 数据类型

数字类型
颜色类型
字符串类型
数组类型

$list:(100px,2,"hello");

.div{
	width:nth($list,1); //下标从1开始，解析为100px
	zoom:index($list,"hello");//3
}

map类型
scss

$map:(top:1px,left:2px,bottom:3px,right:4px);
.div{
	top:map-get($map,top);
	left:map-get($map,left);
}
.div{
	@each $key,$value in $map{
		#{$key}:$value;
	}
}

css

.div { top: 1px; left: 2px; }

.div { top: 1px; left: 2px; bottom: 3px; right: 4px; }

3.2.2 变量运算

加法运算
减法运算
乘法运算
除法运算

$size:20px;
font:(20px/5); //字面量需要加括号
font:$size/2; //变量方式不需要括号
font:(20px*3);

颜色运算

$color1:#010203;
$color2:#040506;


.div{
    background-color: $color1 + $color2;// #050709
    color: mix($color1,$color2);// #030405
    color: red($color1);// 去color1的R值:01
    color:rgb(red($color1),green($color2),blue($color2)); // #010506
}

3.2.3 混合宏

@mixin large-text {
    font: {
      family: Arial;
      size: 20px;
      weight: bold;
    }
    color: #ff0000;
}

.div{
    @include large-text;
}

带参数：

@mixin sexy-border($color,$width) {
    border:{
        color:$color;
        width: $width;
        style:dashed;
    };
}

.div{
    @include sexy-border(red,200px );
}

3.3 Sass继承和嵌套

3.3.1 嵌套

.div1{
    width: $width;
    color: $color;
    background-color: $color;

    .div-inner{
        width: $width;
        color: $color;
        background-color: $color;
    }
    a{
        color: blue;
    }
}

.div1 { width: 300px; color: #fff; background-color: #fff; }

.div1 .div-inner { width: 300px; color: #fff; background-color: #fff; }

.div1 a { color: blue; }

3.3.2 继承

简单继承

.div{
    border:1px;
    background-color: red;
}
.divext{
    @extend .div;
    color:green;
}

.div, .divext { border: 1px; background-color: red; }

.divext { color: green; }

关联属性继承

.div{
    border:1px;
    background-color: red;
}
.div.other{
    width:100px;
}
.divext{
    @extend .div;
    color:green;
}

.div, .divext { border: 1px; background-color: red; }

.div.other, .other.divext { width: 100px; }

.divext { color: green; }

链式继承

.div1{
    border: 1px solid #000;
}
.div2{
    @extend .div1;
    color: red;
}
.div3{
    @extend .div2;
    color: green;
}

.div1, .div2, .div3 { border: 1px solid #000; }

.div2, .div3 { color: red; }

.div3 { color: green; }

3.4 条件控制语句

3.4.1 if语句

$type:'boy';

// 写在大括号里面
p{
    @if $type == 'boy'{
        color:blue;
    }@else if $type == 'girl'{
        color:pink;
    }@else{
        color:black;
    }
}
// 写在外面
@if $type == 'boy'{
    .div{
        color:blue;
    }
}@else{
    .div{
        color:pink;
    }
}

3.4.2 for语句

@for $i from 1 through 3{
    .item#{$i}{
        width: 1px * $i;
    }
}

.item1 { width: 1px; }

.item2 { width: 2px; }

.item3 { width: 3px; }

@for $i from 1 to 3{
    .item#{$i}{
        width: 1px * $i;
    }
}

.item1 { width: 1px; }

.item2 { width: 2px; }

遍历数组：

$list:(red,blue,green);

@for $i from 1 through length($list){
    .item#{$i}{
       color:nth($list,$i);
    }
}

.item1 { color: red; }

.item2 { color: blue; }

.item3 { color: green; }

3.4.3 while语句

$i:6;

@while $i>0{
    .item#{$i}{
        width:1px * $i;
    }
    $i:$i - 2;
}

3.4.5 each

$map:(top:1px,left:2px,bottom:3px,right:4px);

.div{
    @each $key,$value in $map{
        #{$key}:$value;
    }
}

.div { top: 1px; left: 2px; bottom: 3px; right: 4px; }
/*# sourceMappingURL=test.min.css.map */

4.Sass函数

4.1 内置函数

4.1.1 数组函数

在这里插入图片描述

4.1.2 数字函数

在这里插入图片描述

4.1.3 字符串函数

4.1.4 map相关函数

在这里插入图片描述

4.2 自定义函数

$rem1:100px;
@function px2rem($px){
    $rem:37.5px;
    @return ($px/$rem) + rem;
};

.div{
    width:px2rem($rem1);
}

5.小案例：今日头条WAP端页面样式实现

在这里插入图片描述
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximun-scale=1.0,user-scalable=0">
    <title>今日头条</title>
    <link rel="stylesheet" type="text/css" href="test.min.css">
</head>
<body>
    <div class="header">
            今日头条
    </div>
    <div class="top_bar">
        <div class="top_menu_list">
            <a class="btn cur">推荐</a>
            <a class="btn">视频</a>
            <a class="btn">热点</a>
            <a class="btn">社会</a>
            <a class="btn">娱乐</a>
            <a class="btn">军事</a>
            <a class="btn">科技</a>
            <a class="btn">游戏</a>
            <a class="btn">体育</a>
            <a class="btn">懂车帝</a>
            <a class="btn">财经</a>
            <a class="btn">搞笑</a>
            <a class="btn">更多</a>
        </div>
    </div>
    <div class="content_list">
        <section class="section_item">
            <div class="item_detail">
                <h3 class="title">一图读懂 | 政治局会议释放哪些重大信号？</h3>
                <div class="item_info">
                    <span class="stick_label">置顶</span>
                    <span class="src">新华社</span>
                    <span clas="cmt">评论 2373</span>
                    <span class="tiem">2分钟前</span>
                </div>
            </div>
        </section>
        <section class="section_item">
            <div class="item_detail">
                <h3 class="title">上游防汛一级应急响应！秦淮河大堤却被指挖空建高档餐厅？记者调查</h3>
                <div class="item_info">
                    <span class="stick_label">热</span>
                    <span class="src">环球网</span>
                    <span clas="cmt">评论 28973</span>
                    <span class="tiem">10分钟前</span>
                </div>
            </div>
        </section>
        <section class="images_item">
            <div class="item_detail">
                <h3 class="title">南京中考物理答案出错？教育局说明来了</h3>
                <div class="list_image">
                    <ul>
                        <li class="list_img_holder"><img src="https://m1-1253159997.image.myqcloud.com/imageDir/97998da6426a57a05824f0aa4411d4ff.png"></li>
                        <li class="list_img_holder"><img src="https://m1-1253159997.image.myqcloud.com/imageDir/7a38a7a0503a17b61839875ec5f317ed.png"></li>
                        <li class="list_img_holder"><img src="https://m1-1253159997.image.myqcloud.com/imageDir/be2ec8988a48071105289db6cdffcee5.png"></li>
                    </ul>
                </div>
                <div class="item_info">
                    <span class="stick_label">热</span>
                    <span class="src">江苏新闻</span>
                    <span clas="cmt">评论 2373</span>
                    <span class="tiem">13分钟前</span>
                </div>
            </div>
        </section>
        <section class="ad_item">
            <div class="item_detail">
                <h3 class="title">肌肉科技乳清蛋白</h3>
                <div class="ad_image">
                    <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=83415480,734433693&fm=11&gp=0.jpg">
                </div>
                <div class="item_info">
                    <span class="ad_label">广告</span>
                    <span class="src">淘宝网</span>
                    <span clas="cmt">评论 23</span>
                    <span class="tiem">20分钟前</span>
                </div>
            </div>
        </section>
    </div>
</body>
</html>

scss


$baseFontSize:17px;
$redColor:#d43d3d;
$blueColor:#2a90d7;

*{
    margin: 0;
    padding: 0;
}
.header{
    height: 45px;
    background-color: $redColor;
    line-height: 45px;
    color: #fff;
    text-align: center;
    font: {
        size:18px;
        weight:bolder;
    }
}

.top_bar{
    background-color: #f4f5f6;
    height: 34px;
    overflow-x: auto;
    overflow-y: hidden;
    .top_menu_list{
        white-space:nowrap;
        overflow: hidden;
        height: 100%;
        display: inline-block;
    }
    .btn{
        padding:8px;
        display: inline-block;
        font-size: $baseFontSize;
        line-height: 100%;
        &.cur{
            color: $redColor;
        }
    }
}

@mixin sectionStyle{
    margin-left: 15px;
    margin-right: 15px;

    border-bottom: 1px solid rgba(211,211,211,0.6);
    padding-top: 10px;
    padding-bottom: 10px;
}
@mixin hotLabel($color){
    font-size: 14px;
    color: $color;
    border: 1px solid $color;
    padding-left: 4px;
    padding-right: 4px;
}
// 标题不超过两行
@mixin line2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display: box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

// 清除浮动
@mixin clearfix {
    &:after{
        visibility: hidden;
        display: block;
        content: " ";
        clear: both;
        height: 0;
    }
}
.content_list{
    .section_item{
        @include sectionStyle;
        .title{
            font-size: 20px;
            @include line2;
        }
        .item_info_base{
            color:#999;
            font-size: 14px;
        }
        .item_info{
            @extend .item_info_base;
            margin-top: 10px;
            .stick_label{
                @include hotLabel($redColor);
            }
        }
    }

    .images_item{
        @extend .section_item;
        .list_image{
            margin-top:10px;
            ul{
                @include clearfix;
                list-style: none;
            }
        }
        .list_img_holder{
            float: left;
            width:33.33%;
            height: 80px;
            overflow: hidden;
            img{
                border: none;
                width: 100%;
                display: block;
            }
        }
    }
    .ad_item{
        @extend .section_item;
        .ad_image{
            height: 195px;
            margin-top: 10px;
            overflow: hidden;
            img{
                width: 100%;
                border: none;
                display: block;
            }
        }
        .ad_label{
            @include hotLabel($blueColor);
        }
    }
}