分支结构

在sass里,可以使用@if让我们根据一些条件来应用特定的样式

结构:

@if 条件 {

}

如果条件为真的话,括号里的代码就会释放出来

例如:

$use-refixes:true;
.rounded{
@if $use-refixes {
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
}
border-radius:5px;
}

--->

.rounded {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}

如果是另外一种情况

$use-refixes:false;

---》

.rounded {
border-radius: 5px;
}

if else在sass里的写法是:

body{
@if $theme == dark {
background:black;
} @else if $theme == light {
background:white;
} @else {
background:gray;
}
}

for循环

在sass里的for循环是这样的

@for $var form <开始值> through <结束值> {
...
}

还有一种是

@for $var form <开始值> to <结束值> {
...
}

注意,开始值和结束值的关系可以是升序也可以是倒序,但是每次只能+1或者-1

这两种有什么区别呢?

区别就是 from 1 to 4 的话是执行三次,i的变化是 1 2 3

from 1 through 4 的话是执行四次,i的变化是 1 2 3 4

如:

from to

$columns:4;
@for $i from 1 to $columns{
.col-#{$i}{
width:100% / $columns * $i;
}
}

---》

.col-1 {
width: 25%;
} .col-2 {
width: 50%;
} .col-3 {
width: 75%;
}

from through

$columns:4;
@for $i from 1 through $columns{
.col-#{$i}{
width:100% / $columns * $i;
}
}

--->

.col-1 {
width: 25%;
} .col-2 {
width: 50%;
} .col-3 {
width: 75%;
} .col-4 {
width: 100%;
}

each 遍历list类型

在sass里可以利用each方法来遍历咱们的list类型的数据

list类型在js里类似于数组,那么each类似于for in遍历,结构如下:

@each $item in $list{
...
}

例如:

$colors:success error warning;
$map:(success:green,warning:yellow,error:red);
@each $color in $colors{
.bg-#{$color}{
background:map-get($map,$color);
}
}

--->

.bg-success {
background: green;
} .bg-error {
background: red;
} .bg-warning {
background: yellow;
}

@while 循环

在sass里,拥有@while循环,比@for会更好用一些,@for循环只能从一个数到另一个数变化之间执行,每次变化都是1,while设置循环结构的话更为灵活;

结构:

@while 条件{

}

eq:

$i:6;

@while $i>0{
.item-#{$i}{
width:$i*5px;
}
$i:$i - 2;
}

注意:$i - 2 需要用空格隔开哟

---------》

.item-6 {
width: 30px;
} .item-4 {
width: 20px;
} .item-2 {
width: 10px;
}

自定义函数

在sass里也可以定义函数,并且也可以有返回值

结构:

@function 名称 (参数1,参数2){
@return ...
}

例如,我们做一个返回map里key对应的值的函数:

$colors:(light:#ffffff,dark:#000000,gray:#555555);

@function color($key){
@return map-get($colors,$key);
} body{
background:color(light);
color:color(dark);
border-color:color(gray);
}

---》

body {
background: #ffffff;
color: #000000;
border-color: #555555;
}

4.sass的分支结构、循环结构、函数的更多相关文章

  1. python分支和循环结构

    本文收录在Python从入门到精通系列文章系列 1. 分支结构 1.1 应用场景 迄今为止,我们写的Python代码都是一条一条语句顺序执行,这种代码结构通常称之为顺序结构.然而仅有顺序结构并不能解决 ...

  2. java里的分支语句--程序运行流程的分类(顺序结构,分支结构,循环结构)

    JAVA里面的程序运行流程分三大类: 1,顺序结构:顺序结构就是依次执行每一行代码 2,分支结构:分支结构就是按不同的条件进行分支 3,循环结构:一段代码依条件进行循环执行. 其中,分支结构有两大类: ...

  3. 刘强1109 JavaScript基础二(分支与循环结构)

    [if-else结构] 1.结构的写法: if(判断条件){ 条件为true时,执行if{} } else{ 条件为false时,执行else{} } 2.注意事项: ① else{}语句块,可以根据 ...

  4. day_4流程控制之分支结构循环结构及for循环

    复习一下昨天的内容 1:变量的命名规范 只能由数字 字母 及下划线组成 不能以数字开头 不能与系统关键字重名 _开头有特殊含义 __开头__结尾的变量是魔法变量 支持大小驼峰 ,但建议使用下划线连接语 ...

  5. java 基础 03 运算符 分支结构 循环结构

    今天内容: (1)运算符 (2)分支结构 (3)循环结构 1运算符 1.1赋值运算符 (1)简单赋值 = 表示赋值运算符,用于将=右边的数据赋值给=左边的变量来覆盖原来的数值. 笔试题: ia == ...

  6. shell分支与循环结构

    1. 条件选择 1.1 条件判断分支介绍 格式 if COMMANDS; then COMMANDS; [ elif COMMANDS; then COMMANDS; ]... [ else COMM ...

  7. python入门(三):分支、循环、函数

    1.分支 if循环格式:if condition_1: statement_block_1elif condition_2: statement_block_2else: statement_bloc ...

  8. Java基础之分支结构循环结构

    流程控制语句if(分支结构) 流程控制:流程就是指代码运行过程.控制就是说什么场景可以执行,什么场景不能执行. 1.if语句第一种形式 格式:if(表达式){      执行的语句:     } 2. ...

  9. 【Linux_Shell 脚本编程学习笔记三、分支与循环结构】

    if 语句是实际生产工作中最重要且最常用的语句,所以,必须掌握牢固 if 条件语法 1. 单分支机构 if  [ 条件 ] then 指令 fi 或 if  [  条件 ]; then 指令 fi   ...

  10. MySQL 分支和循环结构

    1.if else分支 mysql:用elseif               Oracle:用elsif 可以用select直接查看获取的值或者一个变量. create procedure pd_t ...

随机推荐

  1. thinkphp 使用插件异步上传图片或者文件

    使用tp做一些上传的功能,的确挺方便.但是在一些特殊情况下无法单独的使用tp的上传功能, 或者需要做一些比较酷炫的上传效果,这里就需要用到框架了. 我在这里使用的是uploadify上传插件. 首先需 ...

  2. OpenStack搭建遇到的问题

    前言:对于像我这种新手来说,搭建OpenStack真的很费劲,因为我总是每配置一个服务,我就想弄懂,后来搭建过程很累人,因此我想了个办法,等我搭建出来再学.我这里将记录我从开始之初到我学习,再到我毕业 ...

  3. Thinkphp拖拽上传文件-使用webuploader插件(自己改动了一些地方)——分片上传

    html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta  ...

  4. 数据库索引------B-Tree 索引和 Hash 索引的对比

    对于 B-tree 和 hash 数据结构的理解能够有助于预测不同存储引擎下使用不同索引的查询性能的差异,尤其是那些允许你选择 B-tree 或者 hash 索引的内存存储引擎. B-Tree 索引的 ...

  5. mysql复习秘籍

    mysql复习 一:复习前的准备 1:确认你已安装wamp 2:确认你已安装ecshop,并且ecshop的数据库名为shop 二 基础知识: 1.数据库的连接 mysql -u -p -h -u 用 ...

  6. UWP 重启App

    今天看见了阿迪王的博客,写到了重启App自身的代码,微软终于在16299加进来了 其实就加上一句话 await CoreApplication.RequestRestartAsync(string.E ...

  7. YiShop_如何选择B2C商城开发商

    说到B2C商城开发,现在网上搜索能搜出来一大堆开发公司的信息出来.面对如果巨大的信息用户应该如果去评估和判断哪家更适合自己呢!其实开发B2C商城不仅体现在一家开发公司本身的具体实力,还体现在对每一个商 ...

  8. Nginx的反向代理与负载均衡

    1.1 集群是什么 简单地说,集群就是指一组(若干个)相互独立的计算机,利用高速通信网络组成的一个较大的计算机服务系统,每个集群节点(即集群中的每台计算机)都是运行各自服务的独立服器.这些服务器之间可 ...

  9. 《算法》C/C++ 图形处理

    概述 一般图形输出无法就是用循环输出 ,提前构造好图形. 两种方式 ** 模拟法直接输出** ** 二维数组 构造输出** 问题描述 利用字母可以组成一些美丽的图形,下面给出了一个例子: ABCDEF ...

  10. oracle 10g下范围分区扫描的几种方式

    oracle 10g下有几种扫描方式,注意最后一种扫描方式,当对分区的列进行计算时,会不走分区.这跟对索引列进行计算会导致无法用索引一样. --扫描单个分区  PARTITION RANGE SING ...