sass 的calc

2024-10-11

sass和css的calc运算

1.sass不识别不同单位之间的计算,而calc则没问题. width: #{1rem - 2px}; /*出错*/ width: calc(1rem - 2px); 通常情况定制css样式,我不需要去量size,我大多数是通过计算(你无须知道size的结果,你只看效果是否满意),常常利用cacl和size的结合: width: calc((100% - #{$mr}*#{$j})/#{$i} ); 2.sass和calc 不能单独识别“/”,也就是不能单独识别除法,解决这种问题有两种做法:0+

解决在sass中使用calc不能包含变量的问题。

今天写sass的时候,发现在sass中使用calc,如果calc中包含一个变量,不会产生效果,看代码: .app-inner { display: flex; height: calc(100% - $topbar-height); } 在浏览器中没有产生效果: 可以看到sass并没有解析这个$topbar-height. 最后在github的issue中找到了方法,要想在sass的calc中使用变量,必须对这个变量使用sass的插值方法(#{$variable}). 所以把代码改正下面的形式就

sass 使用clac的问题

最后在github的issue中找到了方法,要想在sass的calc中使用变量,必须对这个变量使用sass的插值方法(#{$variable}). 所以把代码改正下面的形式就可以了: width: calc(100% - #{$topbar});

js如何操作sass里的变量及calc 使用sass变量

scss文件里 :root { --height-primary: 240px; //--height-primary :变量名,css3有规则 } $header: var(--height-primary); //用var来盛放变量名 .el-table{ height: calc(100vh - 101px - #{$header}); } js里更改 if(this.isDB){ document.getElementsByTagName('body')[0].style.setProp

PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCSS插件配合预处理器得到很好的赞誉,因为他们将功能添加到你的工作流中,让你工作变得更加轻松.如果你只使用一个预处理器,而不使用这些插件,你的工作流至少会变得更加困难. 我们会涉及一些免费的PostCSS插件,然后我们将会介绍一些配置的阐述,告诉您如何将PostCSS和你喜欢的预处理器(Sass.Sty

Sass的基本运算(转载)

转载于:http://www.cnblogs.com/Medeor/p/4966952.html Sass中的基本运算一.加法在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.但在 Sass 中,运算只是其基本特性之一. sass做加法运算是可以不考虑参数带单位,但需要单位同一加号可以不需要空格隔开示例: 1 $sidebar-width: 220px; 2 $content-width: 720px; 3 $gap-width: 20px; 4 5

你需要知道的Sass插值

你也许会不时地写写 Sass 玩玩,你也会很享受它带给你各种便利.但还有一件事,你并不一定完全了解:插值 (interpolation) - 将一个占位符,替换成一个值.好了,你们都很幸运,因为今天我将把这种问题说清楚. 插值.啥玩意儿? 插值,通常是指变量插值,或者变量替换.这不是Sass独有的.实际上,你可以在很多编程语言中,发现这种特性.比如 PHP, Perl, Ruby, Tcl, Groovy, Unix shells, 等等.我们经常说的是,插入一个变量,或者插入一个表达式. 我们

Sass结合Modernizr的使用方法

Modernizr在初始化的时候会首先找寻class=“no-js”的元素: <!DOCTYPE html> <html class="no-js"> <head lang="en"> <title>ModernizrDemo</title> <meta charset="UTF-8"> <link rel="stylesheet" type=&qu

Sass运算

加法在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.在 Sass 中,运算只是其基本特性之一.在 Sass 中可以做各种数学计算.加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算.如: .box { width: 20px + 8in; } 编译出来的 CSS: .box { width: 788px; } 对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示: .box { width: 20px + 1em; } 编译的时候,编译器会报错:“

less/sass 基础base文件

less less-base.less文件展示: //清除标签默认样式; .label(){ ;;;_background-image:url(n1othing.txt)} ;;; font-size: 100%; vertical-align: baseline; } ol, ul, li { list-style: none; } body {line-height: 1.5; background: white; font-family: 'Microsoft Yahei', Arial,

vue中使用sass 做减法计算

首先确认已安装sass依赖, yarn指令:yarn add sass-loader, style中写法如下: 注意calc(100% - 200px); 之间有两个空格的,

Sass进阶之路,之二(进阶篇)

Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em; 1.2 String 不加双引号的,加双引号的,加单引号的全部都属于String类型 String类型详细内容请点击这里, 下面是小demo 1.$s1: container;2.$s2: 'container';3.$s3: "

Sass进阶之路,之一(基础篇)

Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护. 那么css预处理器与Sass有什么关系呢,Sass就是属于css预处理器中的一种,还有两款他们分别是Less和 Stylus,这里就不做过多的介绍了. 什么是Sass sass是一种css的开发工具,提供了很多便利的写法,不但使css

sass 的使用

普通变量 ? 1 $fontSize:12px; 默认变量 ? 1 $fontSize:12px; !default; 变量覆盖:只需要在默认变量之前重新声明下变量即可 ? 1 2 $fontSize:14px; $fontSize:12px; !default; 变量的调用 ? 1 2 3 4 $fontSize:14px; .demotest{ font-size:$fontSize; } 局部变量和全局变量全局变量就是定义在元素外面的变量 ? 1 2 3 4 5 6 7 8 9 10

SASS和LESS等优缺点对比，使用方法总结 (笔记大全)

sass优点: 用户多,更容易找到会用scss的开发,更容易找到scss的学习资源: 可编程能力比较强,支持函数,列表,对象,判断,循环等: 相比less有更多的功能: Bootstrap/Foundation等使用scss: 丰富的sass库:Compass/Bourbon: sass缺点: 在公司内部安装node-sass会失败,需要使用cnpm或者手工安装 less优点可以在浏览器中运行,实现主题定制功能: less缺点编程能力弱,不直接支持对象,循环,判断等: @variable 变

1-5 Sass的基本特性-运算

[Sass运算]加法程序中的运算是常见的一件事情,但在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.但在 Sass 中,运算只是其基本特性之一.在 Sass 中可以做各种数学计算,在接下来的章节中,主要和大家一起探讨有关于 Sass 中的数学运算. (一).加法加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算.如: .box { width: 20px + 8in; } 编译出来的 CSS: .box { width: 788px; } 但对于携带不同类

Sass 基本特性-运算感觉满满都是坑

Sass中的基本运算一.加法在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.但在 Sass 中,运算只是其基本特性之一. sass做加法运算是可以不考虑参数带单位,但需要单位同一加号可以不需要空格隔开示例: $sidebar-width: 220px; $content-width: 720px; $gap-width: 20px; .container { width: $sidebar-width+$content-width + $gap-wi

sass基础篇

scss的语法非常简单: $color: red; div{ color: $color; } 这就是一个简单的scss代码. 但是,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢?显然是不行的,因为浏览器只能解析css文件,所以在使用的时候需要对scss文件进行编译.当然编译方法有很多,可以使用sass命令,也可以使用webpack,fis3等一些代码打包工具. Tips:相对于scss,sass语法比较严格而且语法不太容易被前端开发者所

Sass 基础(四)

当你想设置属性值的时候你可以使用字符串插入进来,另一个使用的用法是构建一个选择器. @mixin generate-sizes($class,$small,$medium,$big){ .#{$class}-small {font-size:$small;} .#{$class}-medium{ font-size:$medium} .#{$class}-big{ font-size:$big;} } @include gencerate-sizes("header-text",12p

Sass基础（二）

五.嵌套在Sass中,嵌套有三种方式:选择器嵌套.属性嵌套.伪类嵌套 1.选择器嵌套 2.属性嵌套 3.伪类嵌套六.混合宏当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到目的了.这时候 Sass 中的混合宏就会变得非常有意义. 七.扩展/继承/占位符在Sass中,同关键词“@extend”来继承已存在样式块八.插值插值可以让变量和属性工作很完美,但使用时具有局限性. 语法格式:#{ XXX } 九.Sass的数据类型 Sass的数据类型大致有六种:数字.字符串(有引

sass 的calc

热门专题