scss的常用方法

最新推荐文章于 2024-07-10 10:14:49 发布

wendyTan10

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量687

点赞数

分类专栏： css 文章标签： scss css sass css3 html5

本文链接：https://blog.csdn.net/weixin_42369598/article/details/121921395

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Sass的介绍 sass的官方网址：https://www.sass.hk/docs/

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

安装与使用在文档中都有提及到，这里我所写的是一些我在项目中自我使用的方法
在项目中会新建一个mixin.scss，用于定义一些变量Variables（类比于js中变量的赋值）与混合指令Mixin（用于定义可重复使用的样式，类比于方法）

// mixin.scss
// 变量 $ (Variables: $)
$sub_clor: #ff3b30; // 主题色
$font_size: .3rem; // 字体的大小
// 使用
background: $sub_clor;
font-size: $font_size;

// 混合指令 (Mixin Directives)
// 定位布局
@mixin position($position: absolute, $top: auto, $left:auto, $right:auto, $bottom:auto) {
    position: $position;
    top: $top;
    left: $left;
    right: $right;
    bottom: $bottom;
    @if $position == 'fixed' {
        z-index: 9;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    @if$top == 50% {
        transform: translateY(-50%);
	    -webkit-transform: translateY(-50%);
    }
    @if $left == 50% {
        transform: translateX(-50%);
	    -webkit-transform: translateX(-50%);
    }
}
// 使用
@include position($bottom:0, $right:0);
@include position(fixed); // fixed的固定到全屏的定位，并且层级在上方
@include position($top: 50%, $left: 50%); // 居中使用

// flex的布局使用
@mixin flex($direction:row, $align: normal, $justify:normal) {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	flex-direction: $direction;
	align-items: $align;
	justify-content: $justify;
}
// 使用
@include flex($direction: column, $align:center, $justify:center);

// 通用样式的继承与使用
%btn {
    display: block;
    width: 3.2rem;
    line-height: .86rem;
    font-size: .3rem;
    border-radius: .43rem;
    margin: auto;
    color: #fff;
    background: gray;
    border: 1px solid rgba(0,0,0,0);
}

// 使用
.btn__act {
    @extend %btn;
}

// 精灵图的定位
@mixin icon-posit($x, $y, $img:url(../assets/img/cert_sprites.png)) {
    background: $img no-repeat 0 0;
    background-size: 9.76rem 8.43rem;
	background-position: $x $y;
}
// 同一张sprites的不同定位使用
@include icon(-9.08rem, -2.96rem);

/* 文本超出隐藏 */
@mixin text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
// 放大再缩小的动画
@keyframes zoom {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@mixin animation($name: fadeIn, $time: .4s) {
    animation: $name $time;
}
// 使用
@include animation;
@include animation(zoom);