목차
@if
@for
@each
@while
总结
웹 프론트엔드 HTML 튜토리얼 Sass的表达式和控制命令_html/css_WEB-ITnose

Sass的表达式和控制命令_html/css_WEB-ITnose

Jun 21, 2016 am 08:55 AM

如果你深入地使用过 Sass,那么一定会接触过 mixin。一个独立的 mixin 往往聚合了大量的控制指令来实现复杂的功能。

在本文中我们就将这些控制指令和表达式做一些讲解和实践。也许你在开发中不见得会用到它们,但是熟悉一下这些指令,可能会有意想不到的收获!

if()

if() 是 Sass 的一个内建函数,与之相似的 @if 则是一个内建指令。if() 用来做条件判断并返回特定值,示例如下:

@mixin test($condition) {    $color: if($condition, blue, red);    color:$color}.firstClass {    @include test(true);}.secondClass {    @include test(false);}
로그인 후 복사

编译结果:

.firstClass {    color: blue;}.secondClass {    color: red;}
로그인 후 복사

在上例中,if() 函数内的三个参数分别代表:测试条件,测试成功返回值,测试失败返回值(除了 false 和 null 之外的所有测试条件都被视为测试成功)。如果使用数字作为上述示例的条件,同样会返回测试成功的值:

.firstClass {    @include test(1);}
로그인 후 복사

@if

@if 后跟一个表达式,如果表达式的结果为 true,则返回特定的样式,示例如下:

@mixin txt($weight) {    color: white;    @if $weight == bold { font-weight: bold;}}.txt1 {    @include txt(none);}.txt2 {    @include txt(bold);}
로그인 후 복사

编译结果:

.txt1 {    color: white;}.txt2 {    color: white;    font-weight: bold;}
로그인 후 복사

此外,我们可以使用 @if ... @else if ... @else 结构来处理多个条件,示例如下:

@mixin txt($weight) {    color: white;    @if $weight == bold { font-weight: bold;}    @else if $weight == light { font-weight: 100;}    @else if $weight == heavy { font-weight: 900;}    @else { font-weight: normal;}}.txt1 {    @include txt(bold);}.txt2 {    @include txt(light);}.txt3 {    @include txt(heavy);}.txt4 { @include txt(none);}.txt5 {    @include txt(normal)}
로그인 후 복사

编译结果:

.txt1 {    color: white;    font-weight: bold;}.txt2 {    color: white;    font-weight: 100;}.txt3 {    color: white;    font-weight: 900;}.txt4 {    color: white;    font-weight: normal;}.txt5 {    color: white;    font-weight: normal;}
로그인 후 복사

这里的.txt4 和 .txt5 是用来向各位演示 @if 的解析机制。在 .txt1 中,如果不传入 bold,那么就不会生成 font-weight 相关的样式。

@for

@for 指令常用于循环输出。@for 有两种使用方式:from start through end 和 from start to end,两者的区别在于,前者遍历的范围是 [start, end], 而后者的遍历范围是 [start, end-1]。在 @for 循环中使用一个固定变量来替代遍历到的元素。如果你想实现从大到小的遍历,只需让 start 大于 end 即可。下面是 @for 的一个简单示例:

@for $i from 1 through 4 {    .col-#{$i} { width: 100/4 * $i + %;}}
로그인 후 복사

使用上面的这个例子,我们可以创建一套简单的栅格系统,编译结果如下:

.col-1 {  width: 25%;}.col-2 {  width: 50%;}.col-3 {  width: 75%;}.col-4 {  width: 100%;}
로그인 후 복사

从上面的示例中,我们综合了 Sass 的循环、变量、计算等多重功能。

@each

@each 指令同样可以用于循环输出,和 @for 的差别在于,@each 通过遍历 list 或者 map 实现循环输出:

@each $usr in bob, john, bill, mike {    .#{$usr}-avatar {        background-image: url('/img/#{$usr}.png');     }}
로그인 후 복사

@each 后面的 $usr 变量用于保存每次遍历到的元素,然后使用差值语法(#{var})来拼接正确的图片路径,编译结果如下:

.bob-avatar {    background-image: url("/img/bob.png");}.john-avatar {    background-image: url("/img/john.png");}.bill-avatar {    background-image: url("/img/bill.png");}.mike-avatar {    background-image: url("/img/mike.png");}
로그인 후 복사

如果遍历的对象是一个 map,那么我们就可以使用两个变量来存储元素的 key 和 value,示例如下:

$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );@each $key, $usr in $ppl  {    .#{$usr}-avatar {        background-image: url('/img/#{$usr}.png');    }}
로그인 후 복사

此外,针对多个列表的遍历,我们也可以使用多个参数来保存相应的元素:

$alt: alert, yellow, red;$sub: submit, white, green;$bck: back, blue, transparent;@each $type, $txt, $back in $alt,$sub,$bck {    .#{$type}-button {        color: $txt;        background-color: $back;    }}
로그인 후 복사

编译结果如下:

.alert-button {    color: yellow;    background-color: red;}.submit-button {    color: white;    background-color: green;}.back-button {    color: blue;    background-color: transparent;}
로그인 후 복사

@while

@while 指令也可以用于循环输出,它后面跟一个表达式,如果表达式结果为 false,则停止循环体。下面使用 @while 来重写上述的 @for 示例:

$x:1;@while $x < 13 {    .col-#{$x} { width: 100/12 * $x;}    $x: $x + 1;};
로그인 후 복사

在上面的示例中,我们用一个表达式来控制 @while 指令的执行,表达式中有一个变量 $x,该变量一方面用于插值计算,另一方面在循环体内执行累加,最终当 $x

总结

Sass 的诸多特性让前端开发变得无比轻松,虽然 Sass 中的指令很强大,但是如果不是构建一个大象框架,往往并不能感觉到其中的美妙。随着对 Sass 的了解越来越深入,总有一天你会用到这些指令的 ^_^。

译者:南北英文原文:Sass Basics: Control Directives and Expressions译文地址:http://www.w3cplus.com/preprocessor/sass-basics-control-directives-expressions.html

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

& lt; meter & gt의 목적은 무엇입니까? 요소?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

& lt; datalist & gt의 목적은 무엇입니까? 요소?

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

& lt; Progress & Gt의 목적은 무엇입니까? 요소?

See all articles