目录
Less与Sass是css的预处理技术
而CoffeeScript、TypeScript则是javascript的预处理技术。
Less与Sass是css的预处理技术
而CoffeeScript、TypeScript则是javascript的预处理技术。
一、Less
Less是一种动态样式语言，是一门css预处理语言，扩展了css语言，增加了变量，运算，嵌套等一系列功能
1.1 变量
语法:@变量名:变量值;
存在作用域:局部作用域>全局作用域
以@开头，后面输入变量名.
实例:
@color:red;
@size:18px;
.div{
background-color:@color;
font-size:@size;
...
}
//翻译后
.div{
background-color:red;
font-size:@size;
...
}
1.2 混入
定义一个函数，写入参数值，可调用
内置变量@arguments代表所有参数(运行时)的值
相当于一个模板，将模板引入，再写入参数即可使用
如:
.circle(@width:100px,@color:red,@height:100px){
width:@width;
color:red;
height:100px;
font-size:18px;
}
.c1{
.circle(); //不带参数引入
.circle(200px,blue)//带两个参数
.circle
...
}
//翻译后
.c1{
width:100px;
//带参数为: width:200px;
color:red;
//带参数为: color:blue;
height:100px;
font-size:18px;
}
1.3 嵌套
允许将多个选择器嵌套在一起,
&表示当前选择器的父选择器
例：
.cor{
color:red;
.ten{font-size:12px;}
&#sub{width:100px;}
}
//翻译后
.cor{
color:red;
}
.cor .ten{
font-size:12px;
}
.cor#sub{
width:100px;
}
1.4 运算
less拥有强大的运算能力，针对数字，颜色，变量的操作，支持加、减、乘、除或更复杂的综合运算！
例:
@file:5%;
@base-color:lightblue;
.cor{
width:@file * 10; //50%
background-color: @base-color + #111;
}
1.5 继承
让一个样式继承另一个样式
例:
.cor{
width:100px;
color:red;
}
.cor2{
&:extend(.cor);
font-size:15px;
}
.cor3{
&:extend(.cor);
}
//翻译后
.cor,
.cor2,
.cor3{
width:100px;
color:red;
}
.cor2{
font-size:15px;
}
1.6 作用域
局部作用域>全局作用域
同一级变量，后者会覆盖前者
例:
@name:30px;
.cor{
@name:20px;
font-size:@name; //20px
}
@name:18px
.cor2{
font-size:@name; //18px
}
1.7 循环
在Less中，可以调用本身
例:
.cor(@name) when (@name > 0){
.cor((@name - 1))
width:(@name * 10px);
}
.ten{
.cor(3);
}
//翻译后
.ten{
width:10px;
width:20px;
width:30px;
}
二、Sass
2.1 变量
使用符号:$标识符
<!--定义变量-->
$width:1000px;
$height:500px;
.box{
width:$width;
height:$height;
}
2.2 嵌套
略，与less相同
2.3 导入
@import
reset.scss 文件
$width:900px;
$color:blue;
*{
background-color:$color;
width:$width;
}
scss代码
@import "reset"
.box{
width:200px;
}
<!--翻译后-->
*{
background-color:$color;
width:$width;
}
.box{
width:200px;
}
2.4 mixin 混入
sass中用mixin定义一些代码段，可传参数，
定义时用@mixin
调用时用@include
例:
@mixin cir($size:100px,$color:red,$px:14px){
width:$size;
background-color:$color;
font-size:$px;
}
.cls{
@include cir();<!--调用-->
@include cir(150px);
@include cir(150px,blue,20px);
}
翻译后
.cls{
width:100px;
background-color:red;
font-size:14px;
------------------------
width:150px;
background-color:red;
font-size:14px;
------------------------
width:150px;
background-color:blue;
font-size:20px;
}
2.5 继承/扩展
通过@extend来实现代码组合
例:
.state{
background-color:red;
}
.state2{
@extend .state
background-color:blue;
font-size:12px;
}
翻译后
.state,.state2{
background-color:red;
}
.state2{
background-color:blue;
font-size:12px;
}
2.6 sass运算
sass可以进行复杂的运算
2.7 函数
sass集成了大量的颜色函数,让变换颜色更加简单
例:
$pcolor:#999ccc;
.cls:hover{
darken:黑暗
background-color:darken($pcolor,15%);
<!--变暗15%-->
lighten:照亮
background-color:lighten($pcolor,15%);
<!--变亮15%-->
}
2.8 流程控制
sass中拥有流程控制语句，如:if,for,while,each等
例:
/*如果i是3的倍数，则下划线*/
@if $i%3==0 {
text-decoration: underline;
}
