css预处理器:sass和less

css预处理器:sass和less

​ sass和less都属于css预处理器,cs预处理器定义了一种新的语言,即用一种专门的编程语言,为css增加了一些编程的特性,如:变量、语句、函数、继承等一些概念。将css作为目标生成文件,然后开发者使用这种专门的编程语言进行与css有关的编程代码工作

sass预处理器

sass支持7种主要的数据类型:

  1. 数字

    [1.0, 2, 3px ]
    
  2. 字符串

    {"win",'win',win}
    
  3. 颜色

    [white, #ffffff, rgb(0,0,0,)]
    
  4. 布尔值

    [true, false]
    
  5. 空值

    [null]
    
  6. 列表

    [1 0 x 10px,key,value,vue,react,3]
    
  7. 映射

    ((key1:value1,key2:value2))  映射map 键->

语法

1.赋值

在.sass中定义变量用$

$number:123px;
/*
普通变量声明:直接用$声明
变量执行顺序是自上而下,当下面对变量重新赋值时,会用下面的新值
*/
$width:200px;
$width:100px;

/*
默认变量:在后面添加 !default
变量在执行的时候,不会根据位置执行,执行不是默认变量的值
*/
$width:200px;
$width:100px !default;

/*
全局变量和局部变量
在局部变量后添加 !global,局部变量作用域为全局变量
*/
$color: red;
#div{
    color:$color;//使用全局变量,结果red
    //$color:orange//局部变量,结果是orange
    $color:orange !global;
    .box{
        background-color:$colorl;//在本作用域下颜色是orange
    }
}
#div2{
    background-color:$color;//由于局部变量变为全局变量了,所以结果为orange
}
2.插值

.sass文件中,用KaTeX parse error: Expected 'EOF', got '#' at position 7: 定义值后,用#̲{}进行插值,和值一起写入括号中

$key:margin;
$value:1;
$number:11px;
box${value}{
    ${key}:$number;
    ${key}:auto;
}

编译结果:

box1{
    margin:11px;
    margin:auto;
}
3.作用域

.sass文件中,先取值,在定义新变量之前,使用之前的值,定义新变量之后会只用更改的值,即作用域有顺序

@number:123px;

box@{i}{
    width;@number;
    @number:456px;
    @{key}:@number;
    @{key}:auto;
}

编译结果(改变之前使用之前的,改变之后使用修改的):

box1{
    height:123px;
    margin:456px;
    margin:auto;
}
4.选择器嵌套、伪类嵌套、属性嵌套

原生:

ul{
    list-style:none;
}
ul:hover {
    color:black;
    font-size:20px;
    font-weight:bold;
}
ul li{
    float:left;
}
ul li p{
    margin:10px;
}
ul li div {
    margin:15px;
}

sass:

ul{
    list-style:none;
    
    li{
        float:left;
        p{
            margin:10px;
        }
        div{
            margin:15px;
        }
    }
    &:hover{//父类元素选择器,添加伪类选择器
        color:black;
        font:{
            size:20px;
            weight:boldl;
        }
    }
}
5.运算

.sass文件中,不同的单位不能进行计算,默认/是分割,而在.less中/是除号

.box2{
    width: $sun*3;//sass中单位不同不能运算
    //height: $num + 20em;
    font:20px/1.5;//默认/是分割操作
    padding:(20px/1.5);
    color: #ffffff * 2;
}
6.函数

sass和less有的函数可以通用,但有的不可以,需要根据官网的文件查看(api)

round()取整,precentage()小数点换成百分数

sass可以自定义函数,用function定义

$color:(light:white,dark:black); //map映射
//根据key获取值
//定义函数
@function color(key){
    @if not map-has-key($color,$key){
        @worn "映射中没有#{$key}这个键";
        @error "映射中没有#{$key}这个键"
    }
    
    @return map-get($color,$key);
}
//使用函数
body{
    background:color(light);
}
@function sum($n,$m){
    @return $n+$m;
}

.box3{
    width:round(1.2p0x);
    height:precentage(0.5);
    margin:random();
    padding:sqrt(64px)
    font-size: sum(1px,2px);
}
7.混合、命名空间、继承

.sass文件中,用@mixin方法定义要混入 的样式,用@include将方法混入

/*
混合:@mixin  名称{}
引用混合: @include  名称{}
*/
//无参混合
@mixin clear{
    width:100px;
}
#div4{
    @include clear;
}

//有参混合
@mixin col($color:red,$border:1px solid black){
	background:$color;
    border:$border;
}
#div5{
    @include col;
    @include col(orange);
}

继承:

.btn{
    width:100px;
    height:23px;
    a{
        color:red;
        &:hover{
            background-color:orange;
            color:yellow;
        }
    }
}
.btn-primary{
    @extend .btn;
    background-color:blue;
}
.btn-success{
    @extend .btn;
    background-color:balck;
}
8.合并、媒体查询

sass合并在定义的函数中用小括号填入参数,用的是舰队之的方式用map-values()传入参数

$background:{
    a : url(a.png),
    b : url(b.png) 
};
$transform:{
    a : scale(2),
    b : rotate(360deg)
}
.box4{
    background :map-values(background);
    transform :zip(map-values($transform)...)
}

编译结果:

.box4{
    background :url(a.png),url(b.png);
    transform :sacle(2) rotate(360deg);
}

媒体查询:

.box5{
    width: 100px;
    @media all and (min-width:123px){
        width:200px;
    }
    @media all and (max-width:233px){
        width:300px;
    }
}

编译:

.box9{
    width:100px;
}
@media all and(min-width:123px){
    .box9{
    width:200px;
	}
}

@media all and(min-width:233px){
    .box9{
    width:300px;
	}
}
9.条件判断、循环

循环:

if-else、for循环只有.sass文件有

.box5{
    @if($couunt > 4){
		width:100px + $count;
    }
    @else{
		width:10px + $count;
    }
}

@for $i from 0 through 2{
    .box-#{$i}{
        width:100px + $i;
    }
}
#icons: success warning error primary info;
@each #icon in $icons{
    .icon-#{$icon}{
        background:url(images/#{$icon}.png) no-repeat;
    }
}
$num:6
@while #num > 0{
	.item#{$num}{
        width:1em * $num;
    }
    @num: $num - 1;
}
10.引入

sass导入scss文件,less导入less文件

@import '/.scss'

less预处理器

注释

.less文件中,不会显示单行注释,只会显示多行注释

xxx//单行注释不会显示
/*
xxx多行注释会显示
*/
/*?
xxx强制注释,在任何时候都会保留
*/

语法

1.赋值
@number:123px;
/*
普通变量声明:直接用$声明
变量执行顺序是自上而下,当下面对变量重新赋值时,会用下面的新值
*/
@width:200px;
@width:100px;

/*
默认变量:在后面添加 !default
变量在执行的时候,不会根据位置执行,执行不是默认变量的值
*/
@width:200px;
@width:100px !default;

/*
全局变量和局部变量
在局部变量后添加 !global,局部变量作用域为全局变量
*/
@color: red;
#div{
    color:@color;//使用全局变量,结果red
    //$color:orange//局部变量,结果是orange
    @color:orange !global;
    .box{
        background-color:$colorl;//在本作用域下颜色是orange
    }
}
#div2{
    background-color:@color;//由于局部变量变为全局变量了,所以结果为orange
}
2.插值

.less文件中定义一个值,插入进去用@{},将定义的值放入括号中

@key:margin;
@value:1;
@number:11px;
box@{value}{
    @{key}:@number;
    @{key}:auto;
}

运行结果:

box1{
    margin:11px;
    margin:auto;
}
3.作用域

.less文件中,在大括号里有已经创建的变量,优先使用大括号里面的变量值

@number:123px;
box@{i}{
    height;@number;
    @number:456px;
    @{key}:@number;
    @{key}:auto;
}

编译结果(无论先后,取值都是大括号内定义的值):

box1{
    height:456px;
    margin:456px;
    margin:auto;
}
4.选择器嵌套、伪类嵌套、属性嵌套

在.sass文件中,可以对标签嵌套,在里面写各个层级相应的样式,编译完成之后会自动写好对应的选择器,减少复杂的编译选择器代码,属性嵌套只用.sass文件有

原生:

ul{
    list-style:none;
}
ul:hover {
    color:black;
    font-size:20px;
    font-weight:bold;
}
ul li{
    float:left;
}
ul li p{
    margin:10px;
}
ul li div {
    margin:15px;
}

sass:

ul{
    list-style:none;
    
    li{
        float:left;
        p{
            margin:10px;
        }
        div{
            margin:15px;
        }
    }
    &:hover{//父类元素选择器,添加伪类选择器
        color:black;
        font:{
            size:20px;
            weight:boldl;
        }
    }
}
5.运算

.less中可以做加减乘除操作,当不同的单位进行运算的时候,会按照第一个单位进行计算,只能计算值

.box2{
    width:10em + @number;//10em + 123em=133em
    height:@number + 10px;//10px+123px=133px
    padding:20px/2;//10px
    padding:~"20px/2"//20px/2
    font:20px/2//20px/2
    color:#111111*2//#222222
}
6.函数
7.混合、命名空间、继承

命名空间:

用#名称()创建,#名称+样式调用

#name(){
    .show{
        display:inline;
    }
}
.box4{
    #name.show;
}

继承:

直接在需要使用的样式中用&:extend()调用,编译后会写成分组选择器,节省代码量,相比命名空间

.line{
    display:block;
}
.box4{
    &:extend(.line);
}
8.合并、媒体查询

合并:

.less中对同一种属性的值进行合并,用+合并之后,编译的是用,隔开,用+_合并的值,编译后用空格隔开

.box4{
    background+:url(a.png);
    background+:url(b.png);
    transform+_:scale(2);
    transform+_:rotate(360deg);
}

编译结果:

.box4{
    bakground:url(a.png),url(b.png);
    tansform:scale(2) rotate(360deg);
}

媒体查询:

.box5{
    width: 100px;
    @media all and (min-width:123px){
        width:200px;
    }
    @media all and (max-width:233px){
        width:300px;
    }
}

编译:

.box9{
    width:100px;
}
@media all and(min-width:123px){
    .box9{
    width:200px;
	}
}

@media all and(min-width:233px){
    .box9{
    width:300px;
	}
}
9.条件判断、循环
//条件判断
@count:5;
.get(@cn) when(@cn>4){
	width:@cn+10px;
}
.get(@cn) when(@cn<4){
	width:100px+@cn;
}
.box6{
    .get(@count);
}

//循环
@count:4;
.get(cn) when(@cn<5){
    .get(@cn+1);
    .box-@cn{
		width:100px+@cn;
    }
}
.box5{
    .get(@count)
}
10.引入

sass导入scss文件,less导入less文件

@import '/.less'
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值