css3

css3

使用css3 grid 重构media 组件

CSS/SASS/SCSS/LESSlopo1983 发表了文章 • 0 个评论 • 1800 次浏览 • 2018-03-08 00:21 • 来自相关话题

请着重看less部分代码
html<template lang="pug">
section(:class="`${type}`")
.object
slot(name="object")
.content
slot(name="body")
.footer
slot(name="footer")
</template>js<script>
export default {
name: "gridMedia",
props: {
type: {
type: String,
default: "media"
}
}
};
</script>less<style lang="less" scoped>
@import (reference) "../../assets/lib/css.less";
.media {
display: grid;
grid-template-rows: repeat(2, auto);
grid-template-columns: 25% calc(~"75% - 1.25rem");
grid-auto-rows: auto;
grid-template-areas: "object content" "object footer";
grid-gap: 0 1.25rem;
.pd(1.25rem);
.object {
grid-area: object;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
align-self: flex-end;
}
&.right {
grid-template-columns: calc(~"75% - 1.25rem") 25%;
grid-template-areas: "content object" "footer object";
}
&.thumbnail {
grid-template-rows: repeat(3, auto);
grid-template-columns: auto;
grid-template-areas: "object" "content" "footer";
grid-gap: 1.25rem;
}
}
</style>最终效果截图





? 查看全部

请着重看less部分代码


html
<template lang="pug">
section(:class="`${type}`")
.object
slot(name="object")
.content
slot(name="body")
.footer
slot(name="footer")
</template>
js
<script>
export default {
name: "gridMedia",
props: {
type: {
type: String,
default: "media"
}
}
};
</script>
less
<style lang="less" scoped>
@import (reference) "../../assets/lib/css.less";
.media {
display: grid;
grid-template-rows: repeat(2, auto);
grid-template-columns: 25% calc(~"75% - 1.25rem");
grid-auto-rows: auto;
grid-template-areas: "object content" "object footer";
grid-gap: 0 1.25rem;
.pd(1.25rem);
.object {
grid-area: object;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
align-self: flex-end;
}
&.right {
grid-template-columns: calc(~"75% - 1.25rem") 25%;
grid-template-areas: "content object" "footer object";
}
&.thumbnail {
grid-template-rows: repeat(3, auto);
grid-template-columns: auto;
grid-template-areas: "object" "content" "footer";
grid-gap: 1.25rem;
}
}
</style>
最终效果截图

QQ图片20180308001833.png

?

使用css3 grid 重构media 组件

CSS/SASS/SCSS/LESSlopo1983 发表了文章 • 0 个评论 • 1800 次浏览 • 2018-03-08 00:21 • 来自相关话题

请着重看less部分代码
html<template lang="pug">
section(:class="`${type}`")
.object
slot(name="object")
.content
slot(name="body")
.footer
slot(name="footer")
</template>js<script>
export default {
name: "gridMedia",
props: {
type: {
type: String,
default: "media"
}
}
};
</script>less<style lang="less" scoped>
@import (reference) "../../assets/lib/css.less";
.media {
display: grid;
grid-template-rows: repeat(2, auto);
grid-template-columns: 25% calc(~"75% - 1.25rem");
grid-auto-rows: auto;
grid-template-areas: "object content" "object footer";
grid-gap: 0 1.25rem;
.pd(1.25rem);
.object {
grid-area: object;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
align-self: flex-end;
}
&.right {
grid-template-columns: calc(~"75% - 1.25rem") 25%;
grid-template-areas: "content object" "footer object";
}
&.thumbnail {
grid-template-rows: repeat(3, auto);
grid-template-columns: auto;
grid-template-areas: "object" "content" "footer";
grid-gap: 1.25rem;
}
}
</style>最终效果截图





? 查看全部

请着重看less部分代码


html
<template lang="pug">
section(:class="`${type}`")
.object
slot(name="object")
.content
slot(name="body")
.footer
slot(name="footer")
</template>
js
<script>
export default {
name: "gridMedia",
props: {
type: {
type: String,
default: "media"
}
}
};
</script>
less
<style lang="less" scoped>
@import (reference) "../../assets/lib/css.less";
.media {
display: grid;
grid-template-rows: repeat(2, auto);
grid-template-columns: 25% calc(~"75% - 1.25rem");
grid-auto-rows: auto;
grid-template-areas: "object content" "object footer";
grid-gap: 0 1.25rem;
.pd(1.25rem);
.object {
grid-area: object;
}
.content {
grid-area: content;
}
.footer {
grid-area: footer;
align-self: flex-end;
}
&.right {
grid-template-columns: calc(~"75% - 1.25rem") 25%;
grid-template-areas: "content object" "footer object";
}
&.thumbnail {
grid-template-rows: repeat(3, auto);
grid-template-columns: auto;
grid-template-areas: "object" "content" "footer";
grid-gap: 1.25rem;
}
}
</style>
最终效果截图

QQ图片20180308001833.png

?