本来打算整理jQuery Mobile来着，但是没有研究明白，所以接着上个周的继续介绍。。。
【scss中的基础语法】
1.scss中的变量
①声明变量：$变量名:变量值
$width:100px;
$position : left;
#div1{
width: $width;
height: $width;
background-color: red;
border-#{$position}: 10px solid yellow;
}
scss中，允许将变量嵌套在字符串中，但是变量必须使用井号包裹
2.scss中的运算，会将单位进行运算，使用时注意最终的单位是否正确，
3.scss中的嵌套:选择器嵌套、属性嵌套、伪类嵌套
①选择器嵌套ul{li{}}
嵌套默认后代选择器，如果需要子代选择器，则需加大于号
可以在选择器的大括号中使用and表示上一层的选择器。
②伪类嵌套 li{&:hover()}
在选择器{}中配合&使用伪类事件，可以表示当前选择器的
font:{
size: 16px;
weight:bold;
family:"微软雅黑";
style:"italic";
};
对于属性名有分割为多段的属性，可以使用属性嵌套，属性名的前半部分必须紧跟，才能用()包裹属性的后半部分。
4.混合宏、继承、占位符
①混合宏使用 @mixin 声明混合宏，在其他选择器中使用 @include调用混合宏、
声明时可以有参数可以无参数，参数可以有默认值也可以咩有默认值，但是调用时，必须符合声明时的要求，与less中的混合相同。
优点，可以传参，不会产生同名的class
缺点，调用时会把混合宏中的所有代码copy到选择器中，产生大量冗余代码
例如
@mixin hunhe($color:green){
color: $color;
}
.class3{
@include hunhe;
background-color: yellow;
}
.class4{
@include hunhe;
background-color: blue;
}
②继承 声明一个普通的class，在其他选择器中使用@extend集成这个class
class1{} .class2(@extend.class1;)
优点，将相同的代码，提取到并集选择器，减少冗余代码
缺点，不能传入参数，生成多余的class
例如
.calss1{
color: wheat;
}
.class{
@extend .calss1;
}
③占位符使用%声明占位符，在其他选择器中使用@expend继承占位符；
优点，将相同的代码，提取到并集选择器，减少冗余代码
不会产产生一个多余的class
缺点不能传参
例如
%class1{
color: wheat;
}
.class4{
@extend .calss1;
background-color: yellow;
}
.class5{
@extend .calss1;
background-color: green;
}
5.if条件结构
条件结构的大括号要写在选择器里面，条件结构的大括号直接包裹样式属性
@if条件{}
@else{}
例如
.class6{
width: 100px;
height: 100px;
@if >{
background-color: yellow;
}
@else{
background-color: blue;
}
}
$i : ;
@while $i<{
.while-#{$i}{
border: #{$i}px soild red;
}
$i : $i + ;
}
//
@for $i from through {
.item-#{$i} { width: 2em * $i; }
}
6.for循环
@for $i from 1 to 10{}//不包含10
@for $i from 1 through10{}//包含10
例如
@for $i from through {
.item-#{$i} { width: 2em * $i; }
}
7.@while循环
$i : 0
@while $i<10{
$i : $i + 1;
}
.class6{
width: 100px;
height: 100px;
@if >{
background-color: yellow;
}
@else{
background-color: blue;
}
}
$i : ;
@while $i<{
.while-#{$i}{
border: #{$i}px soild red;
}
$i : $i + ;
}
//
@for $i from through {
.item-#{$i} { width: 2em * $i; }
}
8.@each循环遍历
@each $item in a,b,c,d{
//$item表示a,b,c,d每一项
}
@each $item in c1,c2,c3,c4{
$i : $i + ;
.#{$item}{
border: #{$i}px soild red;
}
}
@function func($num){
@return $num*;
}
.functest{
width: func(10px);
}
本人不是技术大神，写不出多么多么复杂的代码，但我会努力的！谢谢大家抽时间来看，希望对新手有所帮助~