Scss 基本使用 ( @extend @mixin@import@if@for@while@each )
Posted 明天也要努力
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Scss 基本使用 ( @extend @mixin@import@if@for@while@each )相关的知识,希望对你有一定的参考价值。
传送门:Scss 基本使用(变量、嵌套)
传送门:Sass中文网
传送门:Sass 教程 | 菜鸟教程
1. 继承( @extend )
@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。
如果一个样式与另外一个样式几乎相同,只有少量的区别,则使用 @extend 就显得很有用。
<style lang="scss">
.contanier1
font-size: 24px;
font-weight: bold;
color: green;
.contanier2
@extend .contanier1;
color: red;
.contanier3
@extend .contanier1;
font-size: 30px;
</style>
将以上代码转换为 CSS 代码,如下所示:
<style lang="scss">
.contanier1, .contanier2, .contanier3
font-size: 24px;
font-weight: bold;
color: green;
.contanier2
color: red;
.contanier3
font-size: 30px;
</style>
使用 @extend 后,在 html 标签中就不需要指定多个类 class=“contanier1 contanier2” ,只需要设置 class=“contanier2” 类就可以了。
占位符 % placeholder
它可取代以前 CSS 中的基类造成的代码冗余的情形。
因为 %placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。
来看一个演示:
%fz20
font-size: 20px;
%red
color: red;
这段代码没有被 @extend 调用,他并没有产生任何代码块,只是静静的躺在你的某个 SCSS 文件中。
只有通过 @extend 调用才会产生代码:
<div class="wrap">
<div class="contanier1">
<span class="content">contanier1</span>
</div>
</div>
<style lang="scss">
%fz20
font-size: 20px;
%red
color: red;
.wrap
@extend %fz20;
@extend %red;
.contanier1
@extend %fz20;
.content
@extend %red;
</style>
编译出来的 CSS
.wrap, .contanier1
font-size: 20px;
.wrap, .contanier1 .content
color: red;
从编译出来的 CSS 代码可以看出,通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果,也让你的代码变得更为干净。
2. 混入( @mixin )
混入( mixin )通过 @mixin 指令来定义。
语法: @mixin name property: value; property: value; …
定义 “basis-text” 的混入
@mixin basis-text
font-size: 24px;
font-weight: bold;
color: green;
注意: Scss 的连接符号 - 与下划线符号 _ 是相同的,也就是 @mixin basis-text 与 @mixin basis-text 是一样的混入。
使用 @include 命令,调用这个 mixin
语法: selector @include mixin-name;
调用 “basis-text” 的混入
<style lang="scss">
@mixin basis-text
font-size: 24px;
font-weight: bold;
color: green;
.contanier1
@include basis-text;
</style>
以上代码转换为 CSS 代码,如下所示:
.contanier1
font-size: 24px;
font-weight: bold;
color: green;
混入中也可以包含混入,如下所示:
@mixin contanier1
@include basis-text;
@include link;
@include special-border;
向混入传递变量
定义可接收参数的混入:
<style lang="scss">
@mixin basis-text($width,$color)
font-size: 20px;
color: green;
border: $width solid $color;
.contanier1
@include basis-text(2px,red);
.contanier2
@include basis-text(5px,blue);
</style>
以上实例的混入参数为设置边框的属性 (color 和 width) 。
将以上代码转换为 CSS 代码,如下所示:
.contanier1
font-size: 20px;
color: green;
border: 2px solid red;
.contanier2
font-size: 20px;
color: green;
border: 5px solid blue;
混入的参数也可定义默认值,语法格式如下:
<style lang="scss">
@mixin basis-text($width:2px,$color:red)
font-size: 20px;
color: green;
border: $width solid $color;
.contanier1
@include basis-text;
</style>
在包含混入时,只需要传递需要的变量名及其值:
<style lang="scss">
@mixin basis-text($width,$color)
font-size: 20px;
border:
color: $color;
width: $width;
style: dashed;
.contanier1
@include basis-text(2px,blue);
</style>
将以上代码转换为 CSS 代码,如下所示:
.contanier1
font-size: 20px;
border-color: blue;
border-width: 2px;
border-style:dashed;
可变参数
有时,不能确定一个混入(mixin)或者一个函数(function)使用多少个参数,这时就可使用 … 来设置可变参数。
如:创建盒子阴影(box-shadow)的一个混入(mixin)可采取任何数量的 box-shadow 作为参数。
@mixin box-shadow($shadows...)
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
.shadows
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
浏览器前缀使用混入
<style lang="scss">
@mixin transform($property)
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
.contanier1
@include transform(rotate(20deg));
</style>
以上代码转换为 CSS 代码,如下所示:
.contanier1
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
3. 导入文件( @import )
类似 CSS,Scss 支持 @import 指令。@import 指令可以让我们导入其他文件等内容。
CSS @import 指令在每次调用时,都会创建一个额外的 HTTP 请求。但 Sass @import 指令将文件包含在 CSS 中,不需要额外的 HTTP 请求。
Scss @import 指令语法如下:
@import filename;
注意: 包含文件时不需要指定文件后缀,Scss 会自动添加后缀 .scss。此外,也可以导入 CSS 文件。
导入后就可在主文件中使用导入文件等变量。
以下实例,导入 variables.scss、colors.scss 和 reset.scss 文件。
@import "variables";
@import "colors";
@import "reset";
创建一个 reset.scss 文件:
html,
body,
ul,
ol
margin: 0;
padding: 0;
然后在 standard.scss 文件中使用 @import 指令导入 reset.scss 文件:
@import "reset";
body
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
以上代码转换为 CSS 代码,如下所示:
html, body, ul, ol
margin: 0;
padding: 0;
body
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
Scss Partials
如果不希望将一个 Scss 的代码文件编译到一个 CSS 文件,可在文件名的开头添加一个下划线。
这将告诉 Scss 不要将其编译到 CSS 文件。但是,在导入语句中不需要添加下划线。
Scss Partials 语法格式:
_filename;
以下创建一个 _colors.scss 的文件,但是不会编译成 _colors.css 文件:
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
如果要导入该文件,则不需要使用下划线:
@import "colors";
body
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
注意: 不要将带下划线与不带下划线的同名文件放置在同一个目录下。如:_colors.scss 和 colors.scss 不能同时存在于同一个目录下,否则带下划线的文件将会被忽略。
4. 控制指令
4.1 条件语句( @if )
当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 内的代码:
p
@if 1 + 1 == 2 border: 1px solid;
@if 5 < 3 border: 2px dotted;
@if null border: 3px double;
编译为
p
border: 1px solid;
@if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。
如果 @if 声明失败,Sass 将逐条执行 @else if 声明,如果全部失败,最后执行 @else 声明。例如:
@mixin txt($weight)
color: white;
@if $weight == bold
font-weight: bold;
@else if $weight == light
font-weight: 100;
@else
font-weight: normal;
.txt1
@include txt(bold);
编译为
.txt1
color: white;
font-weight: bold;
4.2 循环语句
@for
@for 指令可在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。
包含两种格式:@for $var from <start> through <end>,或 @for $var from <start> to <end>;
区别: through 与 to 的含义:当使用 through 时,条件范围包含 <start> 与 <end> 的值,
而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。
另外,$var 可以是任何变量,如 $i;<start> 和 <end> 必须是整数值。
@for $i from 1 through 3
.item-#$i width: 2em * $i;
编译为
.item-1
width: 2em;
.item-2
width: 4em;
.item-3
width: 6em;
@while
@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环,只是很少会用到。
$i: 6;
@while $i > 0
.item-#$i width: 2em * $i;
$i: $i - 2;
编译为
.item-6
width: 12em;
.item-4
width: 8em;
.item-2
width: 4em;
@each
@each 指令的格式是 $var in <list>, $var 可以是任何变量名。如 $length 或 $name,而 <list> 是一连串的值,也就是值列表。
@each 将变量 $var 作用于值列表中的每一个项目,然后输出结果。
@each $animal in puma, sea-slug, egret, salamander
.#$animal-icon
background-image: url('/images/#$animal.png');
编译为
.puma-icon
background-image: url('/images/puma.png');
.sea-slug-icon
background-image: url('/images/sea-slug.png');
.egret-icon
background-image: url('/images/egret.png');
.salamander-icon
background-image: url('/images/salamander.png');
以上是关于Scss 基本使用 ( @extend @mixin@import@if@for@while@each )的主要内容,如果未能解决你的问题,请参考以下文章