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; }

推荐阅读

io
利用pg-promise批量插入记录

本文探讨了如何使用pg-promise库在PostgreSQL中高效地批量插入多条记录，包括通过事务和单一查询两种方法。 ... [详细]

蜡笔小新 2024-12-19 12:55:22
utf-8
无屏幕环境下树莓派4B的安装与配置指南

本文将详细介绍如何在没有显示器的情况下，使用Raspberry Pi Imager为树莓派4B安装操作系统，并进行基本配置，包括设置SSH、WiFi连接以及更新软件源。 ... [详细]

蜡笔小新 2024-12-21 08:14:50
io
优化SQL Server批量数据插入存储过程的实现

本文介绍了一种改进的SQL Server存储过程，用于生成批量插入语句。该方法不仅提高了性能，还支持单行和多行模式，适用于SQL Server 2005及以上版本。 ... [详细]

蜡笔小新 2024-12-21 06:43:52
utf-8
HTML5与JavaScript实现本地文件读取、写入及路径获取

本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作，并介绍了获取本地文件路径的方法。HTML5提供了一系列API，使得这些操作变得更加简便和安全。 ... [详细]

蜡笔小新 2024-12-20 18:36:06
utf-8
docker镜像重启_docker怎么启动镜像

docker镜像重启_docker怎么启动镜像dock ... [详细]

蜡笔小新 2024-12-20 16:34:52
utf-8
软件工程课堂测试2

要做一个简单的保存网页界面，首先用jsp写出保存界面，本次界面比较简单，首先是三个提示语，后面是三个输入框，然 ... [详细]

蜡笔小新 2024-12-20 15:00:51
io
UNIX进程间通信（IPC）详解

本文深入探讨了UNIX/Linux系统中的进程间通信（IPC）机制，包括消息传递、同步和共享内存等。详细介绍了管道（Pipe）、有名管道（FIFO）、Posix和System V消息队列、互斥锁与条件变量、读写锁、信号量以及共享内存的使用方法和应用场景。 ... [详细]

蜡笔小新 2024-12-20 10:14:51
io
Java中XYSeries.setLineColor()方法详解与应用实例

本文详细介绍了Java库XChart中的XYSeries类下的setLineColor()方法，并提供了多个实际应用场景的代码示例。 ... [详细]

蜡笔小新 2024-12-20 08:27:06
io
java文本编辑器,java文本编辑器设计思路

java文本编辑器,java文本编辑器设计思路 ... [详细]

蜡笔小新 2024-12-19 21:02:48
utf-8
基于目标检测结果的特定类别图像与XML文件快速分析方法

本文介绍了一种根据目标检测结果，从原始XML文件中提取并分析特定类别的方法。通过解析XML文件，筛选出特定类别的图像和标注信息，并保存到新的文件夹中，以便进一步分析和处理。 ... [详细]

蜡笔小新 2024-12-19 17:32:58
spring
深入解析Spring Boot自动配置机制

本文旨在深入探讨Spring Boot的自动配置机制，特别是如何利用配置文件进行有效的设置。通过实例分析，如Http编码自动配置，我们将揭示配置项的具体作用及其背后的实现逻辑。 ... [详细]

蜡笔小新 2024-12-19 12:41:37
heap
备战BAT面试：掌握这些MySQL核心问题

本文深入探讨了MySQL中常见的面试问题，包括事务隔离级别、存储引擎选择、索引结构及优化等关键知识点。通过详细解析，帮助读者在面对BAT等大厂面试时更加从容。 ... [详细]

蜡笔小新 2024-12-20 18:58:01
io
C++对象模型研究：运行时行为分析

本文探讨了C++编程中理解代码执行期间复杂度的挑战，特别是编译器在程序运行时生成额外指令以确保对象构造、内存管理、类型转换及临时对象创建的安全性。 ... [详细]

蜡笔小新 2024-12-20 18:47:33
utf-8
springMVC JRS303验证

springMVC JRS303验证 ... [详细]

蜡笔小新 2024-12-20 09:07:39
io
使用JFreeChart绘制环形图

本文介绍了如何使用JFreeChart库创建一个美观且功能丰富的环形图。通过设置主题、字体和颜色等属性，可以生成符合特定需求的图表。 ... [详细]

蜡笔小新 2024-12-19 16:26:09

小帅哥小羊儿_309

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

Tags | 热门标签

RankList | 热门文章