css预处理器：sass和less
sass和less都属于css预处理器，cs预处理器定义了一种新的语言，即用一种专门的编程语言，为css增加了一些编程的特性，如：变量、语句、函数、继承等一些概念。将css作为目标生成文件，然后开发者使用这种专门的编程语言进行与css有关的编程代码工作
sass预处理器
sass支持7种主要的数据类型：
-
数字
[1.0, 2, 3px ] -
字符串
{"win",'win',win} -
颜色
[white, #ffffff, rgb(0,0,0,)] -
布尔值
[true, false] -
空值
[null] -
列表
[1 0 x 10px,key,value,vue,react,3] -
映射
((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'
扫一扫
2387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
