less以及SCSS基础语法
less
1、注释: //这种注释不能够编译到CSS 文件中
/*这种注释 能够编译到CSS 文件中*/
2、less 的基础语法
(1)、声明变量: @变量名 : 变量值
使用变量: @变量名
>>>变量使用的基本原则:
多次频繁出现的值,后期需要统一修改的值,牵扯到数值运算的值,推荐使用变量
>>>less 中的变量类型
①数值类: 不带单位的 123, 带单位的 1px
②字符串类型: 不带引号的 red #FF0000 带引号的"hahhaha"
③颜色类: red #FF0000 rgb(255,255,0)
④值列表连类型:多个值用逗号或空格分隔, 10px solid red
(2)、混合(Mixins)
①无参混合
声明: .class{}
调用: 在选择器中,使用 .class; 直接调用
②有参无默认值混合
声明: .class(@param){}
调用: .class(paramValue);
③有参有默认值混合
声明: .class(@param:默认值){}
调用: .class(paramValue); 或 .class();
>>>如果声明时,没有给参数赋默认值,则调用时必须赋值,否则报错
>>>无参混合,实际上就是一个普通的class选择器,会被编译到css文件中;
而有参混合,在编译时,不会出现在css文件中
(3)、less 中的匹配默认
①声明
@pipei(条件1,参数){} @pipei(条件2,参数){} @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
二、Sass
1、注释
// 注释一: 编译时不会被编译到 css文件中
/* 注释二: 在非compressed压缩模式下,会被编译到css文件中 */
/*! 注释三: 重要注释 ——— 各种压缩模式下,都会被编译到css文件中 */
2、 SCSS基础语法
(1)、SCSS中的变量
① 声明变量: $变量名:变量值;
SCSS中,允许将变量嵌套在字符串中,但是变量必须使用 井{} 包裹
eg: border-井{$position}: 10px solid yellow;
(2)、 SCSS 中的运算,会带单位进行运算,使用时需注意最终的单位是否正确
eg: height: $width/10; height: $width*10;
(3)、 SCSS 中的嵌套: 选择器嵌套 属性嵌套 伪类嵌套
①选择器嵌套 ul{ li{} }
嵌套默认使用后代选择器,若需要子代选择器,可以在选择器前加 >
可以在选择器的 {} 中,使用 &表示上一层的选择器
②伪类嵌套: li{ &:hover{} }
在选择器的 {} 中,使用 & 配合伪类事件,可以表示当前选择器的伪类
③属性嵌套: font:{
size: 16px;
weight: bold;
family: "微软雅黑";
style: "italic";
};
对于属性名有 - 分割为多段的属性,可以使用属性嵌套; 属性名的前半部分必须紧跟 :{}, 才能用{}包裹属性的后半部分
(4)、混合宏、继承、占位符
①混合宏:使用 @mixin 声明混合宏,在其他选择器中使用 @include 调用混合宏
@mixin hunhe .class{ @include hunhe; }
@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,b,c,d{ //$item 表示 a,b,c,d 的每一项}