sass实战演练02 - 嵌套、mixin、变量计算、颜色函数

最新推荐文章于 2024-01-12 11:49:28 发布

学习笔记666

最新推荐文章于 2024-01-12 11:49:28 发布

阅读量971

点赞数

分类专栏： nodejs+gulp+webpack+sass基础篇

本文链接：https://blog.csdn.net/github_26672553/article/details/52403371

版权

nodejs+gulp+webpack+sass基础篇专栏收录该内容

33 篇文章 0 订阅

订阅专栏

上一节我们已经做到
这节课我们的需求一
让所有的container内部的div内部的元素居中
今天的知识点mixin
这是一个很有用的代码片段标记，就好像定义了函数一样（只是好像）
@mixin text-center()
{
text-align:center;
}
引用时就可以用 @include text-center
第二个需求
第一个h1字体大小48px，字体为灰色（#666）;
第二个h1字体大小为第一个h1的一半

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="./mycss/index.css">
</head>
<body>
    <div class="container">
        <div>
            <h1>搜索一下</h1>
            <h1>搜索让你更聪明</h1>
        </div>
        <div class="searchdiv">
            <span><input type="text"></span>
            <span><button>秀一个</button></span>
        </div>
        <div class="hot">
            <span>热门关键词</span>
            <span><a href="##">王宝强</a></span>
        </div>
        <div class="hot">
            <span>搜索历史</span>
            <span><a href="##">啪啪啪</a></span>
        </div>
    </div>
</body>
</html>

2.mixin编写
这里写图片描述
3.index.scss文件中如何使用？

@import "./common/global";
@import "./common/vars";
@import "./common/mixin";

.container{
  div{
    @include align(center);
    h1{
      font-size: $title-font-size * 0.5;
      color: lighten($title-font-color,20%);
    };
    h1:first-child{
      color: $title-font-color;
      font-size: $title-font-size;
    };

  }
}

4.vars.scss文件增加了几个变量

$blue-font:#1b85ff;
$title-font-size:48px;
$title-font-color:#666;

然后我们就可以开始把index.scss编译为index.css了，
执行上一课写好的gulp任务

gulp css

查看”编译”后的index.css

* {
  margin: 0;
  padding: 0;
  font-size: 14px; }

.container div {
  text-align: center; }
  .container div h1 {
    font-size: 24px;
    color: #999999; }
  .container div h1:first-child {
    color: #666;
    font-size: 48px; }