scss常用用法和弹性布局自己整理

桃扇骨 2022-10-16 04:44 304阅读 0赞

scss常用用法
    一.引入弹性布局
    引入scss样式方法里面有flex布局弹性布局
    在script里面引入
    注意：格式语法
    ①：引入：import “./common/host.scss”
    ②：带入： @include flex(" center")
    import “./common/host.scss”
    
    . max｛
    width:100%
    @include flex(" center")
    . list1｛
    width:100%
    height:100%
    background—color:blue;
    ｝
    . list2｛
    @extend . list1
    ｝
    ｝
    
    
    二.变量样式引量
    注意：格式语法
    $high—color:red;
    . max{
    background-color：$high—color
    }
    
    三.样式继承:list2引入list1
    注意：格式语法 @extend 
    . max｛
    . list1｛
    width:100%
    height:100%
    background—color:blue;
    ｝
    . list2｛
    @extend . list1
    ｝
    ｝
    
    四：给选择器两个名字用法
    注意：格式语法 &.table_table 
    
    <div class="max table_max">
    <div class="list"></div>
    </div>
    
    . max{
    width:100%；
    height:100%;
    background-color:blue;
    .list｛
    width:100%
    ｝
    &.table_table｛
    border:none;
    ｝
    }
    
    
    弹性布局 
    注意：使用弹性布局一般！！！不给父元素设置高度让子元素自己撑开高度，也就是：自己设置子元素高度 display: flex;
    flex-direction: row;
    // flex-direction: column;//主轴也就是横向x决定内容横向还是纵向排列的
    justify-content: flex-start;//纵轴也就是横向y
    align-items: center; http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

发表评论取消回复

表情：

评论列表（有 0 条评论，304人围观）

还没有评论，来说两句吧...

相关阅读

相关 SCSS常用语法总结

Scss 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (in

柔光的暖阳◎/ 2023年06月19日 09:57/ 0 赞/ 6 阅读

相关 css弹性盒子布局及用法

@TOC（1）介绍的第一个就是display：-webkit-box，我们知道元素大致分为内联元素、块状元素和介于两者之间的元素，当然还有inline-table、table-

快来打我*/ 2023年05月29日 06:19/ 0 赞/ 11 阅读

相关常用弹性布局及其兼容性写法

// 开启弹性布局 display:-webkit-box; display: -moz-box; display: -

偏执的太偏执、/ 2022年11月26日 08:49/ 0 赞/ 174 阅读

相关 Flex(弹性布局)实现五大常用布局

css布局在前端开发工作中是必不可少的，在这里我将利用Flex实现五大常用布局，首先来熟悉一下flex。 Flex布局(弹性布局) 一、Flex布局是什么任何一

r囧r小猫/ 2022年11月08日 14:10/ 0 赞/ 320 阅读

相关 scss常用用法和弹性布局自己整理

scss常用用法一.引入弹性布局引入scss样式方法里面有flex布局弹性布局在script里面引入注意：格式语法 ①：

桃扇骨/ 2022年10月16日 04:44/ 0 赞/ 305 阅读

相关常用Flex 布局归置》仅做笔记（scss）

@mixin df { display: -webkit-flex; display: -moz-flex; displ

雨点打透心脏的1/2处/ 2021年11月09日 17:44/ 0 赞/ 245 阅读

相关 CSS3 弹性盒子用法

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex

偏执的太偏执、/ 2021年11月02日 01:58/ 0 赞/ 363 阅读

相关 Sass（scss）常用语法记录

1. sass与scss区别 SCSS 需要使用分号和花括号。 sass举例： sidebar width: 30%

落日映苍穹つ/ 2021年10月06日 02:28/ 0 赞/ 452 阅读

相关 ExtJs常用layout布局整理

前言 ExtJs常见的布局方式有：`border` 、`form`、`absolute`、`column`、`accordion`、`table`、`fit`、`

叁歲伎倆/ 2021年09月16日 02:34/ 0 赞/ 398 阅读

相关弹性布局常用属性

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>弹性布局<...

你的名字/ 2021年05月03日 16:01/ 0 赞/ 554 阅读