移动web开发(6)之Less语言
Less基础
维护CSS的弊端
CSS是一门非程序式语言,没有变量,函数,SCOPE(作用域)等概念.
- CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的.
- 不方便维护及扩展,不利于复用.
- CSS没有很好的计算能力
- 非前端开发工程师来说,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目.
Less介绍
Less(Leaner Style Sheets)是一门CSS扩展语言,也称为CSS预处理器.
作为CSS的一种形式的扩展,他并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语言的特性.
它在CSS的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了CSS的编写,并且降低了CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情.
一句话:Less是一门CSS预处理语言,它扩展了CSS的动态特性.
Less使用
我们要学习的:
Less变量
Less编译
Less嵌套
Less运算
Less变量
变量是指没有固定的值,可以改变的.因为我们CSS中的一些颜色和数值等经常使用
@变量名:值
变量命名规范
- 必须有@为前缀
- 不能包含特殊字符
- 不能以数字开头
- 大小写敏感
小例子:
假如说,我们定义一个变量名为color,值为pink色,当我们再设置背景颜色的时候就不用写pink了,如果要修修改颜色,我们直接修改color的值即可.
Less编译
本质上,Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成相对应的CSS文件.
所以,我们需要把我们的Less文件,编译生成为CSS文件,这样我们的html页面才能使用.
vscode Less插件
Easy LESS插件用来把less文件编译成CSS文件.
安装完毕插件,重新加载vscode,只要保存一下less文件,会自动生成CSS文件.
我们来看下它生成的CSS文件吧.
变成了我们平常使用的样式,但是可以在less文件中修改,只要less文件一修改,CSS文件的内容也会跟着变.生成的CSS就可以直接引用了.
Less嵌套
我们的结构里经常会有包含的关系,一个父盒子里面包含一个子盒子,给子盒子写样式的时候就会变得麻烦...但是less嵌套就解决了这个问题.
我们有一个header,里面包含一个a标签.
我们现在给header和a标签都修改样式,就可以将a的样式嵌套在header的样式里面,
header {
width: 200px;
height: 200px;
background-color: purple;
a {
background-color: royalblue;
}编译成CSS文件后还是header a.
如果遇见(交集|伪类|伪元素选择器)
- 内层选择器的前面没有&符号,它会被解析为父选择器的后代(就是加一个空格).
- 如果有&符号,它就会被解析为父元素自身或父元素的伪类.
我们想要给header里面的a设置伪元素hover的话,就要在前面加上一个&符号.
header {
width: 200px;
height: 200px;
background-color: purple;
a {
color: royalblue;
&:hover {
color: #fff;
}
}
}看看CSS里面的样式,可以看到也是对的.
结构伪类选择器也是一样的道理.
Less运算
注意:
- 乘号(*)和除号(/).
- 运算符中间左右有个空格隔开1px + 5.(现在不加也可以了!)
- 对于两个不同的单位的值之间的运算,运算结果的值取第一个单位的值.
- 如果两个值之间只有一个单位,则运算结果就取该单位.
小例子:
(甚至连颜色值都能运算)
现在的除法运算是要加上括号的!!!
又要做案例啦,这次做的是苏宁的首页,放一些前期准备,我就直接粘贴图片了哈,节省时间.
佳人们,已经快晕倒了
现在的思路就是:先创建一个index.html文件→创建公共样式common.less(同时生成common.css)→单独创建首页的index.less(同时生成index.css)→再让index.html引用index.css文件,这样就既有common的公共样式也有index单独的页面的样式了.
唉,学得我头都晕了...
写起来真的很麻烦,现在高宽都不能定死,而要写成类似width:(88rem/@baseFont)的形式...不过可以自适应屏幕,less也是真的很牛了,方便了许多.
下面就来展示一下吧:
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, min-width=1.0, max-width=1.0">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
<title>Document</title>
</head>
<body>
<!-- 顶部搜索框 -->
<div class="search-content">
<a href="" class="classify"></a>
<div class="search">
<form action="">
<input type="search" value="厨卫保暖季 哒哒哒">
</form>
</div>
<a href="" class="login">登录</a>
</div>
<!-- banner部分 -->
<div class="banner">
<img src="./upload/banner.gif" alt="">
</div>
<!-- 广告部分 -->
<div class="ad">
<a href="#"><img src="./upload/ad1.gif" alt=""></a>
<a href="#"><img src="./upload/ad2.gif" alt=""></a>
<a href="#"><img src="./upload/ad3.gif" alt=""></a>
</div>
<nav>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
<a href="#"><img src="./upload/nav1.png" alt="">
<span>爆款手机</span></a>
</nav>
</body>
</html>index.less部分:
@import "common";
@baseFont: 50;
body {
min-width: 320px;
width: 15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
height: 2000px;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
a,
img {
-webkit-touch-callout: none;
}
li {
list-style: none;
}
.search-content {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 15rem;
height: (88rem/50);
background-color: #ffc001;
.classify {
width: (44rem / @baseFont);
height: (70rem/@baseFont);
background-color: pink;
margin: (11rem/@baseFont) (25rem/@baseFont) (7rem/@baseFont) (24rem/@baseFont);
background: url(../images/classify.png) no-repeat ;
background-size: (44rem / @baseFont) (70rem/@baseFont);
}
.search {
flex:1;
// background-color: purple;
input {
height: (66rem/@baseFont);
outline: none;
width: 100%;
font-size: (25rem/@baseFont);
padding-left: (55rem/@baseFont);
border: 0;
border-radius: (33rem/@baseFont);
background-color: #fff2cc;
margin-top: (12rem/@baseFont);
color: #757575 ;
}
}
.login {
width: (75rem/@baseFont);
height: (70rem/@baseFont);
margin: (10rem/@baseFont);
// background-color: red;
font-size: (25rem/@baseFont);
color: #fff;
line-height: (70rem/@baseFont);
text-align: center;
}
}
.banner {
width: (750rem/@baseFont);
height: (368rem/@baseFont);
img {
width: 100%;
}
}
.ad {
display: flex;
a {
flex: 1;
img {
width: 100%;
// vertical-align: middle;
}
}
}
nav {
width: (750rem/@baseFont);
a {
float: left;
width: (150rem/@baseFont);
height: (140rem/@baseFont);
text-align: center;
img {
display: block;
width: (82rem/@baseFont);
height: (82rem/@baseFont);
margin: (10rem/@baseFont) auto (-10rem/@baseFont);
}
}
span {
font-size: (25rem/@baseFont);
color: #333;
transform: translateY((10rem/@baseFont));
}
}
下面要学习更加简洁的方法了.