css预处理语言--让你的css编写更加简单方便

时间：2023-12-30 21:15:08

CSS预处理语言之一-------LESS

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。

1、声明变量：

@变量名：变量值

使用变量：@变量名

>>>变量使用的原则

多次频繁出现的值，后期需要统一修改的值，牵扯到数值运算的值。

>>>less中的变量类型，

① 数值类：不带单位的123 带单位的122px；

②字符串类型，带引号的"hahaha" 不带引号的 red #ff0000;

③颜色类 red #ff0000;RGB(255,255,0)

④值列表类型，多个值用逗号或者空格分隔，10px solid red

在css中出现的属性值，都可以出现在less中。

@color:#FF0000;
@lenght:100px;
#div1{
    width: @lenght;
    height: @lenght*2;
    background-color: @color;
}

2、混合（Mixins）

①无参混合

声明：.class{}

调用：在选择器中使用.class；直接调用

②有参无默认值混合：

声明: .class(@param){}

调用：.class(paramvalue)

③有参有默认值混合：

声明 .class(@param：10px){}

调用 .class(paramvalue)或者.class();

>>>如果声明是，没有给参数默认值，则调用时必须赋值，否则报错；

>>>无参混和，实际上就是一个普通的class选择器，会被编译到css文件中；

而有参混和在编译时，不会出现css文件中

//无参混合
.borderRadius{
   border-radius: 10px;
    -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
}
//有参无默认值混合
.borderRadius1(@radius){
   border-radius: @radius;
    -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
}
//有参有默认值混合
.borderRadius2(@radius:10px){
   border-radius: @radius;
    -moz-border-radius: @radius;
   -webkit-border-radius: @radius;
}

3、less中的匹配模式

①声明：

@pipei(条件一，参数){} @pipei(条件二，参数){} @pipei(@_，参数){}

②调用：

@pipei(条件的值：参数的值){}

③匹配规则：

根据调用时输入的条件值，并寻找与之匹配的混合执行

@_表示不管匹配成功与否，都会执行的选项。

/*匹配模式*/
.pipei(lefts,@width:10px){
    margin-left: @width;
}
.pipei(rights,@width:10px){
    margin-right: @width;
}
.pipei(tops,@width:10px){
    margin-top: @width;
}
.pipei(bottoms,@width:10px){
    margin-bottom: @width;
}
.pipei(@_,@width:10px){
  padding: 10px;
}

4、@arguments特殊变量

在混合中，@arguments表示传入的所有参数。@arguments中的多个参数之间，用空格分隔。

.border(@width,@style,@color){
border:@arguments;//----->border:@width @style @color;
}

5、Less中的嵌套

less中允许css选择器按照html代码进行嵌套，这也是LESS中运用最广，最便捷的功能

less中的嵌套默认后代选择器，如果需要子代选择器，需要在前面加>

&符号表示这个&所在的上一层选择器，比如上述&，表示section里面的ul

section{
    width: :800px;
    height: 200px;
    background-color: #ccc;
    p{
        color:red;
        font-weight: bold;
        }
    ul{
        padding: 0px;
        list-style: none;
        >li{
            float: left;
            width: 100px;
            height: 50px;
            background-color: blue;
            &:hover{
            background-color: green;
            }
        }
    }

CSS预处理语言之二-----SCSS

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

下面的命令，可以在屏幕上显示.scss文件转化的css代码

1 scss中的变量

①声明变量：$变量名：变量值

SCSS中，允许将变量嵌套在字符中，但是变量必须使用井{}包裹

$width:100px;
$position:left;
#div1{
    width:$width ;
    height: $width;
    background-color: red;
    border-#{$position}:10px solid yellow;
}

2、SCSS中的运算

会将单位进行运算，使用时许注意最终的单位是否正确。

eg：10px*10px =100 px*px 报错

3、SCSS中的嵌套：

选择器嵌套：属性嵌套：伪类嵌套

① 选择器嵌套 ul{ li{ } }

嵌套默认为后代选择器：如果需要自带选择器，可以再选择器前加>

可以再选择器的{}中，使用&表示上一层的选择器。

② 伪类嵌套li{&：hover{} }

在选择器的{}中，使用&配合伪类事件，可以表示当前选择器的伪类

③ 属性嵌套: font:{

size:16px;

weight:blod;

family:"微软雅黑";

style:"italic";

}

对于属性名有-分隔为多段的属性，可以使用属性嵌套。属性名的前半部分，必须紧跟一个：才能使用{}包裹属性的后半部分；

section{
    background-color: #ccc;
    p{
        color: red;
    }
    ul{
        padding: 0px;
        li{
            list-style: none;
            &:hover{
                color: red;
            }
            font:{
                size:16px;
                weight:blod;
                family:"微软雅黑";
                style:"italic";
            }
        }
    }
}

4、混合宏、继承、占位符

①混合宏：使用@mixin声明混合宏，在其他选择器中使用@include调用混合宏

@mixin hunhe(){} .class{@include hunhe;}

@mixin hunhe($param){} .class{@include hunhe(value);}

@mixin hunhe($param:value){} .class{@include hunhe();}

>>>声明时，可以有参数，也可以没有参数，参数可以有默认值，也可以没有默认值。但是调用时必须符合声明时的要求，与less中的混合相同

>>>优点：①可以传参 ②不会产生同名的class

>>>缺点调用时，会把混合宏中的所有代码copy到选择器中，产生大量重复代码。

②继承 声明一个普通的class，在其他选择器中使用@extend继承这个class

.class1{} .class2{ @extend .class1; }

>>>优点：将不同的代码。提取到并集选择器，减少冗余代码；

>>>确定：①不能传参 ②生成一个多余的class

③占位符 使用%声明占位符，在其他选择器中使用@extend继承展位符：

%class1{}

.class4{@extend %class1;}

>>>优点：将不同的代码。提取到并集选择器，减少冗余代码，不会生成一个多余的class

>>>缺点：不能传参

//继承
.class1{
    color: red;
}
.class{
    @extend .class1;
    background-color: yellow;
}
//占位符

%class1{
    color: red;
}
.class4{
    @extend %class1;
    background-color: yellow;
}
.class5{
    @extend %class1;
    background-color: green;
}

5、SCSS里的结构

//for循环
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//while循环
$i:0;
@while $i<10{
    .while-#{$i}{
        border: #{$i}px solid red;
    }
    $i:$i+1;
}
//有问题
//each循环遍历

@each $item in c1,c2,c3,c4{
    $i:$i+1;
  .#{$item}{
     border: #{$item}px solid red;
   }
} 

@function func($num){
    @return $num *2;
}
.funcTest{
    width: func(10px);
}

相关文章