资讯专栏INFORMATION COLUMN

sass判断语句

kumfo / 994人阅读

摘要:判断可一个条件多带带使用,也可以和结合多条件使用三目判断语法为。三个参数分别表示条件,条件为真的值,条件为假的值。循环语法为其中表示变量,而和表示类型数据和类型数据。

@if判断

@if可一个条件多带带使用,也可以和@else结合多条件使用

scss.style

css.style


三目判断

语法为:if($condition, $if_true, $if_false) 。

三个参数分别表示:条件,条件为真的值,条件为假的值。

scss.style

css.style


for循环有两种形式,分别为:

1、@for $var from through

2、@for $var from to

$var表示变量,start表示起始值,end表示结束值,这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。

scss.style

css.style


@each循环

语法为:@each $var in

其中$var表示变量,而list和map表示list类型数据和map类型数据。

sass 3.3.0新加入了多字段循环和map数据循环。

关于循环判断详细分析请查阅:sass揭秘之@if,@for,@each

①、多个字段list数据循环

scss.style

css.style

②、单个字段list数据循环

 

scss.style

 

 

 

css.style

 

③、多个字段map数据循环

scss.style

 

css.style

 

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1796.html

相关文章

  • sass的基本使用

    摘要:本文所有的例子都是在中编译,而可以自行编译,具体可以查看该链接配置的概念定义是的一种预处理器,文件后缀名为,可以用中的来转成样式。 最近在项目中利用到了css预处理器(sass),而之前没接触过的本博主出于好奇心,就在业余的时间里搜了一些资料来看看,看完后觉得sass挺不错,就想简单的介绍一下sass的基本使用方法(ps:本文只介绍sass的一些基本使用,而这些内容都是本博主觉得比较有...

    alighters 评论0 收藏0
  • Sass

    摘要:同样的在下安装有多种方法。这样的文件,命名规范是以下划线开头的,这样的文件不会被编译成文件。这个特性现在正被众多开发者滥用。就是取值的一种特殊形式,符合特殊用法。函数名称参数列表数据处理继承允许一个选择器,继承另一个选择器。 sass介绍 • SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单且可维护。 • SASS的本...

    StonePanda 评论0 收藏0
  • Sass

    摘要:同样的在下安装有多种方法。这样的文件,命名规范是以下划线开头的,这样的文件不会被编译成文件。这个特性现在正被众多开发者滥用。就是取值的一种特殊形式,符合特殊用法。函数名称参数列表数据处理继承允许一个选择器,继承另一个选择器。 sass介绍 • SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单且可维护。 • SASS的本...

    pcChao 评论0 收藏0
  • Sass

    摘要:同样的在下安装有多种方法。这样的文件,命名规范是以下划线开头的,这样的文件不会被编译成文件。这个特性现在正被众多开发者滥用。就是取值的一种特殊形式,符合特殊用法。函数名称参数列表数据处理继承允许一个选择器,继承另一个选择器。 sass介绍 • SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单且可维护。 • SASS的本...

    alexnevsky 评论0 收藏0
  • 前端入门23-CSS预处理器(Less&Sass

    摘要:声明声明本篇内容梳理自以下几个来源网站的文档中文网感谢大佬们的分享。这个时候,预处理器就出现了,其实应该是说和这类语言出现了。声明 本篇内容梳理自以下几个来源: Github:smyhvae/web Bootstrap网站的 less 文档 Sass中文网 感谢大佬们的分享。 正文-CSS预处理(less&Sass) CSS预处理 什么是 CSS 预处理?为什么要有 CSS 预处理? 这...

    freecode 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<