我们在日常使用 Sass
的时候,大部分我们只需要用到属性嵌套就足以,但是这并不是 Sass
的灵魂所在。
比如说我们需要构建一套媒体查询的站点,此时页面上出现大量的 @media only screen and (min-width: 576px)
的代码,对于这样的代码是让人头疼的。
本文将介绍 Sass
中强大的指令,阅读完本文你将了解 Sass
中常见的指令,并且能够通过 Sass
指令去简化 @media only screen and (min-width: 576px)
代码的编写。
导入 scss
, 被导入的文件将合并编译在同一个 css
文件,同时也可以使用被导入的文件中所包含的变量和指令。
// styles/_mixins.scss
$red: red;
@import "./styles/mixins";
div {
color: $red;
}
当然有些时候我们不希望被导入 sass
编译成 css
,只需要在文件名前添加下划线,但是导入语句不需要添加下划线。
和 css @media
的用法一致,但是允许在其 scss
中进行嵌套,让 @media
变得更加方便。
.box {
color: red;
@media only screen and (min-width: 576px) {
color: yellow;
h1 {
border: 4px solid black;
}
}
@media only screen and (min-width: 768px) {
color: green;
}
@media only screen and (min-width: 992px) {
color: blue;
}
@media only screen and (min-width: 1200px) {
color: purple;
}
}
指定当前选择器继承指定的样式,一般应用于重复的样式,可以生成更少的代码。
<nav class="nav">
<div class="nav__container">
<span class="nav__item">1span>
<span class="nav__item--active">2span>
div>
nav>
.nav {
background-color: steelblue;
&__container {
display: flex;
justify-content: space-between;
}
&__item {
color: white;
&--active {
@extend .nav__item;
border-bottom: 1px solid red;
}
}
}
通过 @extend
执行,我们值增加一个 active
的类,我们可以很好的消除 css
的冗余。同时也清除了 nav_item
的标记。
@mixin
一般和 @include
搭配使用,@mixmin
定义样式,@include
引用样式。
但是 @mixin
会生成更多重复的的代码,但是通过 gzip
压缩后的代码会更小。
@mixin button {
font-size: 1em;
padding: 0.5em 1em;
text-decoration: none;
color: #fff;
}
.button-green {
background-color: green;
@include button;
}
在使用 @include
的时候,将额外的样式导入 @mixin
中,@content
中就是接收的部分。
@mixin button {
font-size: 1em;
padding: 0.5em 1em;
text-decoration: none;
color: #fff;
@content;
}
.button-green {
@include button {
background: green;
}
}
通过 @mixin
对 @media
媒体查询进行了简化,提高代码可读性和维护性。
$breakpoints: (
"xs": "only screen and ( min-width: 576px )",
"sm": "only screen and ( min-width: 768px )",
"md": "only screen and ( min-width: 992px )",
"lg": "only screen and ( min-width: 1200px )",
);
@mixin respond-to($breakpoint) {
// 获取 map 对应 key 的 value
$query: map-get($breakpoints, $breakpoint);
// 判断是否存在
@if not $query {
// @error 抛出异常
@error "No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.";
}
@media #{if(type-of($query) == 'string', unquote($query), inspect($query))} {
@content;
}
}
body {
background-color: red;
@include respond-to(sm) {
background-color: green;
}
@include respond-to(md) {
background-color: yellow;
}
@include respond-to(lg) {
background-color: purple;
}
}
@import
、@extend
与 @mixin
都可以模块化 css
代码。
@extend
编译后的体积比 @mixin
大,但是 gzip
后 @mixin
的体积更小。
@mixin
更加的灵活,可以传递参数,更加推荐使用。
感谢你的阅读~
如果你有任何的疑问欢迎您在后台私信,我们一同探讨学习!
如果觉得这篇文章对你有所帮助,点赞、在看是最大的支持!