CSS SASS calc() 计算表达式或使用变量

news2024/11/24 3:17:18

calc()是css的一个函数,可用于元素计算长度,比如div宽度想要减去一个固定宽度后并自适应,可以写为calc(100% - 60px) 注意“-”两边有空格

sass已经是常用的预编译语言,允许使用变量等规则,如果上边写到60px是一个变量,这个表达怎么写呢

$base-sidebar-width = "60px"

.main-container {
    width: calc(100% - $base-sidebar-width);
    height: calc(100% - 60px);
    transition: margin-left .28s;
    margin-left: $base-sidebar-width;
    position: fixed;
    margin-top: 60px;
  }

显然这样写是不行的,浏览器解析完是这样子的

在scss里改为这样就行了:#{$base-sidebar-width}

 .main-container {
    width: calc(100% - #{$base-sidebar-width});
    height: calc(100% - 60px);
    transition: margin-left .28s;
    margin-left: $base-sidebar-width;
    position: fixed;
    margin-top: 60px;
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1024586.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

上海亚商投顾:沪指窄幅震荡微跌 两市成交金额创年内新低

上海亚商投顾前言:无惧大盘涨跌,解密龙虎榜资金,跟踪一线游资和机构资金动向,识别短期热点和强势个股。 一.市场情绪 沪指昨日窄幅震荡,创业板指盘中跌超1%,黄白二线有所分化。华为星闪概念股午后拉升&…

EPC与5GC/5GS互联互通

一、5GS与EPC/E-UTRAN互通的非漫游架构 1.N26接口是MME和5GS AMF之间的CN间接口,以实现EPC和NG核心之间的互通。网络中支持N26接口是可选的,用于互通。N26支持在S10上支持的功能的子集(对于互通是必要的)。 2&#xf…

面试题:HTTPS 是如何保证传输安全的?又被问了!

文章目录 1. HTTP 协议1.1 HTTP 协议介绍1.2 HTTP 中间人攻击1.3 防止中间人攻击 2. HTTPS 协议2.1 HTTPS 简介2.2 CA 认证体系 总结 1. HTTP 协议 在谈论 HTTPS 协议之前,先来回顾一下 HTTP 协议的概念。 1.1 HTTP 协议介绍 HTTP 协议是一种基于文本的传输协议&…

Android13 大屏设备底部显示TaskBar并NavagatonBar居右

Android 13大屏设备时底下显示任务栏以及虚拟按键靠右的问题, 当前需求是去掉底部任务栏的显示,并把虚拟按键导航栏居中显示。 修改前的效果: 修改后的效果: 通过查看源码逻辑,可以发现只需把isTablet相关的逻辑和…

Mybatis 映射器中映射方法接受多个参数(@Param)

前面我们介绍了使用Mybatis映射器进行数据的增删改查操作;本篇我们继续介绍在Mybatis映射器的映射方法中如何使用多个参数。 如果您对Mybatis使用映射器进行数据的增删改查操作不太了解,建议您先进行了解后再阅读本篇,可以参考: …

【数据结构】二叉树的构建与基本操作实现

👀樊梓慕:个人主页 🎥个人专栏:《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》 🌝每一个不曾起舞的日子,都是对生命的辜负 目录 前言 1.前序建立二叉树 2.销毁二叉树 3.统计 …

uni-app 之 picker选择器

uni-app 之 picker选择器 同步滚动&#xff1a;开 uni-app 之 picker选择器 一、普通选择器 二、多列选择器 三、时间选择器 四、日期选择器 一、普通选择器 <template><view><picker change"bindPickerChange" :value"index" :range&q…

LabVIEW开发航天器模拟器的姿态控制和反作用轮动量管理

LabVIEW开发航天器模拟器的姿态控制和反作用轮动量管理 在过去十年中&#xff0c;航天器一直是现代技术进步的先决条件。迄今为止&#xff0c;为了更好地完成各种实际任务&#xff0c;已经在航天器姿态控制领域进行了大量研究。航天器一旦进入太空&#xff0c;就容易出现不确定…

JavaWeb开发-05-SpringBootWeb请求响应

一.请求 1.Postman 2.简单参数 ​ package com.wjh.controller;import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;/** 测试请求参数接受*/ R…

【IntelliJ IDEA】cmd和idea Terminal查看java版本不一致

问题描述 原来win10电脑上安装的是jdk8的版本&#xff0c;因某些原因&#xff0c;现在想换成jdk7的版本&#xff0c;修改环境变量后&#xff0c;在cmd中执行 [java -version]命令&#xff0c;显示的是7的版本。 但在idea的Terminal中执行&#xff0c;确实显示8的版本。 原因分…

vue设置路由模式为history,打包部署,并解决404问题

现在Router配置里面加上 base 和 mode 属性&#xff1a; export default new Router({base: /your_project_name/,mode: history,routes: [......] })这样就能支持 history 模式了&#xff0c;但是现在静态资源获取还有问题。 解决静态资源获取问题 在 config/index.js 文件…

TS中的数据类型

一、number类型 let c: number; c 10; c "hello"; // 不能复制string类型 二、string类型 let d: string; d "hello"; d 10; // 不能复制number类型 三、boolean类型 let e: boolean true; e false; e 10; // 不能赋值true和false以外的值 四…

Cypress安装与使用教程(1)—— 软测大玩家

&#x1f60f;作者简介&#xff1a;博主是一位测试管理者&#xff0c;同时也是一名对外企业兼职讲师。 &#x1f4e1;主页地址&#xff1a;【Austin_zhai】 &#x1f646;目的与景愿&#xff1a;旨在于能帮助更多的测试行业人员提升软硬技能&#xff0c;分享行业相关最新信息。…

半导体划片机工艺应用

半导体划片工艺是半导体制造过程中的重要步骤之一&#xff0c;主要用于将大尺寸的晶圆切割成小片&#xff0c;以便进行后续的制造和封装过程。以下是一些半导体划片工艺的应用&#xff1a; 晶圆划片&#xff1a;在半导体制造过程中&#xff0c;需要将大尺寸的晶圆切割成小片&am…

【数据库系统概论】数据库系统外部的体系结构

单用户结构主从式结构分布式结构客户机&#xff0f;服务器结构&#xff08;C/S结构&#xff09;浏览器 / 服务器结构&#xff08;B/S结构&#xff09;感谢 &#x1f496; 上一篇文章 数据库系统的三级模式和二级映射介绍的是数据库系统内部的体系结构&#xff0c;是从应用开发…

计算机网络知识补充(1)

计算机网络:是一个将分散的&#xff0c;具有独立功能的计算机系统&#xff0c;通过通信设备和线路进行连接起来&#xff0c;由功能完善的软件实现资源共享和信息共享的系统&#xff0c;计算机网络是互连的&#xff0c;自治的计算机集合 互连:通过通信链路来进行互联互通 自治:没…

云安全威胁和责任

云计算的共享特性和按需定制本质除了给企业带来效率上提升&#xff0c;也引入了新的安全威胁&#xff0c;有可能使企业得不偿失。 之前云安全联盟(CSA)的报告便指出&#xff0c;云服务天生就能使用户绕过公司范围内的安全策略&#xff0c;建立起自己的影子IT项目服务账户。 新的…

全面感知,智能预警!燃气感知云,守护城市“烟火气”

燃气安全如何保障&#xff1f;燃气企业如何精准运营&#xff1f;天翼物联基于感知云平台创新能力&#xff0c;提供燃气感知云服务&#xff0c;包括泛协议接入、感知云燃气平台、燃气感知数据治理、决策处置大屏四大服务&#xff0c;构建燃气行业感知神经系统新型数字化底座&…

Interceptor的使用场景:拦截请求中的租户信息,注入到租户上下文中

业务场景 在SaaS环境中&#xff0c;租户是最重要的隔离业务数据的属性了&#xff0c;在自己的项目体系环境中&#xff0c;租户id能保证有值。但有个特殊场景&#xff0c;某些特殊权限的账号需要修改指定租户的内容&#xff0c;也即前端会携带租户信息过来&#xff0c;并且内部涉…

【力扣-每日一题】2560. 打家劫舍 IV

class Solution { public:bool check(vector<int> &nums,int max_num,int k){//只需要计算可以偷的房间。在满足最大值为max_num下时&#xff0c;能偷的最多的房间&#xff0c;与k值比较//如果大于K&#xff0c;说明max_num还可以缩小//如果小于看&#xff0c;说明ma…