文章内容
2020/7/20 14:39:43,作 者: 黄兵
scss用法总结
最近在Angular中使用到了scss,总体看起来scss比较简单,但是有可能长时间不使用,有一些用法可能忘记,所以在此做个标记:
首先是两篇参考文章:
1、SCSS 教程
这里主要用到了三个语法:
1、混合:
@mixin flex-direction($column) {
-webkit-flex-direction: $column;
-moz-flex-direction: $column;
-ms-flex-direction: $column;
flex-direction: $column;
}
2、继承:
%display {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
}
3、嵌套:
.home-page-content-container {
@include flex-direction(column);
@extend %display;
font-family: 'Roboto', 'Heebo', Arial, sans-serif;
margin: 0 auto;
max-width: 1248px;
padding: 0 16px;
position: relative;
top: calc(-104px);
z-index: 1;
.homepage-adsense-container {
@include flex-direction(column);
@extend %display;
padding-top: 24px;
}
大部分使用的是这三种方式,其他的只等以后深入继续研究。
黄兵个人博客原创。
转载请注明出处:黄兵个人博客 - scss用法总结
评论列表