sass、特殊字符、动画专题、BFC

北慕~

于 2023-08-07 19:45:44 发布

阅读量61

点赞数

文章标签： sass rust 前端 html5 css 开发语言

本文链接：https://blog.csdn.net/qq_52288637/article/details/132152923

版权

sass

sass 是css的预编译语言

    sass的写法
        简单的写法和 css是一样的
    less的写法
        通过换行符和空格来表达层级关系

    css 写法
        div{ border: 1px #f00 solid; }
        div p { font-size:20px; }

    sass 写法
        div{
            border:1px #f00 solid;
            p{
                font-size:20px;
            }
        }
    
    less 写法
        div
            border:1px #f00 solid;
            p
                font-size:20px;

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

    使用sass，可以使用两种语法格式，语法格式不同，文件后缀名不同，具有 scss和sass 两种不同后缀名
    scss：支持css3语法格式，所有的css3语法都通用
    sass：被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性。

sass的变量

在vscode中安装插件
easy sass
easy less
主要是使用的是 easy sass ，通过插件编译后的结果是会自动
生成一个 css文件和一个 min.css 压缩文件

    声明变量
    通过关键字 $ 声明变量，$name 此时的name就是变量名
    变量名的命名方式：
        以数字，字母、下划线 _ 、短横线- 组合的字符作为变量名
        注意，只能以 字母和下划线 _ 开头

    通过 #{} 插值语句可以在选择器或属性名中使用变量：
    直接在属性中使用变量，sass  会报错
    如 margin-$left:10px;   报错
    margin-#{$left}:10px; 正确写法

全局作用域和局部作用域
全局作用域范围是  整个sass文件，局部作用域范围是某一个选择器内部

全局变量和局部变量
    全局变量：声明在全局作用域内的变量，可以在任何地方使用该变量
    局部变量：声明在局部作用域内的变量，只能在声明的地方使用

sass的嵌套规则

sass的嵌套规则
.wp {
background:#f60;
h1{ color:#333; }
p{ color:#333; }
}
以上嵌套规则最终会被编译为后代选择器的形式，因此嵌套不宜过深

    属性嵌套:凡是可以进行拆分的属性，都可以使用属性嵌套，注意
    属性名后面的冒号(:) 要和 {} 有空格
    border : {
    width: 2px;
    style:solid;
    color: #f00;
    }

    父选择器标识符 &,& 表示当前的父选择器

混合器

混合器作用，是把相同的css样式提取出来，单独设置成一个模块，使用
方便

    使用混合器 @mixin
    语法 @mixin name{
        css 样式代码
    }
    其中，name 就是混合器的名字，他是一个变量，命名规则相同 变量的命名规则

    使用混合器
    @include name; 通过@include把混合器的名字引入到使用混合器
    的位置

    复杂的混合器
    混合器也可以接受参数

    1.定义混合器
        @mixin name(arg1,arg2,arg3...){
            css 样式代码
        }
        ()中的arg 列表，就是混合器的参数，由于他们只是形式上的参数，不具备任何意思
        因此称为 形参列表
        注意，参数本质也是变量，因此需要 $开头
    2.使用混合器
        @include name(val1,val2,val3...);
        val 列表，是实际的数据，因此称为实参列表

    形参和实参是一一对应的关系

html中的特殊字符

	&nbsp;  空格
    &gt;    大于号
    &lt;    小于号
    &copy;  版权符号
    &quot;  双引号
    &apos;  单引号      
    &times; x号        
    &trade; 商标

动画专题

动画分为过渡动画和关键帧动画

    1.过渡动画  transition
        使用: 
            a.给需要设置过渡动画的元素添加transition属性
            b.过渡动画需要手动触发
                触发条件可以为
                    1.通过伪类选择器
                    2.通过js
                    3.媒体查询
        过渡动画不能操作 display 属性的过渡
    2.关键帧动画  animation
        使用：
            a.给需要设置关键帧动画的元素添加animation属性
            b.需要设置动画效果
            c.自动触发

        关键帧动画不能控制 宽度和高度的 auto 值，也就是关键帧动画执行宽高的设置，必须有具体值

媒体查询-过渡动画

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .wp{
            height: 150px;
            background: #f00;
            transition: all 2s;

        }
        @media only screen and (min-width:1000px) and (max-width:1200px) {
            .wp{
                background: #04be02;
                height: 250px;
            }
        }
    </style>

BFC

BFC 块级格式化上下文，bfc规定了在当前元素
中块元素的布局方式，默认只有一个标签body是
块级上下文标签

    BFC特点
    1.是一个独立的布局环境，BFC内部的布局和外部不会相互影响
    2.可以通过一些方法触发BFC，完成一个独立的布局环境

    BFC的布局规则
    1.BFC内部的块元素，会从上到下一个一个的垂直排列
    2.BFC 规定了 两个相邻的块元素他们的上下margin重合
    3.每一个元素的margin 盒模型的左边(margin-left)，与包含他的父border 盒模型的左边
    (border-left)相接触
    4.每一个BFC区域不会和浮动的元素重叠
    5.每一个BFC区域都是独立的，他里面的内容和外面的内容相互不影响

    创建一个BFC的方法
    1.给元素添加 overflow,他的值visible 除外
    2.给元素设置float浮动，注意 浮动值 none除外
    3.给元素设置position，他的值是 fixed 或者 absolute
    4.给元素设置 display,他的值为 flex、inline-flex、table-cell、inline-block