Sass学习笔记 -- 初步了解函数、运算、条件判断及循环
函数
sass定义了很多函数可供使用,当然你也可以自己定义函数,以@fuction开始。sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比。
//scss
$baseFontSize: 10px !default;
$gray: #ccc !default; // pixels to rems
@function pxToRem($px) {@return $px / $baseFontSize * 1rem;
}body{font-size:$baseFontSize;color:lighten($gray,10%);
}
.test{font-size:pxToRem(16px);color:darken($gray,10%);
}//css
body {font-size: 10px;color: #e6e6e6;
}.test {font-size: 1.6rem;color: #b3b3b3;
}
运算
sass具有运算的特性,可以对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格,不然会出错。
//scss
$baseFontSize: 14px !default;
$baseLineHeight: 1.5 !default;
$baseGap: $baseFontSize * $baseLineHeight !default;
$halfBaseGap: $baseGap / 2 !default;
$samllFontSize: $baseFontSize - 2px !default;//grid
$_columns: 12 !default; // Total number of columns
$_column-width: 60px !default; // Width of a single column
$_gutter: 20px !default; // Width of the gutter
$_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width
条件判断及循环
@if判断
@if可一个条件单独使用,也可以和@else结合多条件使用
//scss
$lte7: true;
$type: monster;
.ib{display:inline-block;@if $lte7 {*display:inline;*zoom:1;}
}
p {@if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
}//css
.ib {display: inline-block;*display: inline;*zoom: 1;
}p {color: green;
}
三目判断
语法为:if($condition, $if_true, $if_false) 。三个参数分别表示:条件,条件为真的值,条件为假的值。
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
for循环
for循环有两种形式,分别为:@for $var from <start> through <end>和@for $var from <start> to <end>。
$i表示变量,start表示起始值,end表示结束值,
这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。
//scss
@for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}//css
.item-1 {width: 2em;
}.item-2 {width: 4em;
}.item-3 {width: 6em;
}
@each循环
语法为:@each $var in <list or map>
其中$var表示变量,而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。
单个字段list数据循环
//scss
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {.#{$animal}-icon {background-p_w_picpath: url('/p_w_picpaths/#{$animal}.png');}
}//css
.puma-icon {background-p_w_picpath: url("/p_w_picpaths/puma.png");
}.sea-slug-icon {background-p_w_picpath: url("/p_w_picpaths/sea-slug.png");
}.egret-icon {background-p_w_picpath: url("/p_w_picpaths/egret.png");
}.salamander-icon {background-p_w_picpath: url("/p_w_picpaths/salamander.png");
}
多个字段list数据循环
//scss
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {.#{$animal}-icon {background-p_w_picpath: url('/p_w_picpaths/#{$animal}.png');border: 2px solid $color;cursor: $cursor;}
}//css
.puma-icon {background-p_w_picpath: url("/p_w_picpaths/puma.png");border: 2px solid black;cursor: default;
}.sea-slug-icon {background-p_w_picpath: url("/p_w_picpaths/sea-slug.png");border: 2px solid blue;cursor: pointer;
}.egret-icon {background-p_w_picpath: url("/p_w_picpaths/egret.png");border: 2px solid white;cursor: move;
}
多个字段map数据循环
//scss
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {#{$header} {font-size: $size;}
}//css
h1 {font-size: 2em;
}h2 {font-size: 1.5em;
}h3 {font-size: 1.2em;
}
后续详情学习,可参照大漠老师的博客
http://www.w3cplus.com/sassguide/syntax.html
转载于:https://blog.51cto.com/dapengtalk/1871533
Sass学习笔记 -- 初步了解函数、运算、条件判断及循环相关推荐
- c语言基础学习笔记(三):条件判断语句if-else嵌套和switch-case语句
文章目录 if判断(条件判断) if语句 优先级 else语句 超市找零代码示例 两数比大小程序示例 if语句没有大括号 计算薪水程序示例 判断成绩及格示例 if-else嵌套 三个数比大小 级联的i ...
- C#学习笔记(二)运算符 乘方 判断语句 循环语句 比较运算符 逻辑运算符 数组...
第七节 %求余 ^乘方 第八节 运算符的简化 自增 自减 x++ ++x 放空- 第九节 乘方 ^符号的错误 没有\这个符号 第十节 判断语句 if else 语句 if(){} else if(){ ...
- boundcolumn 根据值进行判断_Excel使用函数进行条件判断的方法步骤
Excel中的函数具体该如何进行判断数据的条件是否达到要求呢?下面是学习关于excel使用函数进行条件判断的教程,希望阅读过后对你有所启发! excel使用函数进行条件判断的教程 函数条件判断步骤1: ...
- c++学习笔记内联函数,函数重载,默认参数
c++学习笔记内联函数,函数重载,默认参数 1 inline内联函数 C++中的const常量可以替代宏常数定义,如: const int A = 3; #define A 3 C++中是否有解决 ...
- jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...
- 笔记整理1----Java语言基础(一)01 变量与数据类型+02 运算符与表达式+03 条件判断与循环语句+04 JAVA数组+05 函数与方法
01 变量与数据类型+02 运算符与表达式+03 条件判断与循环语句+04 JAVA数组+05 函数与方法 第01天 java基础知识 今日内容介绍 Java概述.helloworld案例 工 ...
- 抽象代数学习笔记(5) 运算
抽象代数学习笔记(5)运算 "运算"这个名词大家从小学就应该接触了,比如"四则运算"等等.不过在那个时候,运算一直是一个很模糊的概念,究竟什么是运算?我们接触的 ...
- c语言中void arrout,c语言学习笔记(数组、函数
<c语言学习笔记(数组.函数>由会员分享,可在线阅读,更多相关<c语言学习笔记(数组.函数(53页珍藏版)>请在人人文库网上搜索. 1.数组2010-3-29 22:40一维数 ...
- IOS学习笔记07---C语言函数-scanf函数
2013/8/7 IOS学习笔记07---C语言函数-scanf函数 ------------------------------ qq交流群:创梦技术交流群:251572072 ...
最新文章
- 一文探讨堆外内存的监控与回收
- 3、顺序表、内存、类型、python中的list
- python 类属性和对象属性--定义和作用域
- json文件读取并转换成为字典python
- Android之PowerManager简介
- Java中的Redis的思维导图_Redis思维导图
- Qt创建任务栏进度条
- 【编程练习】复习一下树的遍历
- 华为HMS核心服务全面开放 赋能开发者共筑智慧新生态
- 工具 | Axure基础操作 No.6
- 深度解析服务器需要虚拟化的两大条件
- unicode转gbk python_使用python实现GBK转unicode码查询表
- delphi 发送html邮件,Delphi下html编辑器,像foxmail或者Outlook的邮件编辑器一样 能够保存为单一文件如 mht,eml (200分)...
- python怎么计算复利_用python计算复利和年化收益率
- mariadb mysql.sock_数据库缺少mysql.sock文件的解决办法
- 高三学生早恋怎么处理?家长该怎么做?
- Gnuplot特殊字符之Symbol字体
- 两个整数之间的所有素数,素数个数,素数和
- [运动规划算法]Fast-tracker分析
- Selenium在Firefox浏览器中UI自动化测试环境搭建
热门文章
- trigger error php,php trigger_error函数怎么用
- 用一个实际例子理解Docker volume工作原理
- 取代现有电商和实体店菜市场的新模式
- [HNOI2008]玩具装箱toy
- 查看系统各个进程打开的文件描述符数量
- php 注册登录,邮件确认激活
- SSDT – Error SQL70001 This statement is not recognized in this context-摘自网络
- Oracle the network adapter could not establish the connection
- Linux下如何使用虚拟用户增加FTP的安全性
- 使用Response.ContentType 来控制下载文件的类型