关键词：
函数
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-image: url(‘/images/#{$animal}.png‘);
}
}
//css
.puma-icon {
background-image: url("/images/puma.png");
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
}
.egret-icon {
background-image: url("/images/egret.png");
}
.salamander-icon {
background-image: url("/images/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-image: url(‘/images/#{$animal}.png‘);
border: 2px solid $color;
cursor: $cursor;
}
}
//css
.puma-icon {
background-image: url("/images/puma.png");
border: 2px solid black;
cursor: default;
}
.sea-slug-icon {
background-image: url("/images/sea-slug.png");
border: 2px solid blue;
cursor: pointer;
}
.egret-icon {
background-image: url("/images/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
javascript学习笔记
JavaScript学习笔记1.介绍2.基础语法输入输出变量数据类型简单数据类型复杂数据类型类型转换3.运算算术运算符递增递减运算符比较运算符逻辑运算符赋值运算符运算符优先级4.流程控制分支结构if语句三元表达式switch语句循环结... 查看详情
reactjs学习笔记-条件判断的几种形式
梦想不是挂在嘴边炫耀的空气。在React中，一个组件的HTML标签与生成这些标签的代码内在地紧密联系在一起。这意味着你可以轻松的利用javascript强大的魔力，比如循环和条件判断等。想要在组件中添加条件判断，似... 查看详情
while循环,格式化输出及运算符
1.循环while条件:代码块(循环体)else:当上面的条件为假.才会执行执行顺序:判断条件是否为真.如果真.执行循环体.然后再次判断条件....直到循环条件为假.程序退出死循环count=1whilecount<=5:print("喷死你..")count=1whilecount<101:print(count... 查看详情
第五次作业
本次课学习到的知识点：循环初始化 循环变量修改 循环条件 循环体do-while语句是在循环前先判断条件，条件满足进入循环 实验过程中遇到的问题及解决方法：每次完成作业都要依靠教科书 实验心得体会及本... 查看详情
python学习之旅--判断循环(代码片段)
1,判断语句目的:知道判断语句的作用作用:1,根据条件选择性的执行某段代码2,条件是一个boolean类型的表达式,或者取值(True,False)2,运算符目的:知道运算符的种类,特点种类:1,关系运算符,判断变量于常量之间的关系,取值是True或者Fals... 查看详情
sass学习笔记
一、Sass的控制命令二、Sass的函数功能 sass中除了可以定义变量，还自备了一系列函数功能，主要包括：字符串函数、数字函数、列表函数、颜色函数、Instrospection函数、三元函数等。当然，sass中也有自定义函数。 其中，... 查看详情
sass学习笔记
零、概览1、变量：$width2、嵌套：增加结构性及可读性3、混合mixin：copy的代码复用4、扩展／继承：@extend 联合声明代码复用5、流程控制：@if@each@for@while6、常用数组操作7、常用map操作8、函数： sassfunction手册9、导入：@impo... 查看详情
函数响应式编程及reactiveobjc学习笔记
之前我们初步认识了RAC的设计思路跟实现方式,现在我们再来看看如果使用它以及它能帮我们做什么OneofthemajoradvantagesofRACisthatitprovidesasingle,unifiedapproachtodealingwithasynchronousbehaviors,includingdelegatemethods,callbackblocks,target 查看详情
运算符及while初识
今天对while语句进行了了解while循环while循环是一种比较简单的循环，主要有两种形式不设循环次数的死循环：一般用于歌单的循环播放等没有次数限制的地方设置次数的有限次循环：一般用于对数据的删选，累加等操作语句格式... 查看详情
学习java的杂乱笔记
1.局部变量：定义在方法中的变量，定义在方法中的参数的变量，定义在for循环中变量，都是局部变量，在栈内存中开辟一个空间，数据使用完毕，自动释放。2.何定义一个函数？（不需要死记，只需了解） 1.既然函数是一个独... 查看详情
java学习笔记2(datawhale教程):运算符和表达式流程控制数组(代码片段)
java学习笔记2(datawhale教程):运算符和表达式、流程控制、数组文章目录java学习笔记2(datawhale教程):运算符和表达式、流程控制、数组一.运算符和表达式1.数学函数与常量2.结合赋值和运算符3.自增与自减运算符4.关系和Boolean运算符5... 查看详情
sass学习笔记--变量及变量作用域历史遗留问题
sass有两种后缀名文件：一种后缀名为sass，写选择器时不能使用大括号和分号一种后缀名为scss，使用大括号和分号//后缀名为sass的语法，不能出现大括号和分号$highlight-color: #abcdef.selected border: 1px $highlight-color&... 查看详情
python100天学习笔记day24js基本语法(代码片段)
JavaScript基本语法语句和注释变量和数据类型声明和赋值简单数据类型和复杂数据类型变量的命名规则表达式和运算符赋值运算符算术运算符比较运算符逻辑运算符分支结构if...else...switch...cas...default...循环结构for循环while循环do...... 查看详情
docker了解及初步学习(代码片段)
...变得比较麻烦，后来技术经理想到了使用Docker，现在也来学习如何快捷的部署自己的项目。 刚开始学习当然是先安装了，这里使用的macOS，安装和其他的软件没有什么 查看详情
java基础学习笔记(基本规范变量定义运算符分支/循环结构函数)(代码片段)
文章目录Java概述与环境搭建Java历史Java语言特点Java执行机制安装jdk环境变量配置乱码问题解决基本规范简单Java代码编译运行注释语法规则变量类型声明方式基本数据类型问题：数据类型不兼容赋值案例字符型常量转义字符... 查看详情
java笔记学习
java笔记一、认识java语言1、Java平台-Java语言特性2、DOS命令指示符使用3、Java集成开发环境4、Java程序结构组成-类5、Java程序结构组成-方法6、Java程序结构组成-语句7、Java程序结构组成-注释8、命名规范二、运算符与表达式1、算术... 查看详情
java笔记学习
java笔记一、认识java语言1、Java平台-Java语言特性2、DOS命令指示符使用3、Java集成开发环境4、Java程序结构组成-类5、Java程序结构组成-方法6、Java程序结构组成-语句7、Java程序结构组成-注释8、命名规范二、运算符与表达式1、算术... 查看详情
学习笔记11循环语句—while
一、while循环【语法】while<条件表达式>： 条件满足时会执行的代码 ……当条件表达式为真的时候，执行循环内部的代码；直到条件表达式为假的时候，才继续执行该循环后面的代码。【示例... 查看详情