做了几年的移动开发，写UI界面时，总是受移动端影响，喜欢拿屏幕的宽度-固定值，在刚开始写CSS样式时，适配各种屏幕大小总是在JS中来动态改变控件的宽高，用了calc()感觉很轻松！...一.calc()函数的使用 1.基本语法(calc()) calc()函数可以使用数字属性值来执行加、减、乘、除，四则运算。...乘 left:calc(20% / 3);//除 2.嵌套使用 calc()函数可以嵌套使用。...但是，内部函数将被视为简单的括号表达式。...calc()函数进行计算； 3.calc()函数支持 "+", "-", "*", "/" 运算； 4.calc()函数使用标准的数学运算优先级规则；
过于大方的施舍会导致盗窃——西塞罗 分享一个css函数attr MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr attr可以获取我们标签内的属性作为值...例如： world css： [data-foo]::before { content: attr(data-foo) " "; } 效果： [data-foo...]::before { content: attr(data-foo) " "; } world 除了data-*的自定义属性，也可以获取其他的，例如custom-prefix [...custom-prefix]::before { content: attr(custom-prefix); } world</p...{ content: attr(class) " "; } world .hello::before { content: attr
attr一词语原意思为attribute即为属性。...在js中会用到attr，另外一个属性为prop 至于attr与prop的区别，可以自行Google 今天要说的是这个css里的attr属性； 这个属性可以读取html标签里任何一个字符串类型的值；包含关键字的比如...是不是跟sass很像！... .progress::before{content:attr(val); } 比如这个progress的div；val是自定义的一个属性...； 按照之前会给他写一个html标签如span什么的；用了这个属性可以省去很多标签； https://developer.mozilla.org/en-US/docs/Web/CSS/attr()
CSS tricks上有一系列的完整指南文章，我后面会翻译这些内容，更新不会一下子完成，而是会分成几个，防止自己因看到文章过长而放弃翻译。 CSS有一个特殊的calc()函数，用于做基本的数学运算。...calc() 只作用于属性值 你唯一可以使用calc()函数的地方是在值中。请看这些例子，我们在这些例子中设置了一些不同属性的值。...*/ content: calc("Candyman " * 3); } CSS有很多长度，它们都可以与calc() 一起使用： px % em rem in mm cm pt pc ex ch...换句话说，你不能用Sass这样的东西来预处理calc()，因为它是一个试图完成的polyfill。不是说你需要这样做，因为浏览器的支持很好。...原文：https://css-tricks.com/a-complete-guide-to-calc-in-css/ 翻译未完待续。
前言 calc()对很多同学来说，或许很陌生。看其外表像个函数，既然是函数为什么又出现在CSS中呢？这一点也让我百思不得其解。 在制作页面的时候，总会碰到有的元素是100%的宽度。...今天的calc()函数功能实现上面的效果来得更简单。 什么是calc()? 学习calc()之前，我们有必要先知道calc()是什么？只有知道了他是个什么东东？在实际运用中更好的使用他。...calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。...不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。 calc()能做什么？...随着CSS3的出现，其中利用box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()方法更是方便。
((100% + 2rem) / 2); } CSS自定义属性和calc() ?...html { --spacing: 10px; } .module { padding: calc(var(--spacing) * 2); } 我相信你可以想象一个CSS设置，通过设置一堆CSS...这里有一个例子，其中使用了一些数学（注意一开始没有calc()函数），然后再应用。(最终还是要放在calc()里面。)...calc(var(--S) - 10%), calc(var(--L) + 30%) ) } 你不能把calc()和attr()结合在一起 CSS中的attr()函数看起来很吸引人，就像你可以从...Firefox 函数的calc()。
VSCode还需安装Live Sass Compiler和Live Server两个插件。Live Sass Compiler用于实时编译sass/scss文件为css文件。...清晰易读：对于那些结构与行为分离的写法，使用sass/less编写属性时结构会更清晰易读，减少很多无用或少用的类，保持css文件的整洁性和观赏性 确保一致：减少修改类而有可能导致样式失效的问题，有时修改类但未确保...calc(var(--line-index) * 200ms)就像一个JS函数，在当前节点的作用域上读取相应的变量，从而计算出具体数值并交由浏览器初始化。...内容拼接 结合attr()使用 结合变量和计数器使用 内容拼接 常规操作是content:"CSS"，也可拼接多个字符串，有些同学可能第一时间想起content:"Hello "+"CSS"。....elem { content: "Hello ""CSS"; // 等价于"Hello " "CSS" content: "Hello" attr(data-name); // 与attr
1. attr() 用来选择元素的属性值，用法：attr(html元素的属性名)，正常搭配css content一起使用 html: attr">十 九 css: a:after{content:'('attr(href) '.../' attr(name) ')'} 结果： 十(http://a.b.c / attr) 九(http://d.f.e / 我是谁) 2. calc() 用于动态计算长度值 calc(数学表达式...) 运算符前后需要有空格 不管什么长度都可以用calc计算 calc() 支持 '+','-','*','/' 等运算 calc() 使用标准的数学运算优先级规则 语法： width: calc...示例： background: repeating-linear-gradient(30deg, red 5%, yellow 10%, green 20%); // 结果如下，设置角度后的效果 Css
CSS calc() 是一个很好的工具，可以帮助你优化你的网页。在本文中，我们将研究 CSS calc() 函数，为什么它很有用，以及如何在项目中使用它。 1. 什么是 CSS calc() 函数？...calc() 函数允许在指定 CSS 属性值时执行计算。...关于 CSS calc() 函数有几点需要注意 现在让我们看看在使用 CSS calc() 函数时需要注意的几件事。...5.3 CSS calc() 应用于动画 当然，我们可以使用 CSS calc() 函数来制作动画。...CSS calc()函数使用场景 很多时候我们需要 CSS calc() 函数来方便地解决一些问题。
是一种动态样式语言，Sass 语法属于缩排语法，比 CSS 多出变量、嵌套、运算、混入(Mixin)、继承、颜色处理、函数等功能，更容易阅读。 ...Sass/Scss 与 Less 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS，都具有变量、混入、嵌套、函数等特性，最终目的都是方便 CSS 的书写及维护...保持兼容，calc() 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值。...的 var() 函数或者 attr() 函数 // var() 函数必须要获取内联属性，即必须要是在 style 中的属性，且必须要加上 -- 前缀来标明这是一个自定义属性，否则浏览器无法解析。...// attr() 函数需要获取的标签中的属性，也可以是自定义属性, 但是必须要是在标签中的属性。
Sass 和 CSS 差别： Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。...; } SCSS 和 CSS 差别： SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。...output.css //单文件监听命令 sass --watch input.scss:output.css //如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录： sass...假设你的样式中用到了： .box { border-top: 1px solid red; border-bottom: 1px solid green; } 在 Sass 中我们可以这样写...btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; } ?
1.什么是calc()? calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能。用来指定元素的长度。...比方说，你能够使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。 calc()最大的优点就是用在流体布局上。...能够通过calc()计算得到元素的宽度。 2.calc()能做什么？ calc()能让你给元素的做计算。你能够给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度。...比方说“width:calc(50% + 2em)”，这样一来你就不用考虑元素div的宽度值究竟是多少，而把这个烦人的任务交由浏览器去计算。 3.calc()语法 calc()语法很easy。...4.calc()的运算规则 calc()使用通用的数学运算规则，可是也提供更智能的功能： 使用“+”、“-”、“*” 和 “/”四则运算； 能够使用百分比、px、em、rem等单位。
Sass是什么 Sass是世界上最成熟，稳定强大的专业的CSS拓展语言。 Sass 和所有版本的CSS完全兼容，有丰富的特性，成熟的核心团队，庞大的社区和非常多的基于Sass的框架。...官网的安装指南 将Sass编译成CSS 将一个Sass文件编译成CSS sass input.scss output.css 命令 Sass 监视文件的改动并更新 CSS sass --watch input.scss...这种语法的Sass文件是以.sass后缀命名。另一种语法是SCSS，这是Sass的新的语法规则，他的外观和CSS的一模一样，文件后缀是.scss。...$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } 生成 p....Sass是如何让CSS开发变得简单和可维护 减少重复 变量，继承，Mixin，函数的功能可以减少重复的代码。 简化代码 通过定义一些Mixin,函数，可以简化代码。
1.4 初体验 创建 css、sass、index.html 在 sass / css.scss 文件下编写 $baseColor: red; p { color: $baseColor;...*/ 2.3 属性嵌套 可以使用嵌套来组织 CSS 属性 语法 .container { width: 100%; height: 200px; padding: { top: 10px...后 index.css .container { width: 100%; height: 200px; padding-top: 10px; padding-right: 20px;...#{$class-name} { border-#{$attr}: #f00; font: #{$font-size} / #{$line-height} Helvetica; } 转为.../30px Helvetica; } /*# sourceMappingURL=index.css.map */ ⑨ Sass 常见函数的基本使用 ✅
calc() 函数属于CSS3版本内容，用于动态计算长度值。例如：width: calc(100% - 10px)；需要注意的是，运算符前后都需要保留一个空格。...calc()函数支持 “+”, “-“, “*”, “/” 运算； 举例，给一个div动态设置宽度如下: #divBox { position: absolute; left: 50px; width:...calc(100% – 100px); border: 1px solid black; background-color: yellow; padding: 5px; text-align: center...; } vh，是指css中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。
正文-CSS预处理（less&Sass） CSS预处理 什么是 CSS 预处理？为什么要有 CSS 预处理？...Sass 和 Less 这类语言，其实可以理解成 CSS 的超集，也就是它们是基于 CSS 原本的语法格式基础上，增加了编程语言的特性，如变量的使用、逻辑语句的支持、函数等。...既然是作为函数使用，那么它们存在的意义就只是被调用，所以转换后的 CSS 中并不会存在这个函数。...所以，其实也就是上述例子中，类似函数存在的那些模板选择器，当在书写选择器时，在其后面增加 () 括号，则表示这个选择器只属于 less 的命名空间，转成 CSS 后并不会出现。...内置函数 less 内置了一些基础函数，可用于转换颜色、处理字符串、算术运算等，这里列举一些函数： color("#aaa"); //输出 #aaa， 将字符串的颜色值转换为颜色值 image-size
VSCode还需安装「Live Sass Compiler」和「Live Server」两个插件。Live Sass Compiler用于实时编译sass/scss文件为css文件。...「清晰易读」：对于那些结构与行为分离的写法，使用sass/less编写属性时结构会更清晰易读，减少很多无用或少用的类，保持css文件的整洁性和观赏性 「确保一致」：减少修改类而有可能导致样式失效的问题，...calc(var(--line-index) * 200ms)就像一个JS函数，在当前节点的作用域上读取相应的变量，从而计算出具体数值并交由浏览器初始化。...内容拼接 结合attr()使用 结合变量和计数器使用 内容拼接 常规操作是content:"CSS"，也可拼接多个字符串，有些同学可能第一时间想起content:"Hello "+"CSS"。....elem { content: "Hello ""CSS"; // 等价于"Hello " "CSS" content: "Hello" attr(data-name); // 与attr
但是我所想到的是一些简单而直观的内容——不涉及结构更改，而是使用 CSS 自定义属性甚至 Sass 变量。 CSS 自定义属性和 JavaScript 自定义属性在这里应该不会令人感到惊讶。...Sass 变量和 JavaScript Sass 是一种预处理语言，这意味着它在成为网站的一部分之前就已经变成了 CSS。...global-animation-duration); animationEasing: $global-animation-easing; } 请注意，在导出变量时，我用了自定义 strip-unit 函数...Les James 分享了一种有趣的方法(https://css-tricks.com/making-sass-talk-to-javascript-with-json/)，该方法允许 Sass 和 JavaScript...原文链接 https://css-tricks.com/getting-javascript-to-talk-to-css-and-sass/
css有一个超强的函数特性attr,在css里面我们可以动态的取到unicode的值 我们看下css代码,注意unicode就是你标签上的那个属性 .maic-del { &::before {...渲染这整个标签，不然图标始终显示不出来） 所以你会发现在css中你用attr这个属性就可以动态的加载标签上的unicode了 css的Attr 在以上我们的图标用unicode就可以加载图标，同时我们也知道利用...css中的attr函数成功解决了图标加载问题 我们看看attr这个属性可以在我们项目中怎么用,在哪些场景可以用？...: inline-block; } 我们使用了css3的函数var,以及calc,还有attr，这些都是css3的函数，注意var中的变量必须在:root{}中用--xxx申明成全局，即可使用 看下布局后的基本页面...attr加载使用unicode css3函数var,calc,attr的使用 使用css的attr特性简单实现计数器的效果 本文示例code example[4] 参考资料 [1]iconfont： https
Sass 是一个CSS预处理程序，至今使用广泛，它之所以流行，是因为它修复了几个CSS缺陷： Sass 也是 Bootstrap 4 运行的基础。...SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。...SCSS 中的函数是 SASS 功能的重要组成部分，它们允许我们定义可在整个样式表中重用的复杂操作。...有很多内置的 Sass 函数可供我们使用，查看文档了解更多信息。 这里列出了一些常用的函数： lighten(color, amount)：使颜色更浅。...我们也可以定义自己的 Sass 函数，要实现函数的声明和返回内容我们需要使用function和return两个指令，类似于其他语言中的关键字。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
云直播
腾讯会议
