文章内容

2020/7/20 14:39:43,作 者: 黄兵

scss用法总结

最近在Angular中使用到了scss,总体看起来scss比较简单,但是有可能长时间不使用,有一些用法可能忘记,所以在此做个标记:

首先是两篇参考文章:

1、SCSS 教程

2、Scss (Sass) 语法简介

这里主要用到了三个语法:

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用法总结

分享到:

发表评论

评论列表