less
注释
//这种注释不能编译到CSS文件中 /* * 这种注释能编译到CSS文件中 */
[less的基础语法]
1、 声明变量： @变量名 ：变量值
使用变量： @变量名
>>> 变量使用的原则
多次频繁出现的值，后期需要统一修改的值，涉及到数值运算的值，推荐使用变量
>>> less中的变量类型
在CSS中出现的属性值，在less中都可以用作变量名
①数值类：包括不带单位的(比如说：123)，不带单位的(包括1px)
②字符串类型:带引号的(比如说 "哈哈哈")，不带引号的(red #ff0000)
③颜色类： red #ff0000 RGB(255,255,0)
④值列表类型: 多个值用逗号或空格分隔 (10px solid red)
2、混合(mixins)
①无参混合
声明: .class{}
调用:在选择器中，使用.class;直接使用
②有参无默认值混合
声明： .class(@param){}
调用: .class(paramValue); 或 .class();
③有参有默认值混合
声明： .class(@param:@color：10px){}；
调用： .class(paramValue); 或 .class();
>>>如果声明时，没有给参数赋默认值，则调用时必须赋值，否则报错
>>>无参混合，实际上就是一个普通的class选择器，会被编译到CSS文件中;
而有参混合，在编译时，不会出现在CSS文件中。
3、less中的匹配模式
①声明：
@pipei(){条件一，参数}{} @pipei(){条件二，参数}{} @pipei(){@_，参数}{}
②调用:
@pipei(条件的值，参数的值){}
③匹配规则：
根据调用时输入的条件值，去寻找与之匹配的混合执行。
@_表示不管匹配成功与否，都会执行的选项。
4、@arguments特殊变量：
在混合中，@arguments表示混合传入的所有参数。@arguments中的多个参数之间，用空格分隔。
.border(@width,@style,@color){ border: @arguments; //等同于 border: @width @style @color; }
5、less中的加减乘除运算
less中的所有变量和数值，可以进行加减乘除运算。
需要主要的是，当颜色值运算时，红绿蓝分三组运算。组内单独计算，组间互不干涉。
6、less中的嵌套
less允许css选择器按照HTML代码的结构进行嵌套。
section{ >p{} ul{ &:hover{} } }
①less中的嵌套，默认是后代选择器。如果需要子代选择，需要在前面加>
②&符号，表示这个&所在的上一层选择器。比如上述&，表示section ul：hover
示例
@color : #ff0000; @length: 100px; #div1{ @length; height: @length*2; background-color: @color; }
无参混合
.borderRadius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
无参无默认值混合
.borderRadius1(@radius){ border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; }
有参有默认值混合
.borderRadius2(@radius:50px){ border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; }
@color : #ff0000; @length: 100px; #div1{ @length; height: @length*2; background-color: @color; }
匹配模式
.pipei(lefts,@10px){ margin-left: @width; } .pipei(rights,@10px){ margin-right: @width; } .pipei(tops,@10px){ margin-top: @width; } .pipei(bottoms,@10px){ margin-bottom: @width; } .pipei(@_,@10px){ padding: 10px; } @poistion : lefts; .class1{ .pipei(@poistion,20px); }
@arguments
.argu(@width,@style,@color){ //border: @width @style @color; border: @arguments; } .class2{ .argu(10px,solid,red); }
less中的嵌套
#section{ 800px; height: 200px; background-color: #CCCCCC; p{ color: red; font-weight: bold; } ul{ padding: 0px; list-style: none; li{ float: left; 200px; height: 50px; background-color: yellow; text-align: center; cursor: pointer; &:hover{ background-color: green; } } // li:hover{ // background-color: blue; // } } }
scss
@charset "utf-8";
//↑使用scss文件编译时，必须声明字符集编码格式。
注释
//注释一:编译时，不会被编译到CSS文件中 /* * 注释二:在非compressed压缩模式下，会被编译到CSS文件中 */ /*！ * 注释三:重要注释。在各种压缩模式下，都会被编译到CSS文件中 */
[SCSS基础语法]
1、scss中的变量
①声明变量： $变量名:变量值;
SCSS中允许将变量嵌套在字符串中，但是变量必须使用井{}包裹
eg：
border-#{$left}:10px solid red;
2、scss中的运算，会将单位进行运算。使用时需注意最终的单位是否正确。
eg：
10px * 10px = 100px*px
3、scss中的嵌套：分为选择器嵌套 属性嵌套 伪类嵌套
①选择器嵌套
ul{ li{ } }
嵌套默认表示后代选择器，如果需要子代选择器，可以在选择器前加>
可以在选择器的{}中，使用&表示上一层的选择器。
②伪类嵌套：
li{ &：hover{ }}
在选择器的{}中，使用&配合伪类事件，可以表示当前选择器的伪类
③属性嵌套：
font:{size:18px;}
相当于 font-size：18px;
对于属性名有-分隔为多段的属性，可以使用属性嵌套。属性名的前半部分必须紧跟一个:，才能使用{}包裹属性的后半部分。
4、混合宏、继承、占位符:
①混合宏:使用@mixin声明混合宏，在其他选择器中使用@include调用混合宏
@mixin hunhe{} .class{ @include hehe;}
@mixin hunhe(@param){} .class{ @include hunhe(value);}
@mixin hunhe(@param:value){} .class{@include hunhe();}
>>>声明时，可以有参数，也可以没有参数。参数可以有默认值，也可以没有默认值。但是调用时，必须符合声明时的要求。与less中的混合相同。
>>>优点：①可以传参 ②不会产生同名的class
>>>缺点：调用时，会把混合宏中的所有代码copy到选择器中，产生大量的重复代码；
②继承:声明一个普通的class，在其他选择器中使用@extend继承这个class
.class1{} .class2{ @extend .class1;}
>>>优点:将相同代码，提取到并集选择器，减少冗余代码;
>>>缺点:①不能传参;②会生出一个多余的class
③占位符:使用%声明占位符，在其他选择器中使用@extend继承占位符；
%class1{} .class2{@extend %class1;}
>>>优点：①将相同的代码，提取到并集选择器，减少冗余代码；②不会产生一个多余的class
>>>缺点：不能传参
5、if条件结构：
条件结构需要写在选择器里面，条件结构的大括号直接包裹样式属性。
@if 条件{}
@else{}
6、@for循环：
@for $i from 1 to $10{} //不包含10
@for $i from 1 through 10{} //包含10
7、while循环；
$i:0;
@while $i<10{
$i=$i+1;
}
8、each 循环遍历
@each $item in a,c,c,d{
$item表示 a,c,c,d的每一项
}