Sass-@if,@else if的用法

结合之前的Sass的混合-@mixin,@include,加入@if的相关语法

sass文件内容 common.scss


// 画三角形@mixin声明
@mixin sj($fx:top,$size:100px,$color:red){@if ($fx == top) {border-color: transparent transparent $color transparent;border-style: dashed dashed solid dashed;}@else if($fx == right){border-color: transparent transparent transparent $color;border-style: dashed dashed dashed solid;}@else if($fx == bottom){border-color: $color transparent transparent transparent;border-style: solid dashed dashed dashed;}@else if($fx == left){border-color: transparent $color transparent transparent;border-style: dashed solid dashed dashed;}width: 0px;height: 0px;overflow: hidden;border-width: $size;}//mixin的调用
.demo{@include sj(left);
}

sass编译后:

.demo {border-color: transparent red transparent transparent;border-style: dashed solid dashed dashed;width: 0px;height: 0px;overflow: hidden;border-width: 100px; }

新建测试页面 sass.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style/common.css" type="text/css">
</head>
<body><div class="demo"></div>
</body>
</html>

运行查看页面输出:

如图所示:页面输出为一个三角形,剪头朝左

通过sass的@if,@else if语法,根据传入参数,实现动态输出css样式

Sass-@if,@else if的用法相关推荐

sass基础操作记录
sass基础操作记录 sass是什么基本操作 1. 安装 2. 使用 3. 基本用法 3.1 变量 3.2 计算功能 3.3 嵌套 3.4 注释 4. 代码的重用 4.1 继承 4.2 Mixin ...
对比学习sass和stylus的常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
对比学习sass和stylus的常用功能 1
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
微信小程序圣诞帽_构建圣诞快乐Web应用程序界面
微信小程序圣诞帽今天,我们将构建" 圣诞快乐" Web应用程序界面 : Tomas Laurinavicius的早期教程中的Photoshop布局. 这将是一个分为两部分的教程. ...
【转】SASS用法指南
SASS用法指南阮一峰的,偏sass用法教程 sass入门偏实战的基础用法
CSS: SASS用法指南 (附视频)
观看视频: CSS: SASS用法指南学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,C ...
SASS用法指南(转)
学过CSS的人都知道,它不是一种编程语言. 你可以用它开发网页样式,但是没法用它编程.也就是说,CSS基本上是设计师的工具,不是程序员的工具.在程序员眼里,CSS是一件很麻烦的东西.它没有变量,也没有 ...
[Sass常见用法] Css代码的Sass打开方式
文章目录 Sass Sass是什么(英文全称:Syntactically Awesome Stylesheets) 为什么使用 Sass 数组混合器 sass安装及用法实例 sass的安装在开发软 ...
sass的继承，混合宏，占位符的用法总结
SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; }.block { @include mt(5px);span { display:block; @incl ...

Sass-@if,@else if的用法

Sass-@if,@else if的用法相关推荐

最新文章

热门文章