Sass预定义一些常用的样式

作者：小帅哥小羊儿_309 | 来源：互联网 | 2023-05-18 00:36

一.编写sass文件时,目录不能有中文,如:E:\\CPC手机,会报错exceptionwhileprocessingevents:incompatiblecharacterenc

一.编写sass文件时, 目录不能有中文, 如: E:\\CPC手机, 会报错
exception while processing events: incompatible character encodings: GBK and UTF-8?

二.检测sass目录

$ sass --watch sass:styles

三.引入外部的scss、使用变量, 如index.scss文件引入base.scss文件, 使用es6 import语法

@import "./base.scss";

四.语法

1.变量: $defalutView: 750px;
2.函数: @function rem($px){
　　　　 　　@return ($px / $defalutView) * 10rem;
　　　　 }
3.混合: @mixin maxWidth($maxWidth:640px){
　　　　 　　max-width:$maxWidth;
　　　　 }

五.Sass预定义一些常用的样式

1.三角形

@mixin arrow($direction, $size, $color){
    width:0;
    height:0;
    line-height:0;
    font-size:0;
    overflow: hidden;
    border-width:$size;
    @if $direction == top {
        border-style: dashed dashed solid dashed;
        border-color: transparent transparent $color transparent;
        border-top: none;
    }
    @else if $direction == bottom {
        border-style: solid dashed dashed dashed;
        border-color: $color transparent transparent transparent;
        border-bottom: none;
    }
    @else if $direction == right {
        border-style: dashed dashed dashed solid;
        border-color: transparent transparent transparent $color;
        border-right: none;
    }
    @else if $direction == left {
        border-style: dashed solid dashed dashed;
        border-color: transparent $color transparent transparent;
        border-left: none;
    }
}
// 调用 @include arrow(top,10px,#F00);

2. 圆角

@mixin border-radius($px:5px){
    -webkit-border-radius:$px;
    -moz-border-radius:$px;
    -o-border-radius:$px;
    border-radius:$px;
}

@mixin border-radius-circle(){
    border-radius:50%;border-top-left-radius: 999px;border-top-right-radius: 999px;border-bottom-right-radius: 999px; border-bottom-left-radius: 999px; border-radius: 999px;background-clip: padding-box;
}

3.超出的文本省略

@mixin ell(){
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow:ellipsis;
    white-space: nowrap;
}

@mixin ellMore($lineNumber:2){
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $lineNumber;
    -webkit-box-orient: vertical;
}

4.关于flex布局

@mixin flex-box{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;  
    display: -ms-flex;
    display: flex;
}
@mixin flex-1($percent){
    width:$percent;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
@mixin justify-content{
    -webkit-justify-content:space-between;
    justify-content:space-between;
}

5.盒子标准

@mixin box-sizing {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
}

6.绝对居中

@mixin center($width, $height) {
    position: absolute;
    left:50%;
    top:50%;
    width:$width;
    height:$height;
    margin:(-$height / 2) 0 0 (-$width / 2);
}

7.设置过渡

@mixin transition($transition...) {
    -webkit-transition:$transition;
    -moz-transition:$transition;
    -o-transition:$transition;
    transition:$transition;
}
// 调用 @include transition(all 0.3s ease)

8.动画

@mixin animation($name) {
    -webkit-animation:$name;
    -moz-animation:$name;
    -o-animation:$name;
    animation:$name;
}
// 调用 @include animation(test 1s infinite alternate both)

9.设置关键帧

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        $browser: '-webkit-'; @content;
    }
    @-moz-keyframes #{$name} {
        $browser: '-moz-'; @content;
    }
    @-o-keyframes #{$name} {
        $browser: '-o-'; @content;
    }
    @keyframes #{$name} {
        $browser: ''; @content;
    }
}

10.设置旋转位置

@mixin transform-origin($origin...) {
    -webkit-transform-origin:$origin;
    -moz-transform-origin:$origin;
    -o-transform-origin:$origin;
    transform-origin:$origin;
}

@mixin transform($transform...) {
    -webkit-transform:$transform;
    -moz-transform:$transform;
    -o-transform:$transform;
    transform:$transform;
}

11.Sass里for来快速现实对图片的定位

@for $i from 0 to 17{
    .d-icon-#{$i}{ background-position: -0 -#{+ $i*30}px; }
}

// css生成
.d-icon-0 { background-position: 0 -0px; }

.d-icon-1 { background-position: 0 -30px; }

.d-icon-2 { background-position: 0 -60px; }

.d-icon-3 { background-position: 0 -90px; }

.d-icon-4 { background-position: 0 -120px; }

.d-icon-5 { background-position: 0 -150px; }

.d-icon-6 { background-position: 0 -180px; }

.d-icon-7 { background-position: 0 -210px; }

.d-icon-8 { background-position: 0 -240px; }

.d-icon-9 { background-position: 0 -270px; }

.d-icon-10 { background-position: 0 -300px; }

.d-icon-11 { background-position: 0 -330px; }

.d-icon-12 { background-position: 0 -360px; }

.d-icon-13 { background-position: 0 -390px; }

.d-icon-14 { background-position: 0 -420px; }

.d-icon-15 { background-position: 0 -450px; }

.d-icon-16 { background-position: 0 -480px; }

推荐阅读

function
vue使用

关键词： ... [详细]

蜡笔小新 2023-12-14 19:14:56
function
成功安装Sabayon Linux在thinkpad X60上的经验分享

本文分享了作者在国庆期间在thinkpad X60上成功安装Sabayon Linux的经验。通过修改CHOST和执行emerge命令，作者顺利完成了安装过程。Sabayon Linux是一个基于Gentoo Linux的发行版，可以将电脑快速转变为一个功能强大的系统。除了作为一个live DVD使用外，Sabayon Linux还可以被安装在硬盘上，方便用户使用。 ... [详细]

蜡笔小新 2023-12-13 11:35:40
function
使用n3-charts绘制以日期为x轴的数据

本文介绍了如何使用n3-charts绘制以日期为x轴的数据，并提供了相应的代码示例。通过设置x轴的类型为日期，可以实现对日期数据的正确显示和处理。同时，还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习，读者可以掌握使用n3-charts绘制日期数据的方法。 ... [详细]

蜡笔小新 2023-12-10 00:19:21
function
css div中文字位置_超赞的 CSS 阴影技巧与细节

本文的题目是CSS阴影技巧与细节。CSS阴影，却不一定是box-shadow与filter:drop-shadow，为啥？因为使用其他属性 ... [详细]

蜡笔小新 2023-10-17 08:15:59
function
[置顶] ACM头文件、常用函数、宏定义

部分转载自：http:blog.csdn.netliujiuxiaoshitouarticledetails69920917头文件#include<assert.h& ... [详细]

蜡笔小新 2023-10-16 12:54:07
search
如何自行分析定位SAP BSP错误

The“BSPtag”Imentionedintheblogtitlemeansforexamplethetagchtmlb:configCelleratorbelowwhichi ... [详细]

蜡笔小新 2023-12-14 19:58:05
int
Android开发笔记：使用Picasso加载网络图片等比例缩放

在Android开发中，使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法，并提供了具体的代码实现。通过获取图片的宽高，计算目标宽度和高度，并创建新图实现等比例缩放。 ... [详细]

蜡笔小新 2023-12-14 17:34:00
function
PE总结9PE文件结构之解析导出表

本文介绍了PE文件结构中的导出表的解析方法，包括获取区段头表、遍历查找所在的区段等步骤。通过该方法可以准确地解析PE文件中的导出表信息。 ... [详细]

蜡笔小新 2023-12-13 11:47:24
function
C++中的三角函数计算及其应用

本文介绍了C++中的三角函数的计算方法和应用，包括计算余弦、正弦、正切值以及反三角函数求对应的弧度制角度的示例代码。代码中使用了C++的数学库和命名空间，通过赋值和输出语句实现了三角函数的计算和结果显示。通过学习本文，读者可以了解到C++中三角函数的基本用法和应用场景。 ... [详细]

蜡笔小新 2023-12-13 10:06:01
function
C++字符字符串处理及字符集编码方案

本文介绍了C++中字符字符串处理的问题，并详细解释了字符集编码方案，包括UNICODE、Windows apps采用的UTF-16编码、ASCII、SBCS和DBCS编码方案。同时说明了ANSI C标准和Windows中的字符/字符串数据类型实现。文章还提到了在编译时需要定义UNICODE宏以支持unicode编码，否则将使用windows code page编译。最后，给出了相关的头文件和数据类型定义。 ... [详细]

蜡笔小新 2023-12-13 04:59:58
int
常用的CSS属性及用法整理

本文整理了常用的CSS属性及用法，包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等，方便开发者查阅和使用。 ... [详细]

蜡笔小新 2023-12-09 03:01:43
input
pytorch Dropout过拟合的操作

这篇文章主要介绍了pytorchDropout过拟合的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完 ... [详细]

蜡笔小新 2023-10-16 19:35:56
input
Windows 11 Insider Preview Build 22621.730/22623.730(KB5017385)发布！

今天微软官方将Windows11InsiderPreviewBuild22621.730和Build22623.730（KB5017385）发布到Bet ... [详细]

蜡笔小新 2023-10-14 16:49:44
function
linux的地址随机化ASLR,[翻译]Linux (x86) Exploit 开发系列教程之六（绕过ASLR第一部分）...

前提条件：经典的基于堆栈的缓冲区溢出虚拟机安装：Ubuntu12.04(x86)在以前的帖子中，我们看到了攻击者需要知道下面两样事情堆栈地 ... [详细]

蜡笔小新 2023-10-14 13:38:49
char
所有设备的 CSS3 媒体查询

所有设备的CSS3媒体查询原文:https://www. ... [详细]

蜡笔小新 2023-10-13 10:10:33

小帅哥小羊儿_309

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章