javascript - sass里@if判断语法有什么用？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - sass里@if判断语法有什么用？

高洛峰 2017-04-11 11:59:09

[JavaScript讨论组]

444

嵌套循环我都觉得很有用，可是判断有什么用？
判断的使用场景在哪里？为什么会有判断这个语法，为了解决什么问题？

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

这是官网给个实例，这样不是很没有意义吗？

直接定义

p {
color: green;
}

不是更加直接吗？
浏览器里没有脚本可以控制sass的type，一切全在sass编译前的环境里运行，编译成css后就只能依靠javascript更改，那么为什么还要@if呢？

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(2)

迷茫2017-04-11 12:01:09 2楼

@小明说得很对，@if一般是配合@mixin使用的。
@mixin可以用来定义一个样式模板函数。
@if的话，可以在这个函数中作为条件判断。
然后，可以通过@include来调用@mixin。

例子的话，可以看这里。

补充：

上面的例子已经解释了@if的用法。另外@mixin也可以进行嵌套来减少重复代码。
例如上面的例子的每一个@if里的代码有所重复，可以另外建一个@mixin来处理@if里面的样式。类似这样：

@mixin layout ($color, $unit){
        color: $color;
        font-size: 20px + $unit * 5px;
        height: 20px + $unit * 10px;
        line-height: 20px + $unit * 10px;
        border-radius: $unit * 5px;
}

@mixin title($number, $deg: 90deg, $color1: #69b7eb, $color2: #b3dbd3, $color3: #f4d6db) {
    text-indent: 130px;
    width: 50%;
    background: linear-gradient($deg, $color1, $color2, $color3);
    @if $number == 1 {
        @include layout (#000, $number);
    } @else if $number == 2 {
        @include layout (#444, $number);
    } @else if $number == 3 {
        @include layout (#888, $number);
    } @else if $number == 4 {
        @include layout (#bbb, $number);
    }
}

赞 +0

添加回复

ringa_lee2017-04-11 12:01:09 1楼

看了一点文档，@if语法主要活跃在浏览器兼容上，可以少些很多js代码


$lte7:true !default;
//是否兼容ie6,7 
//inline-block 
//ie6-7 *display: inline;*zoom:1; 
@mixin inline-block {
    display: inline-block; 
    @if $lte7 { *display: inline;*zoom:1; } 
}

如果变量$lte7为真，就输出display: inline;zoom:1;

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>