动态css语言less,CSS中的预编译语言less和sass

web.jpeg

1.less

Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。此外，Less 可以运行在 Node 或浏览器端。

less语法

1.变量 在less文件中声明定义

//定义变量

//格式: @变量名称: 对应的value

@color:#E9232C;

@fs:16px;

@navH:70;

@w:200px;

@h:50px;

//使用

div,p{

width: @w;

height: @h;

background: @color;

}

注意：一般一些公用的变量，比如宽度，颜色等 单独 抽取一个less文件

入一下例子

一个基础的公用的less文件 名称为base.less文件 内容如下:

//定义变量

@color:#E9232C;

@fs:16px;

@navH:70;

@w:200px;

@h:50px;

在另一个index.less文件中使用

//导入模块

@import "base.less";

div,p{

width: @w;

height: @h;

background: @color;

}

@ import "xxx" 在less文件中 引入另外一个less文件

2.标签嵌套 使用

//1.定义变量

@color:red;

@width:50px;

@height:50px;

@bgColor:green;

//2.嵌套

//父亲盒子

.box{

width: @width*3;

height: @height*3;

background-color:@bgColor;

//子盒子

.test1{

width: @width + 20px;

height: @height + 20px;

background-color: white;

//子子盒子

.test3{

background-color: @color;

}

}

}

3. 运算

注意：运算符与值之间必须以空格分开 ; 在运算的时候，只要有一个有单位就行

@width:300px;

@height:100px;

@color1:red;

@color2:green;

div{

//width: @width - 100;//可以

//width: @width - 200px ;//可以

//width: @width * 2;//可以

//width: @width * 3px;//可以

width: 500 - @width; //可以

height: @height;

background-color: red;

//background-color: @color1 + @color2; // 可以

//background-color: @color1 + 15; // 可以

//background-color: @color1 + yellow; // 不可以

}

4.混合-函数

格式 .fn(){} fn是名称

@width:300px;

@height:100px;

@color:green;

//混合：无参数

// 类似JS中的函数

// 格式 .fn(){}

.createRadius1(){

border-radius: 30px;

}

//混合：有参数

.createRadius2(@Radius:50px,@border:3px solid yellow){

border-radius: @Radius;

border: @border;

}

div{

width: 500 - @width; //可以

height: @height;

background-color: red;

//引用

.createRadius1();

}

p{

width: @width *2 ;

height: @height *2 ;

background-color: blue;

//引用

.createRadius2(30px,5px solid blue);

}

2. Sass预处理器

SASS是一套利用Ruby实现的, 最早最成熟的CSS预处理器，它和Less一样也是 一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护。

注意: SASS以.sass或者.scss结尾

.sass结尾以缩进替代{}表示层级结构, 语句后面不用编写分号;

.scss以{}表示层级结构, 语句后面需要写分号;(推荐使用这个)

2.1变量

Sass中定义变量的格式: $变量名:对应的vlue

后定义的 变量会覆盖前面的同名变量

SASS中变量不是延迟加载, 不可以先使用后定义

//定义变量

$width:200px;

$height:300px;

//使用

.box{

width:$width;

height:$height;

background: red;

}

变量插值

格式: #{变量名}

//定义变量

$size: 200px;

$w: width;

div{

#{$w}: $size;

height: $size;

background: red;

}

2.2混合

格式: @mixin 名称(){}

使用:@include 名称

没有参数

//定义混合

@mixin center(){

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

.father{

width: 300px;

height: 300px;

background: red;

//使用

@include center();

.son{

width: 200px;

height: 200px;

background: blue;

//使用

@include center();

}

}

带参数

可以有默认值

//定义混合

// $w：默认值是100px

@mixin whc($w: 100px, $h: 100px, $c: #000){

width: $w;

height: $h;

background: $c;

}

// 宽度、高度使用默认值的时候，颜色不用，必须带上 **形式参数**

.box2{

@include whc($c: blue);

}

.box1{

@include whc(300px, 300px, red);

}

可变函数 和 less一样

//定义混合

@mixin animate($name, $time, $args...){

transition: $name $time $args;

}

//使用

div{

width: 200px;

height: 200px;

background: red;

//transition: all 4s linear 0s;

//使用

@include animate(all, 4s, linear, 0s);

}

2.3引入其他sass文件

//引入其他，scss文件，后缀名可加，可不加

@import "search.scss";

2.4函数

自定义函数

格式:@function 函数名(形式参数){函数体}

//定义函数

@function sum($num){

//返回值

//注意：格式 @return

@return $num + $num +"px";

}

div{

//使用

width: sum(2);

height: 200px;

}

内置函数

内置函数，执行使用就行了

2.5嵌套结构

子级盒子嵌套使用在父级盒子里面

.father{

width: 300px;

height: 300px;

background: red;

//使用拼接

&:hover{

width: 100px;

height: 100px;

background: yellow;

}

//嵌套

.son{

width: 200px;

height: 200px;

background: blue;

}

}

2.6继承

格式:@extend .xxx 其中xxx是要继承的类

//定义

.center{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

.father{

//继承

@extend .center;

width: 300px;

height: 300px;

background: red;

.son{

@extend .center;

width: 200px;

height: 200px;

background: blue;

}

}

2.7 Sass中的条件判读和循环

条件判断

在sass中可以直接，使用 if(){}elseif()

//定义一个混合

@mixin triangle($dir, $width, $color){

width: 0;

height: 0;

border-width: $width;

border-style: solid solid solid solid;

//条件判断

@if($dir == Up){

border-color: transparent transparent $color transparent;

}@else if($dir == Down){

border-color: $color transparent transparent transparent;

}@else if($dir == Left){

border-color: transparent $color transparent transparent;

}@else if($dir == Right){

border-color: transparent transparent transparent $color;

}

}

div{

//使用混合

@include triangle(Left, 50px, blue);

}

循环

@for $i from 起始整数 through 结束整数{}

@for $i from 起始整数 to 结束整数{}

两者的区别 through包头包尾, to包头不包尾

ul{

li{

width: 100%;

height: 50px;

border: 1px solid #000;

font-size: 20px;

color: #fff;

background: red;

//@for $i from 5 through 8{

//@for $i from 5 to 8{

$i:5;

@while($i <= 8){

&:nth-child(#{$i}){

background: deepskyblue;

}

$i:$i+1;

}

}

}