CSS预处理语言,为CSS赋予动态语言的特征(用类似JS的语言去写CSS):增加了变量、Minin(混合)、嵌套、函数和运算等特性,使CSS更容易扩展和维护。
将Less和Sass转化成css的工具:考拉客户端: http://koala-app.com/index-zh.html
Less和Sass的区别
<script>
/*
1.SASS(Syntactically Awesome Stylesheets):
SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器, 诞生于2007年.
2.LESS(Leaner Style Sheets):
LESS是一套利用JavaScript实现的CSS预处理器, 诞生于2009年.
由于LESS的诞生比SASS要晚, 并且LESS受到了Sass的影响, 所以在LESS中能看到大量SASS中的特性.
3.LESS和SASS文件后缀名区别
LESS 以.less结尾
SASS 以.sass或者.scss结尾
两种不同结尾方式区别: .sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号
.scss以{}表示层级结构, 语句后面需要写分号
企业开发中推荐使用.scss结尾
注意点: 如果需要使用考拉编译sass文件, 项目目录结构中(包含文件名)不能出现中文和特殊字符
*/
</script>
1. Less的基本使用:
1.编写less文件–>引入less文件–>引入less.js–>运行
注意点:
一定要先引入less.css再引入less.js
如果less代码是写到单独的文件中, 一定要在服务端环境运行才能生效
<link rel="stylesheet/less" href="css/index.less">
<script src="js/less.js"></script>
2.提前预编译
编写less文件–>利用工具转换为css文件–>引入css文件(无需引入less.js, 无需在服务端运行)
将Less转成CSS的工具:
1.考拉客户端: http://koala-app.com/index-zh.html
2.开源中国 : https://tool.oschina.net/less
3.构建工具配置loader自动编译
2. 注释
单行注释不会被编译(不会出现在编译后的文件中)
多行注释会被编译 (会出现在编译后的文件中)
3. 变量和变量插值
3.1 Less:
- 属性的取值可以直接使用变量,属性和选择性不能直接使用变量,要使用变量插值
- Less中定义变量:@变量名:值
- Less中使用变量:@变量名
- 属性和选择器的名称使用变量插值:@{属性或选择器名}
- 将一个变量的值赋给另一个变量:@变量名:@变量名
- 全局变量:定义在{}外的是全局变量,在任何地方都可以使用
- 局部变量:定义在{}内的是局部变量,只能在该{}中使用
- Less中有延迟加载,即使变量定义在最后也能使用
- 只有在同一个作用域中的变量才会互相影响。
- 采用就近原则:如果在全局和{}中存在同名变量,在{}中使用{}中的变量
3.2 Sass:
Sass中定义变量: $变量名:变量值
Sass中变量的特点:
1.后定义的同名变量会覆盖先定义的同名变量
2.可以把某变量赋值给其他变量
3.区分全局变量和局部变量(就近原则)
4.不会延迟加载:不能先使用后定义
Sass中变量插值:#{$变量名称}
4. 运算
css3中calc函数能实现 + - * / 运算
margin-left: calc(-200px / 2);
Less和Sass中也能实现 + - * / 运算
无论是LESS中的运算还是SASS中的运算都需要加上()
5. Mix in(混合)
将重复的代码封装到一个类中,在需要使用的时候调用该类
如果Min in的后面没有(),则解析成css文件后在css文件中会保留Mix in的代码
<script>
/*
LESS中混合定义: .混合名称{} 或者 .混合名称(){}
LESS中混合调用: .混合名称; 或者 .混合名称();
SASS中混合定义: @mixin 混合名称{}; 或者 @mixin 混合名称(){};
SASS中混合调用: @include 混合名称; 或者 @include 混合名称();
*/
</script>
如果Min in的后面有(),则解析成css文件后在css文件中不会保留Mix in的代码
6. 带参数的混合
- 带参数,不带默认值
- 带参数,带默认值
- 给指定参数赋值
7. 可变参数
7.1 Less
@arguments 能接收传递的实参
… 可以接收0个到多个参数,如果在形参列表中使用… 必须放在形参列表的最后
7.2 Sass:
SASS不是使用JS实现的, 所以不能直接在混合中使用arguments
必须通过 $args...的格式来定义可变参数, 然后通过$args来使用
注意点: 和LESS一样可变参数必须写在形参列表的最后
8. Less中的匹配模式
通用的匹配模式: @_
将相同的代码写在第一个形参是@_的类中
将不同的代码写在第一个字符串形参不是@_的类中
在解析时,会先解析@_类中的代码,再匹配不是@_中的代码
8.2 Sass:
9. 导入其他less文件@import
<script>
/*
和LESS一样SASS文件中也支持导入其它SASS文件
原生的CSS也支持通过@import导入其它的CSS文件, 只不过不常用
不常用的原因在于原生的@import导入其它的CSS文件,
只有执行到@import时浏觅器才会去下载对应 css文件,这导致请求次数变多,页面加载起来特别慢
而LESS和SASS中的@import是直接将导入的文件拷贝到当前文件中生成一份CSS, 所以只会请求一次, 速度更快
*/
</script>
.less 后缀可以省略
10. 内置函数
10.1 Less:
<script>
/*
由于less的底层就是用JavaScript实现的,
所以JavaScript中常用的一些函数在less中都支持
*/
// 混杂方法
/*
image-size("file.jpg"); // => 100px 50px
image-width("file.jpg"); // => 100px
image-height("file.jpg"); // => 50px
// 单位转换
convert(9s, "ms"); // => 9000ms
convert(14cm, mm); // => 140mm
convert(8, mm); // => 8
// 列表
@list: "A", "B", C, "D";
length(@list); // => 4
extract(@list, 3); // => C
*/
// 数学
/*
ceil(2.1); // => 3 向上取整
floor(2.1); // => 2 向下取整
percentage(.3); // => 30% 转百分比
round(1.67, 1); // => 1.7 四舍五入,保留一位小数点
sqrt(25cm); // => 5cm 取平方根
abs(-5cm); // => 5cm 取绝对值
pi(); // => 3.141592653589793 圆周率π
max(3px, 42px, 1px, 16px); // => 42px
min(3px, 42px, 1px, 16px); // => 1px
*/
// 字符串
/*
replace("Hi Tom?", "Tom", "Jack"); // => "Hi Jack"
*/
// 判断类型
/*
isnumber(56px); // => true 是否含数字
isstring("string"); // => true
iscolor(#ff0); // => true
iscolor(blue); // => true
iskeyword(keyword); // => true
isurl(url(...)); // => true
ispixel(56px); // => true
isem(7.8em); // => true
ispercentage(7.8%); // => true
isunit(4rem, rem); // => true 是否为指定单位
isruleset(@rules); // => true 是否为变量
*/
// 颜色操作
/*
增加饱和度
saturate(color, 20%)
减少饱和度
desaturate(color, 20%)
增加亮度
lighten(color, 20%)
减少亮度
darken(color, 20%)
降低透明度
fadein(color, 10%)
增加透明度
fadeout(color, 10%)
设置绝对不透明度(覆盖原透明度)
fade(color, 20%)
旋转色调角度
spin(color, 10)
将两种颜色混合,不透明度包括在计算中。
mix(#f00, #00f, 50%)
与白色混合
tint(#007fff, 50%)
与黑色混合
shade(#007fff, 50%)
灰度,移除饱和度
greyscale(color)
返回对比度最大的颜色
contrast(color1, color2)
*/
// 颜色混合
/*
每个RGB 通道相乘,然后除以255
multiply(color1, color2);
与 multiply 相反
screen(color1, color2);
使之更浅或更暗
overlay(color1, color2)
避免太亮或太暗
softlight(color1, color2)
与overlay相同,但颜色互换
hardlight(color1, color2)
计算每个通道(RGB)基础上的两种颜色的平均值
average(color1, color2)
*/
</script>
10.2 Sass:
<script>
// 字符串函数
/*
unquote($string):删除字符串中的引号;
quote($string):给字符串添加引号;
To-upper-case($string):将字符串小写字母转换为大写字母
To-lower-case($string):将字符串大写字母转换为小写字母
*/
// 数值函数
/*
percentage($value):将不带单位的数转换成百分比值;
round($value):将数值四舍五入,转换成一个最接近的整数;
ceil($value):向上取整;
floor($value):向下取整;
abs($value):取数的绝对值;
min($numbers…):找出几个数值之间的最小值;
max($numbers…):找出几个数值之间的最大值;
random(): 获取随机数
*/
// 颜色函数
/*
rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;
rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;
red($color):从一个颜色中获取其中红色值;
green($color):从一个颜色中获取其中绿色值;
blue($color):从一个颜色中获取其中蓝色值;
mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
*/
// 列表函数
/*
length($list):返回一个列表的长度值;
nth($list, $n):返回一个列表中指定的某个标签值;
join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
append($list1, $val, [$separator]):将某个值放在列表的最后;
zip($lists…):将几个列表结合成一个多维的列表;
index($list, $value):返回一个值在列表中的位置值。
*/
</script>
11. 伪元素&::before和伪类&:hover
11.1 Less:
11.2 Sass:
12. 继承extend
继承和混合的区别:
混合:封装的类会直接拷贝在使用该类的元素中(代码冗余)
继承:并集选择器(不会有代码冗余)
12.1 Less:
12.2 Sass:
13. 条件选择
13.1 Less:
less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合中的代码
when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进行条件判断
/*
.size(@width,@height) when (@width = 100px){
width: @width;
height: @height;
}
*/
// (),()相当于JS中的||
/*
.size(@width,@height) when (@width = 100px),(@height = 100px){
width: @width;
height: @height;
}
*/
// ()and()相当于JS中的&&
/*
.size(@width,@height) when (@width = 100px)and(@height = 100px){
width: @width;
height: @height;
}
*/
只有当传入的width的单位是px时,才能执行.size中的代码
13.2 Sass:
SASS中支持
@if(条件语句){}
@else if(条件语句){}
... ...
@else(条件语句){}
SASS中当条件不为false或者null时就会执行{}中的代码
14.Sass支持for和while循环
<script>
/*
for循环
@for $i from 起始整数 through 结束整数{}
@for $i from 起始整数 to 结束整数{}
两者的区别 through包头包尾, to包头不包尾
while循环
@while(条件语句){}
*/
</script>
在ul中添加10个li:
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>