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

桃扇骨 2022-10-16 04:44 256阅读 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 条评论，256人围观）

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

相关阅读

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

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

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

相关 nginx常用配置和用法

nginx中root和alias的区别访问地址：http://localhost/website 案例1： location /website/ \{

小灰灰/ 2022年11月21日 01:15/ 0 赞/ 372 阅读

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

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

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

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

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

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

相关用docker弹性部署自己的服务

很久不看docker的东西了，之前了解的一些基本命令都忘得差不多了，适逢工作需要，再来复习巩固下。今天想完成的是：借助docker不部署下自己的服务。环境准备都说“

小灰灰/ 2022年05月06日 15:57/ 0 赞/ 153 阅读

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

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

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

相关 CSS3 弹性盒子用法

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

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

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

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

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

相关 ExtJs常用layout布局整理

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

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

相关弹性布局常用属性

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

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