其他CSS预处理软件
CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架。其中最常用的是 Sass、Less、Stylus。
less
支持原生js,node, 让CSS有了基本的逻辑运算能力 , 基于js写的
sass
ruby环境,让CSS有了更完整的逻辑和判断能力,比如支持if这些 ,基于ruby
stylus — node
VUE阶段开发项目中我们使用stylus, 这个让CSS变成跟一门编程语言类似了
LESS基础
什么是less?
less是一种动态样式语言,属于css预处理器的范,它扩展了 CSS 语言, 增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展 LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。
- 动态样式
- CSS是一门非程序式语言,需要书写大量没有逻辑的代码,不方便维护及扩展,不利于复用,所以出现了处理css的工具和框架
- 预处理器
- 对生成CSS前的某一语法的处理程序
安装less
全局使用
安装nodeJS
下载less,全局配置
npm i -g less
检查less版本
lessc -v
npm i -g less i Initialize g global 全局安装lessc -v 检查全局的版本
Less全局的安装以及全局版本的检查
Easy LESS
less注释
- 单行注释不会被编译到css中
- //
- 多行注释会编译到
- /* */
less使用
引入less文件
-
BootCDN赋值地址
然后按照less的语法去写即可
正常使用.less
body {
width: 100%;
height: 100%;
background-color: orange;
//bod内部有一个div
div {
width: 500px;
font-size: 100px;
/* height: 300px; */
background-color: red;
//div内部有一个p
p {
width: 200px;
height: 200px;
margin: 0 auto;
}
}
}
LESS变量
较少允许我们定义一些变量来管理css(变量必须以@开头),请注意LESS中的变量为完全的’常量’,所以只能定义一次,作用域由本地在父对象查找。
变量作为属性
- @allColor:red;
变量作为选择器
- 使用@{变量名}
变量作为属性名
- @b: box-shadow;
变量作为url
- @url: “https://i0.hdslb.com/bfs/archive/997fa41b88c0426808c6d6c8168d29da5251ff85.jpg@880w_388h_1c_95q”;
- @url: url(“https://i0.hdslb.com/bfs/archive/997fa41b88c0426808c6d6c8168d29da5251ff85.jpg@880w_388h_1c_95q”);
#box {
width: 300px;
height: 200px;
background-color: @allColor;
.@{s} {
color: @allColor;
span {
border: 1px solid @allColor;
@{b}: 0px 0px 0px 0px @allColor;
// background: url(@url) 0 0 repeat;
//background: url("https://i0.hdslb.com/bfs/archive/997fa41b88c0426808c6d6c8168d29da5251ff85.jpg@880w_388h_1c_95q") 0 0 repeat;
background: @url 0 0 no-repeat;
//background: url("https://i0.hdslb.com/bfs/archive/997fa41b88c0426808c6d6c8168d29da5251ff85.jpg@880w_388h_1c_95q") 0 0 no-repeat;
}
}
}
-
变量延时加载
-它会在当前作用域样式未加载之前先加载变量,而且是由内而外,先寻找作用域内的变量,如果没有在寻找作用域外的变量
less规则
基础嵌套
在使用标准CSS时,要为多层堆叠的元素定义样式,从外部到内部的嵌套定义,然后给这个元素加上类名或id来定义。这样的写法虽然很好理解,但维护起来很不方便,因为无法清晰了解到样式之间的关系。
在最小中,嵌套规则使这个问题迎刃而解。。嵌套规则允许在一个选择器中嵌套另一个选择器,这更容易设计出精简的代码,并且样式之间的关系一目了然。
- 建议嵌套不要超过四层
//嵌套最好不要超过4层
/*
<div class="outer">
<ul class="list">
<p class="con">
<a href="">点击</a>
<span>1100</span>
</p>
</ul>
</div>
*/
.outer {
height: 300px;
>.list {
height: 200px;
>.con {
overflow: hidden;
}
a {
color: #ccc;
}
span {
border: 1px solid #000;
}
}
}
&—父级引用
使用&:代表前边的所有父级元素,常用在伪元素伪类css结构类等需求上
在一个内层选择器的前面,如果没有&符号,则它被解析为父选择器的后代;如果有&符号,它就被解析为父元素
父级引用1
ul{
width: 200px;
&>li{
//这里代表ul
overflow: hidden;
&:nth-child(1){
//这里代表ul
color: #ccc;
}
&:nth-child(2){
//这里代表ul
color: #ccc;
}
&:nth-child(3){
//这里代表ul
color: #ccc;
}
&:nth-child(4){
//这里代表ul
color: #ccc;
}
}
}
父级引用2
//&代表父级引用其实就是代表当前层级的父级
/*
<div class="outer">
<ul class="list">
<p class="con">
<a href="">点击</a>
<span>1100</span>
</p>
</ul>
</div>
*/
.outer{
height: 300px;
& > .list{
//这里代表的就是.outer
height: 200px;
>.con{
overflow: hidden;
&:hover{
//这里代表的就是.con
background-color: #fff;
}
}
a{
color: #cce;
}
span{
border: 1px solid #000;
}
}
}
less运算
- 任何数值,颜色,变量都可以运算
- less会给你自动推算单位,所以不需要每一个都加单位,但保证至少有一个加了单位
- 运算符与数值之间要以空格分开,涉及优先级时以()进行优先级计算
@var:40;
.outer{
width: (100% - 30px);
//70%
width: calc("100% - 30px");
//如果使用calc计算,则需要转义字符串~ 否则它只是一个字符串
.con{
width: 1000 + 50px;
//1050px
//至少需要给一个加上单位 运算符之间要有空格
width: 1000 * (50px - 30);
//20000px
border: 1px + 5 solid #000 + 40;
//border: 6px solid #282828;
height: @var + 60px;
//100px
}
}
less混合Mixin
-
在LESS中我们可以定义一些通用的属性集为一个类,然后在另一个类中去调用这些属性。
-
混合就是将各个属性从一个规则发布到另一个规则中
-
混合的定义:使用
.+混合名+()+{属性的合集}
混合的使用:。+混合名+();
普通混合
// 普通混合
.position(){
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.outer{
width: 600px;
height: 500px;
background-color: pink;
.position();
>.inner{
width: 500px;
height: 400px;
background-color: aqua;
.position();
.con{
width: 200px;
height: 200px;
background-color:yellow;
.position();
}
}
}
带着参数混合
-
在声明混合的时候,可以在小括号中声明形参。形参由@ +变量名定义。
调用的时候可以设定实参
.center(@w,@h,@bg){
width: @w;
height: @h;
background-color: @bg;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.outer{
//通过形参:实参 的方法传参的时候,位置可以任意书写
.center(@w:500px,@h:500px,@bg:red);
>.inner{
.center(@h:300px,@w:200px,green);
.con{
//也可以不写,但位置就不能换
.center(100px,200px,yellow);
}
}
}
带参数混合默认值
-
可以直接在混合中定义形参的时候,给形参设置数值,例如(@color:red)。
当使用混合的时候,如果有实参传递,则使用实参的值,否则使用形参的替代值
//如果形参有默认值,那么调用的时候不传参,就是默认值
.center(@w,@h,@bg : pink){
width: @w;
height: @h;
background-color: @bg;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.outer{
//通过形参:实参 的方法传参的时候,位置可以任意书写
.center(@w:500px,@h:500px,@bg:red);
>.inner{
.center(@h:300px,@w:200px,green);
.con{
//也可以不写,但位置就不能换
.center(100px,200px);
}
}
}
清除浮动组合
.clearFix(){
&:after{
content: "\200B";
//也就是空,专业写法
height: 0;
//老版本浏览器没有高度会设置默认
display: block;
clear: both;
}
}
.outer{
width: 400px;
.clearFix();
.con1{
height: 100px;
}
.con2{
width: 100px;
}
}
命名参数
在使用混合的时候,如果想要指定传递的实参对应哪一个形参,则可以对实参命名
参数变量
@arguments变量代表所有参数集合,不想单独处理每个一个参数的话,可以利用@arguments代替
模式匹配和守卫
-
在Less中尝试利用模式匹配替用if / else,其执行原理类似的开关/案例。
-
因为一个混合可能有多种形式,所以Less提供了一种机制,允许根据参数的值来改变mixin的行为。
其中当参数是@_开头的,是调用此混合必选的。
模式匹配
一个混合可能有多种样式,可以根据调用混合时传递的参数,选择使用哪一个混合
混合的参数是@_,那么代表必选
其它的是可选–
.center(@_){
text-align: center;
line-height: 20px;
box-sizing: border-box;
}
.center(color){
color: pink;
}
.center(bgcolor){
background-color: #fff;
}
//调用
.outer{
width: 200px;
height: 200px;
.center(bgcolor)
}
重载
- 重载:
一个混合可能有多种形式(参数数量不同)
可以根据调用混合时传递参数的个数来选择使用某一个混合
- 相同的混合,不同的行为,可以根据调用的时候重置的实参个数选择匹配的混合内容
.center(@color) {
text-align: center;
box-sizing: border-box;
color: @color;
}
.center(@color, @lh) {
text-align: center;
line-height: @lh;
box-sizing: border-box;
color: @color;
}
//调用
.outer {
width: 200px;
height: 200px;
.center(red,50px);
}
守卫
-
根据判断条件选择性Mixin的行为
最初是JavaScript的if / else,使用时语法
Guards允许我们使用>,> =,<,<=,=,关键字true(只匹配关键字true,非true不会匹配),支持逻辑,而不是()
同时我们可以使用“,”分割多个Guards,其表示只要其中任意一个满足就为true
.test(@t) when(@t <=100) {
line-height: @t + 0px;
}
.test(@t) when(@t>100)and(@t<=200){
line-height: @t/2 + 0px;
}
.test(@t) when(@t>200){
line-height: @t * 2 + 0px;
}
.outer {
.test(100)
}
转义字符和插值
- 变量可以用类似ruby和php的方式嵌入到字符串中,通过** @ {name} **这样的结构:
@num:30;
@url:"http://baidu.com/img/";
.outer{
width: @num + 0px;
//因为必须有一个值有单位,而变量没有.所以这样写,但是太low
/*
字符串插值:在字符串中嵌套变量,需要使用@{变量名}的格式
当属性值不是字符串的时候,需要把字符串转义,使用~
*/
width: "@{num}px";
//width: "30px";
width: ~"@{num}px";
//width: "30px";
width: 30px;
background: url("@{url}01.png");
// background: url("http://baidu.com/img/01.png");
}
less函数
-
逻辑函数如if(),Boolean()
-
数学函数如ceil(),floor(),sqrt()等
-
…
.outer{ width: 300px; height: floor(100px /3 ); //33 }
文件导入
-
导入更少的文件:@import“ lib.less”; //等价于@import“ lib”(可以不带后缀)
-
导入css文件:@import“ lib.css”;
// @import "./01.样式重置.css";
/* @import "01.样式重置.css";
.outer {
width: 100px;
height: 100px;
} */
@import "./01.样式重置.less";
//所以文件样式导入要导入less
/* * {
margin: 0;
padding: 0;
}
.outer {
width: 100px;
height: 100px;
} */
.outer{
width: 100px;
height: 100px;
}
转义
- 有时候,当需要约会无效的CSS语法或Less无法识别的字符,就需要使用转义字符。此时,就可以在字符串前面加一个〜,只需需要转义的字符串放在““中。
@num:30;
@url:"http://baidu.com/img/";
.outer{
width: @num + 0px;
//因为必须有一个值有单位,而变量没有.所以这样写,但是太low
/*
字符串插值:在字符串中嵌套变量,需要使用@{变量名}的格式
当属性值不是字符串的时候,需要把字符串转义,使用~
*/
width: "@{num}px";
//width: "30px";
width: ~"@{num}px";
//width: "30px";
width: 30px;
background: url("@{url}01.png");
// background: url("http://baidu.com/img/01.png");
}