Css预编译(Sass&&Less)

目录

• • Less与Sass是css的预处理技术
  • 而CoffeeScript、TypeScript则是javascript的预处理技术。
• 一、Less
  • • 1.1 变量
    • 1.2 混入
    • 1.3 嵌套
    • 1.4 运算
    • 1.5 继承
    • 1.6 作用域
    • 1.7 循环
• 二、Sass
  • • 2.1 变量
    • 2.2 嵌套
    • 2.3 导入
    • 2.4 mixin 混入
    • 2.5 继承/扩展
    • 2.6 sass运算
    • 2.7 函数
    • 2.8 流程控制
• 三、最后

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:18px;
    ...
}

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;
        }

三、最后

在此，提供以传送门，给更多的参考。
本人推荐优先选择Sass,其所更为强大。Sass官方
如您喜欢Less,也是一个不错的选择。Less文档
推荐一下导师所写博客，我所记下的这篇文章，大部分是受了导师的影响。张果—前端预处理技术