Sass入门

最新推荐文章于 2024-06-04 22:50:43 发布

长沙xtt

最新推荐文章于 2024-06-04 22:50:43 发布

阅读量135

点赞数

分类专栏： sass 文章标签： sass

本文链接：https://blog.csdn.net/weixin_40746230/article/details/124909126

版权

sass 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Sass 是层叠样式表语言 CSS预处理器/CSS扩展语言

Sass(.scss)文件需要被编译成标准的CSS格式

CSS 变量

变量以$符号开头，使用冒号赋值 :

$primary-color:blue;

CSS嵌套规则

Modules

Mixins&Functions

继承 @extend Inheritance

if逻辑判断

npm i -g sass 安装 sass

sass --watch scss/style.scss css/style.css

创建 index.html 文件夹 scss/style.scss css文件夹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Sass 快速入门</title>
</head>
<body>
    <header class="showCase">
        <div class="container">
            <nav>
                <h1 class="logo">ZT_SASS
                </h1>
                <ul>
                    <li><a href="#">主页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </nav>

            <div class="showCase-content">
                <div>
                    <h1>欢迎来到SASS</h1>
                    <p class="my-5">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est
                        eligendi tempore atque laborum. Quisquam nemo at non. Corrupti,
                        vitae dolore.
                    </p>
                    <a href="#" class="btn-primary">登陆</a>
                    <a href="#" class="btn-secondary">注册</a>
                </div>
                <img
                    src="https://themesbrand.com/zooki/layouts/images/home-2-img.png"
                />
            </div>
        </div>
    </header>
</body>
</html>

新建 style.scss

@import '_config';
@import '_utilities';
@import '_button';

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color:$light-color;
    font-family: $font-stack;
    line-height: 1.6;

}

img {
    width: 100%;
}

a {
    text-decoration: none;
}

.showCase{
    @include set-background($primary-color);
    height: 600px;

    nav {
        display: flex;
        align-items: center;
        justify-content: space-between;

        ul {
            list-style: none;
            display: flex;
        }
        li {
            padding: 15px;
        }
        a{
            color:set-text-color($primary-color);
        }
        a:hover {
            color: $secondary-color;
        }
    }

  
    &-content{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
        img{
            width: 50%;

        }
        h1{
            font-size: 50px;
            line-height: 1.2;
        }
        // p{
        //     margin: 20px 0;
        // }

    }
}

@import '_mobile'

引入

_config.scss

$light-color: #f4f4f4;
$font-stack: Arial, Helvetica, sans-serif;
$primary-color: #0e6cff;
// $primary-color: #e0ffff;
$secondary-color: #ff8700;

//根据背景色设置字体颜色

@function set-text-color($color){
    @if(lightness($color)>70){
        @return #333;
    }@else{
        @return #fff;
    }
}

//混合背景色和字体颜色 

@mixin set-background($color) {
    background-color: $color;
    color: set-text-color($color);

    
}

_button.scss

%btn{
    display: inline-block;
    border-radius: 5px;
    padding: 8px 20px;
    margin: 3px;
    &:hover{
        transform: scale(0.98);
    }
}


.btn-primary{
    @extend %btn;
   //lighten 設置亮度
    @include set-background(lighten($primary-color,10%))
}
.btn-secondary{
    @extend %btn;
    @include set-background($secondary-color)
    

}

_utilities.scss

.container {
    max-width: 1100px;
    padding: 0 30px;
    // 行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）
    margin: 0 auto; //上下边界为0，左右则根据宽度自适应相同值（即居中）    块级元素：给定要居中的块级元素的宽度。
    overflow: auto; //属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
}

// 设置margin  & padding

$spaceamounts: (
    1,
    2,
    3,
    4,
    5
);

@each $space in $spaceamounts {
    .m-#{$space} {
        margin: #{$space}rem;
    }

    .my-#{$space} {
        margin: #{$space}rem 0;
    }

    .p-#{$space} {
        padding: #{$space}rem;
    }

    .py-#{$space} {
        padding: #{$space}rem 0;
    }

}

_mobile.scss

@media(max-width:700px){
    .showCase{
        height: 400px;
        &-content{
            text-align: center;
            img{
                display: none;
            }
        }
        
    }
}