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