在sass中写的css3经过编译后可以兼容各个浏览器?

发布于 2022-09-01 12:02:51 字数 311 浏览 24 评论 0

@mixin rounded($vert, $horz, $radius: 10px) {
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius-#{$vert}#{$horz}: $radius;
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;
  }
像这样的代码就只用写第一行border-#{$vert}-#{$horz}-radius: $radius;
各个浏览器的前缀会经过sass的编译自动生成?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

屋顶上的小猫咪 2022-09-08 12:02:51

是这样子的,只要自己开始先定义好的mixin然后把需输出的固定内容写在里面,而需要变的内容做为变量传进去就行咯,以后,在需要用到的时候直接调用传参~

如果配合 compass的话,一些常用的他都给封装好了的~

---------- 下午补充回答 ---------

评论里面不能放代码块:

比如你已经安装了compasssass,下面写一个使用圆角的例子:

@import "compass/css3";
.rounded {
    @include border-radius(5px);
}

最后生成结果如下:

.rounded {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}

关于compass的一些用法可以去参看一下阮一峰老师的这篇博客:http://www.ruanyifeng.com/blog/2012/11/compass.html

別甾虛僞 2022-09-08 12:02:51

一个比较好的处理浏览器前缀的解决方案是autoprefixer

不知在何时 2022-09-08 12:02:51

只写标准的,不用写其他浏览器的前缀了。
sass编译后,再用autofixer处理下,不用你自己写个sass的混入方法,多此一举了。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文